加油加油加油，天天做笔记！ 入门跟着黑马的pink老师在b站的视频走的。
这是他的b站链接。 https://www.bilibili.com/video/BV14J4114768?p=1
让文字的行高等于盒子的高度，就能让文字在当前盒子内垂直居中。
div { width: 200px; height: 40px; background-color: pink; line-height: 40px; }根据CSS样式书写的位置（引入方式），CSS可分为行内样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）。
写于html页面内部，是将所有的CSS代码抽取出来，单独放到一个< style > 标签中。
其中< style >标签理论上可以放在HTML文档的任何地方，但是一般会放在< head >标签中。
内部样式表代码结构清晰，但是并没有实现结构与样式完全分离。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>内部样式表</title> <style> div { color: red; } </style> </head> <body> <div>所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.</div> </body>在元素标签内部的style属性中设定CSS样式。适合于简单修改样式。
style其实就是标签的属性。
在双引号的中间，写法要符合CSS的规范。
由于书写繁琐，并没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。
<body> <p style="color: pink; font-size: 20px;">我是一个行内样式表</p> </body>实际开发都采用外部样式表。
外部样式表适用于样式比较多的情况。
核心是：样式单独写道CSS文件中，之后把CSS文件引入到HTML页面中使用。
引入外部样式表的步骤：
（1）新建一个.css的样式文件，写入CSS代码。
（2）使用标签引入这个.css文件。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>外部样式表</title> <!-- rel属性：定义当前文档与被链接文档之间的关系，在这里指定stylesheet表明被链接文档是一个样式表文件 --> <!-- href属性：定义所链接外部样式表文件的url，可以是行对路径也可以是绝对路径 --> <link rel="stylesheet" href="style.css"> </head>在CSS中可以根据选择器的类型把选择器分为基础选择器和复合选择器。
复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。
复合选择器可以更加准确、高效的选择目标元素（标签）。
复合选择器是由两个或者多个基础选择器通过不同的方式组合而成的。
常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等等。
又称为包含选择器，可以选择父元素中的子元素。
写法为把外层标签写在前面，内层标签写在后面，中间用空格分隔。
当标签发生嵌套时，内层标签就成为外层标签的后代。
元素1 元素2 { 样式声明 }
元素1和元素2中间用空格隔开；
元素2必须是元素1的后代，可以是儿子，孙子等；
元素1和元素2可以是任意的选择器。
/* 我想要把ol里面的小li选出来改为red */ ol li { color: red; }子选择器只能选择作为某元素最近一级子元素，即"亲儿子"元素，和孙子没关系。
.nav>a { /* 子选择器使用的是">" */ color: red; } /* <div class="nav"> <a href="#">儿子</a> <p> <a href="#">孙子</a> </p> </div> */ /* 此时选择的是儿子标签，孙子标签没有被选中。 */并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
/* 要求2: 请把div,p标签改为红色 */ div, p, .pig li { color: red; } /* 约定的语法规范,我们并集选择器喜欢竖着写 */ /* 一定要注意,最后一个选择器 不需要加逗号 */伪类选择器用于某些选择器增加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号（:）表示，比如:hover、:first-child。
伪类选择器有很多，比如链接伪类选择器、结构伪类选择器等。
注意事项：
为了确保生效，按照LVHA的循顺序声明： :link :visited :hover :active 。
a链接在浏览器中具有默认样式，所以在实际开发中都需要给链接单独的指定样式。
/* 1.未访问的链接 a:link 选择所有未被访问的链接 */ a:link { color: #333; text-decoration: none; } /*2. a:visited 选择所有已被访问过的链接 */ a:visited { color: orange; } /*3. a:hover 选择鼠标经过的那个链接 */ a:hover { color: skyblue; } /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */ a:active { color: green; } 链接伪类选择器在实际开发中的写法：
body { color: red; } a { color: #333; text-decoration: none; } a:hover { color: #369; text-decoration: underline; }:focus伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况< input >类表单元素才能获取，因此这个选择器也主要针对表单元素。
/* // 把获得光标的input表单元素选取出来 */ input:focus { background-color: pink; color: red; }元素显示模式就是元素（标签）以什么方式进行显示，例如< div >自己独占一行，< span >一行可以多个布局。
HTML元素一般分为块元素和行内元素两种类型。
常见的块元素有< h1 >~< h6 > < p > < div > < ul > < ol > < li >等，< div >最典型。
块元素的特点：
块元素独占一行。
高度宽度以及内外边距都可以控制。
宽度默认是容器（父级宽度）的100%。
块元素是一个容器及盒子，里面可以放行内或块级元素。
注意：
文字类的元素内不能使用块级元素，例如< p >和< h1 >~< h6 >。
常见的行内元素有< a > < strong > < b > < em > < i > < del > < s > < ins > < u > < span >等，其中< span >为最典型的行内元素。
行内元素的特点：
相邻行内元素在一行上，一行可以显示多个。
高度宽度直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。
注意：
链接里面不能再放链接；
特殊情况链接< a >里面可以放块级元素，但是给< a >转换成块级元素最安全。
行内元素中有几个特殊标签，例如< img > < input > < td >，它们同时具有块级元素和行内元素的特点。
行内块元素的特点：
和相邻行内元素（行内块）在一行上，但是它们之间有空白缝隙，一行可以显示多个。
默认宽度就是它本身内容的宽度。
高度宽度行高，内外边距都可以控制。
当一个模式的元素需要另一个模式的特性时，我们需要转换元素模式。
例如想要增加链接< a >的触发范围
转换为块级元素（常用）：display:block;
转换为行内元素：display:inline;
转换为行内块元素（常用）：display:inline-block;
a { width: 150px; height: 50px; background-color: pink; /* 把行内元素 a 转换为块级元素 */ display: block; } div { width: 300px; height: 100px; background-color: purple; /* 把块级元素 div 转换为行内元素 */ display: inline; } span { width: 300px; height: 30px; background-color: skyblue; /* 把 行内元素 span 转换为行内元素 */ display: inline-block; }背景属性可以设置背景颜色，背景图片，背景图片位置，背景图像固定，背景平铺等。
background-color属性描述了元素的背景图像，实际开发中常见于logo，一些装饰性的小图片或者是超大的背景图片。
优点是非常便于控制位置。
div { width: 300px; height: 300px; /* 不要落下 url() */ /* none表示无背景图 */ /* url可以使用绝对地址或相对地址 */ background-image: url(images/logo.png); }利用background-position属性可以改变图片在背景中的位置。
background-position: x , y;x , y 可以使用方位名词或者精确单位。
background-attachment属性设置背景图片固定或随着页面的其余部分滚动。
background-attachment后期可以制作视差滚动的效果。
body { background-image: url(images/bg.jpg); background-repeat: no-repeat; background-position: center top; /* scroll，背景图像随着对象内容滚动 */ /* fixed，把背景图片固定住 */ background-attachment: fixed; color: #fff; font-size: 20px; }当使用背景简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
background： 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；
复合写法是实际开发中更提倡的写法。
body { /* background-image: url(images/bg.jpg); background-repeat: no-repeat; background-position: center top; */ /* 把背景图片固定住 */ /* background-attachment: fixed; background-color: black; */ background: black url(images/bg.jpg) no-repeat fixed center top; color: #fff; font-size: 20px; }CSS3提供了背景颜色半透明的效果。
半透明是指盒子背景半透明，盒子里的内容不受影响。
div { width: 300px; height: 300px; /* background-color: black; */ /* background: rgba(0, 0, 0, 0.3); */ /* r对应红色，g对应绿色，b对应蓝色，a则是alpha的简写，范围是0-1 */ /* 我们习惯把0.3的0舍去掉，写成.3 */ background: rgba(0, 0, 0, .3); }背景图片实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点在于非常便于控制位置（精灵图也是一种运用场景）
相同的选择器给相同的样式，此时一个样式就会覆盖另一个冲突的样式，层叠性主要解决样式冲突的问题。
层叠性的原则：
样式冲突就遵循就近原则，哪个样式离结构近（< body >）就执行哪个；
样式不冲突就不会层叠。
div { color: red; font-size: 12px; } div { color: pink; }子标签会继承父标签的某些样式，比如文本颜色和字号。
恰当的使用继承性可以简化代码，降低CSS样式的复杂性；
子元素可以继承父元素的样式（ text- font- line- color ）;
当同一个元素指定多个选择器时，就会产生优先级。
选择器相同，则执行层叠性；
选择器不同，则根据选择器权重执行。
.test { color: red; } div { color: pink!important; } #demo { color: green; }优先级注意点：
权重由4个数字组成但是不会有进位。
等级判断从左到右，如果某一位数字相同则判断下一位。
继承的权重是0！
<style> /* 父亲的权重是 100 */ #father { color: red!important; } /* p继承的权重为 0 */ /* 所以以后我们看标签到底执行那个样式,就先看这个标签有么有直接被选出来 */ p { color: pink; } body { color: red; } /* a链接浏览器默认制定了一个样式 蓝色的 有下划线 a {color: blue;}*/ a { color: green; } </style> </head> <body> <div id="father"> <p>你还是很好看</p> </div> <a href="#">我是单独的样式</a> </body>如果是复合选择器，则会有权重叠加，需要计算权重。
div ui li → 0，0，0，3
.nav ui li→ 0，0，1，2
a:hover→ 0，0，1，1
.nav a→ 0，0，1，1
/* 复合选择器会有权重叠加的问题 */ /* 权重虽然会叠加,但是永远不会有进位 */ /* ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 2 */ ul li { color: green; } /* li 的权重是 0,0,0,1 1 */ li { color: red; } /* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 11 */ .nav li { color: pink; }页面布局要学习三大核心：
盒子模型浮动定位网页布局的核心本质就是利用CSS摆盒子。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括：边框、内外边距、实际内容。
border可以设置边框的宽度、样式、颜色。
div { width: 300px; height: 200px; /* border-width 边框的粗细 一般情况下都用 px */ /* border-style 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框*/ /* border-style: dashed; */ /* border-style: dotted; */ /* border-color 边框的颜色 */ /* 复合写法（没有顺序）：border ： border-width border-style border-color ； */ border: 5px solid red; /* 边框分开写，上边框 */ border-top: 5px solid pink; }border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。
border-collapse：collapse；表示相邻边框合并在一起
边框会额外增加盒子的实际大小，可以通过以下方法解决：
测量盒子的大小时，不测量边框；
如果测量盒子大小时包含了边框，则需要width/height 减去边框的宽度。
/* 我们需要一个200*200的盒子, 但是这个盒子有10像素的红色边框 */ div { width: 180px; height: 180px; background-color: pink; border: 10px solid red; }内边距即边框于内容之间的距离。
div { width: 200px; height: 200px; background-color: pink; /* padding-left: 5px; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; */ /* 内边距复合写法(简写) */ /* padding: 5px; */ /* padding: 5px 10px; */ /* padding: 5px 10px 20px; */ padding: 5px 10px 20px 30px; }如果盒子已经有了宽度和高度，此时再指定padding，则会撑大盒子。
为了保证盒子大小与效果图一致，则让width/height减去多出来的内边距大小。
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。
h1 { /* width: 100%; */ height: 200px; background-color: pink; padding: 30px; } div { width: 300px; height: 100px; background-color: purple; } div p { /* width: 100%; 如果写了这一句就会撑开 */ padding: 30px; background-color: skyblue; }margin属于设置外边距，控制盒子与盒子之间的距离。
典型应用：
使块级盒子水平居中，但是必须满足两个条件：
（1）块级盒子必须指定了宽度（width）
（2）盒子的左右外边距都设置为auto。
.header { width: 900px; height: 200px; background-color: pink; margin: 100px auto; } 对于行内元素和行内块元素，可以给其父元素添加text-align：center 。
.header { width: 900px; height: 200px; background-color: pink; margin: 100px auto; /* 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可 */ text-align: center; }当上下两个都有margin的块元素相邻时，他们之间的垂直边距不是margin-bottom和margin-top之和，而是取两个值中的较大者。
将这种现象称作相邻块元素垂直外边距的合并。
解决方法：
尽量只给一个盒子添加margin值。
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
浮动的的盒子不会有外边距合并的问题。
解决方案：
可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加overflow：hidden。
.father { width: 400px; height: 400px; background-color: purple; margin-top: 50px; /* border: 1px solid red; */ /* border: 1px solid transparent; */ /* padding: 1px; */ overflow: hidden; } .son { width: 200px; height: 200px; background-color: pink; margin-top: 100px; }网页元素很多带有默认的内外边距，我们在布局前首先要清除网页的内外边距。
/* 这句话也是我们css 的第一行代码 */ * { margin: 0; padding: 0; } span { /* 行内元素为了照顾兼容性，尽量只设置左右外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了 */ background-color: pink; margin: 20px; }CSS3中新增了box-shadow属性为盒子添加阴影。
div { width: 200px; height: 200px; background-color: pink; margin: 100px auto; /* box-shadow: 10px 10px; */ } div:hover { box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3); } /* 默认的是外阴影outset，但是不可以写这个单词，否则导致阴影无效 */ /* 盒子阴影不占用空间，不影响其他盒子排列 */ /* 原先盒子没有影子,当我们鼠标经过盒子就添加阴影效果 */CSS中可以使用text-shadow属性设置文本阴影。
网页布局的本之——利用CSS来摆放盒子，把盒子摆到相应位置。
CSS提供了三种传统布局方式（简单的说就是盒子如何排列）：
标准流（普通流）浮动定位这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。
实际开发中，一个页面基本包含了这三种布局方式。
所谓的标准流就是标签按照规定好的默认方式排列，标准流是最基础的布局方式。
1、块级元素会独占一行，从上到下顺序排列。
常用元素：< div > < hr > < p > < h1 >-< h6 > < ul > < ol > < dl > < form > < table > 。
2、行内元素会按照顺序从左到右排列，碰到父元素边缘则自动换行。
常用元素：< span > < a > < i > < em > 。
浮动（float）属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：
.left, .right { float: left; width: 200px; height: 200px; background-color: pink; } .right { float: right; }如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
浮动的盒子中间是没有缝隙的，是紧挨在一起的，行内元素同理。
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接给高度和宽度。
为了约束浮动元素位置，我们网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，复合网页布局第一准则。
一个元素浮动了，理论上其余的兄弟也要浮动。一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
思考：所有的父盒子都需要设置高度吗?
有一种情况：让子盒子撑开父亲，有多少子盒子，父盒子就被撑多高。
但是不给父盒子加高度，父盒子的高度变成了0，同时子盒子又添加了浮动，那么势必会影响下面的标准流盒子的位置。
因此，需要进行清除浮动。 （重要）
由于父级盒子很多情况下不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
清除浮动的本质
清除浮动的本质是清除浮动元素脱标而造成的影响；
如果父盒子本身有高度，则不需要清除浮动；
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
额外标签法（隔墙法），W3C推荐的做法。
父级添加overflow属性。
父级添加after伪元素。
父级添加双伪元素。
额外标签法也称为隔墙法，是W3C推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签，例如< div style=" clear:both" >< /div >，或其他标签（如< br >等）
优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化较差。
注意：要求这个新的空标签必须是块级元素。
<style> ~ ~ ~ .clear { clear: both; } </style> </head> <body> <div class="box"> <div class="damao">左盒子</div> <div class="ermao">右盒子</div> <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 --> <!-- <span class="clear"></span> X这样是不对的--> <div class="clear"></div> </div> <div class="footer"></div> </body>可以给父元素添加overflow属性，将其属性值设置为hidden、auto或scroll 。
优点：代码简洁。
缺点：无法显示出溢出的部分。
:after 方式是额外标签法的升级版，也是给父元素添加。
优点：没有增加标签，结构更简单。
缺点：照顾低版本浏览器。
代表网站：百度、淘宝、网易等
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 专有 */ *zoom: 1; }也是给父元素添加。
优点：代码更简洁。
缺点：照顾低版本浏览器。
代表网站：小米、腾讯等。
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }为什么需要清除浮动？
父级没高度。
子盒子浮动。
影响了下面标准流盒子的布局，从而影响整体布局。
浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子；
而定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置，并且可以压住其他盒子。
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
边偏移就是定位的盒子移动到最终位置。
top top：30px； 顶部偏移量，定义元素相对于其父元素上边线的距离。bottom bottom：30px； 底部偏移量，定义元素相对于其父元素下边线的距离。left left：30px； 左侧偏移量，定义元素相对于其父元素左边线的距离。right right：30px； 右侧偏移量，定义元素相对于其父元素右边线的距离。定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：
static 静态定位relative 相对定位absolute 绝对定位fixed 固定定位静态定位是元素默认定位方式，无定位的意思。
div { position: static; /* relative absolute fixed */ }静态定位的特点：
静态定位按照标准流特性摆放位置，没有边偏移静态定位在布局时很少用到相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。
div { position: relative; /* absolute fixed */ top: 100px; left: 200px; }相对定位的特点（重要）：
它是先对于自己原来的位置来移动的。（移动位置的时候参照点是自己原来的位置）原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保持原来位置）因此，相对位移并没有脱标，它的最典型应用是当绝对定位的父元素。如果子元素使用了绝对定位，那么父元素要用相对定位。绝对定位是元素在移动的时候，是相对于它父元素来说的。
div { position: absolute; /* fixed */ top: 100px; left: 200px; }绝对定位的特点（重要）：
如果没有父元素或父元素没有定位，则以浏览器为准定位。（Document文档）如果父元素有定位（相对、绝对、固定），则以最近一级的有定位的父元素为参考点移动位置。绝对定位不再占有原来的位置。（脱标）如果子元素使用了绝对定位，那么父元素要用相对定位。固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
div { position: fixed; top: 100px; left: 200px; }固定定位的特点（重要）：
以浏览器的可视窗口为参照点移动元素，跟父元素没有关系。不随着滚动条滚动。固定定位不再占有原先的位置。固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。粘性定位可以认为是相对定位和固定定位的混合。
div { position: sticky; top: 20px; }粘性定位的特点：
以浏览器的可视窗口为参照点移动元素。（固定定位特点）粘性定位占有原来的位置。（相对定位特点）必须添加top、left、right、bottom其中一个才有效。跟页面滚动搭配使用，兼容性较差，IE不支持。在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制 盒子的前后次序（z轴 ）
div { z-index: 1; /* 数值可以是正整数、负整数、0，默认是auto，数值越大，盒子越靠上。 */ /* 如果属性值相同，则按照书写顺序，后来居上。 */ /* 数字后面不能加单位。 */ /* 只有定位的盒子才能有z-index属性。 */ }加了绝对定位的盒子是不能通过margin：0 auto；水平居中的。
算法：
left 走 50%，为父元素容器宽度的一半。margin 负值 往左边走，自己宽度的一半。绝对定位和固定定位也和浮动相似。
行内元素添加绝对或固定定位，可以直接设置高度和宽度。块级元素添加绝对或固定定位，如果不给宽度或高度，默认大小是内容的大小。浮动元素、绝对或固定定位的元素都不会触发外边距合并的问题。
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。
但是绝对定位（固定定位）会压住下面标准流所有的内容。
浮动之所以不会压住文字，是因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素。
通过盒子模型，清楚的知道大部分html标签是一个盒子。
通过CSS浮动、定位可以让每一个盒子排列成网页。
一个完整的网页是由标准流、浮动、定位一起完成布局的，每个都有自己专门的用法。
标准流：可以让盒子上下排列或左右排列，垂直的块级盒子显示就用标准流布局。浮动：可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。定位：定位的最大特点就是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面就会出现。
本质：让一个元素在页面中隐藏或显示出来。
display属性用于设置一个元素应如何显示。
display：none；隐藏对象。display：block；除了转换为块级元素之外，同时还有显示元素的意思。特点：
display隐藏元素后，不再占有原来的位置。（后面应用广泛，搭配JS做很多网页特效）
visibility属性用于指定一个元素应可见还是隐藏。
visibility：visible；元素可视。visibility：hidden；元素隐藏。特点：
visibility隐藏元素后，继续占有原来的位置。
overflow属性指定了如果内容溢出一个元素的框时（超过其指定高度及宽度）
overflow：visible； 不剪切内容也不添加滚动条。overflow：hidden； 不显示超过对象尺寸的内容，超出的部分隐藏掉。overflow：scroll； 不管是否超出内容，都显示滚动条。overflow：auto； 超出内容则显示滚动条，不超出则不显示滚动条。一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用overflow：hidden； 因为它会隐藏多余的部分。
在实际开发当中，我们不会直接使用链接a而是用li包含链接（li+a）的做法。
1、（li+a）的语义更加清晰，一看就是有条理的列表型内容。
2、如果直接使用a，搜索引擎容易辨别为有堆砌关键词嫌疑（导致容易被搜索引擎降低权重的风险），从而影响网站排名。
注意：
让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示。这个导航栏可以不给宽度，将来可以继续添加其余文字。因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度。Emmet语法使用缩写来提高html/css的编写速度。
1、快速生成HTML结构语法
生成标签：直接输入标签名按tab
生成多个相同标签：div*3
生成父子级关系的标签：ui>li*3
生成兄弟关系的标签：div+p
生成带类名或者ID的标签，.one 或者 #two ，按tab（如果是p标签可以写成：p.one 或者 p#two）
生成的div类名是有顺序的，可以用自增符号 ， 例 如 . d e m o ，例如 .demo ，例如.demo*5
生成的标签内部写内容可以用 { } 表示
2、快速生成CSS样式语法
CSS基本采取简写形式即可。
例如：w200 + tab = width ：200px；
lh26 + tab =line-height ：26px；
3、快速格式化代码（排版）
Shift + Alt + F ；
自动格式化：文件 →首选项 →设置 →搜索format on save; →勾选
标签都是有语义的，需要在合理的地方使用合理的标签，比如产品标题就用标签，大量文字片段就用
标签。
为什么要用很多类名？ 类名就是给每个盒子起一个名字，可以更好的找到这个盒子，这样选取盒子更加方便，后期维护也更加容易。
什么时候用margin和padding？ 大部分情况下两个可以混用，两者各有优缺点。
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，大大降低了页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的速度，提高网页的加速速度，出现了CSS精灵技术。（CSS sprites、CSS雪碧）
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要请求一次就可以了。
使用精灵图的核心：
精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图中。（主要针对小背景图片）这个大图片也成为sprites 精灵图 或 雪碧图。移动背景图片位置，此时可以使用background-position。（主要借助背景位置来实现）移动的距离就是这个目标的x和y坐标，注意网页中的坐标有所不同。一般情况下都是往上往左移动，数值为负值。使用精灵图时需要精确测量每个小背景图片的大小和位置。 .box1 { width: 60px; height: 60px; margin: 100px auto; background: url(images/sprites.png) no-repeat -182px 0; }字体图标的使用场景：主要用于显示网页中通用、常用的一些小图标。
精灵图有很多优点，但是缺点很明显：
图片文件比较大。图片本身放大和缩小会失真。一旦图片制作完毕想要更换非常复杂。此时，就需要用到字体图标iconfont 。
字体图标可以为前端提供一种方便高效的图标使用方式，展示的是图标，本质属于文字，可以随意更换大小颜色，不失真。
注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
总结：
如果遇到一些结构和样式比较简单的小图标，就用字体图标。如果遇到一些结构和样式复杂一点的小图片，就用精灵图。icomoon字库：http://icomoon.io
阿里iconfont字库：http://www.iconfont.cn/
如果工作中原来的字体不够用了，我们需要添加新的字体图标到原来的字体文件中。
把压缩包里的selection.json 重新上传，然后选中自己想要的新图标，重新下载压缩包并替换原来的文件即可。
网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。
.jd span { position: absolute; right: 15px; top: -10px; width: 0; height: 0; /* 为了照顾兼容性,照顾一些低版本的浏览器 */ line-height: 0; font-size: 0; border: 5px solid transparent; border-bottom-color: pink; }所谓的界面样式，就是更改一些用户的操作样式，以便于提高更好的用户体验。
更改用户的鼠标样式表单轮廓防止表单域拖拽设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
default 小白，默认pointer 小手move 移动text 文本not-allowed 禁止给表单添加outline：0；或者 outline：none；样式之后，就可以去掉默认的蓝色边框。
实际开发中，文本域右下角是不可以拖拽的。
textarea { resize: none; }CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但它只针对于行内元素或行内块元素。
vertical-align: baseline | top | middle | bottom ; baseline 默认，元素放置在父元素的基线上。top 把元素的顶端与行中最高元素的顶端对齐。middle 把此元素防止在父元素的中部bottom 把元素的顶部与行中最低的元素的顶端对齐bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
给图片添加vertical-align: middle| top| bottom ;等（提倡使用）把元素转换为块级元素 display: block;想要满足此效果，必须满足三个条件。
div { width: 150px; height: 80px; background-color: pink; margin: 100px auto; /* 这个单词的意思是如果文字显示不开自动换行 */ /* white-space: normal; */ /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */ white-space: nowrap; /* 2.溢出的部分隐藏起来 */ overflow: hidden; /* 3. 文字溢出的时候用省略号来显示 */ text-overflow: ellipsis; }多行文本溢出显示省略号，有较大的兼容性问题，适合于webkit浏览器或 移动端（移动端大部分是webkit内核）
div { width: 150px; height: 65px; background-color: pink; margin: 100px auto; overflow: hidden; text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 限制在一个块元素显示的文本的行数 */ -webkit-line-clamp: 3; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical; }更推荐后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
这种情况下不需要设置左右两个盒子并且都浮动。
只需要设置文字围绕浮动元素即可，巧妙运用浮动元素不会压住文字的特性。
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。
简单理解：CSS初始化是指重设浏览器的样式，也称CSS reset
每个网页都必须首先进行CSS初始化。
以京东CSS初始化代码为例：
/* 把我们所有标签的内外边距清零 */ * { margin: 0; padding: 0 } /* em 和 i 斜体的文字不倾斜 */ em, i { font-style: normal } /* 去掉li 的小圆点 */ li { list-style: none } img { /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝隙的问题 */ vertical-align: middle } button { /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */ cursor: pointer } a { color: #666; text-decoration: none } a:hover { color: #c81623 } button, input { /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */ font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif } body { /* CSS3 抗锯齿形 让文字显示的更加清晰 */ -webkit-font-smoothing: antialiased; background-color: #fff; font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; color: #666 } .hide, .none { display: none } /* 清除浮动 */ .clearfix:after { visibility: hidden; clear: both; display: block; content: "."; height: 0 } .clearfix { *zoom: 1 }Unicode编码字体：
把中文字体的名称用相应的Unicode编码来代替，这样就可以有效避免浏览器解释CSS代码时候出现乱码的问题。
比如：
黑体\9ED1\4F53
宋体\5B8B\4F53
微软雅黑\5FAE\8F6F\96C5\9ED1
