1.css简介
1.1 css语法规范
h1 //选择器 {
color:red; font-size:25px; //声明
}
1）选择器是用于指定css样式的html标签，花括号内是对该队行动设置的具体样式；
2）属性和属性值以“键值对”形式出现；
3）属性是对指定对象设置的样式属性，例如字体大小、文本颜色等；
4）属性和属性值之间用英文“：”分开；
5）多个“键值对“之间用通过英文”：“区分。
1.2 css代码风格
h3 {
color: blue;
}
1）属性值前面，冒号后面，保留一个空格
2）选择器标签的大括号中间保留空格
2.css基础选择器
2.1 css基础选择其的作用
选择器就是根据不同需求把不同的标签选出来，简单来说，就是选择标签用的
2.2 选择器分类
1）基础选择器：基础选择器由单个选择器组成，包括标签选择器，类选择器，id选择器，通配符选择器
2）符合选择器
2.3 标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签制定统一的css样式
标签名{
属性1：属性值；
属性1：属性值；
属性1：属性值；
属性1：属性值；
...
}
作用：把某一个标签全部选择出来
优点：快速进行统一设置
缺点：不能设计差异化样式
2.4 类选择器
<head>
<style>
.red { //类选择器
color: red;
}
.gao {
width: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="red gao"> 小王 </div>
</body>
注意
1）类选择器前需要使用"."符号进行标识，后面紧跟类名（自定义）；
2）需要进行修改的标签中加 class="类名"；
3）不要使用纯数字、中文等进行命名，尽量使用英文字母进行表示，命名要有意义，方便操作
多类名使用
1）class属性中写多个类名
2）每个类名使用空格分开
3）多类名修饰后此标签具有所有类名对应的样式
2.5 id选择器
</head>
<style>
#green {
color: green;
}
</style>
</head>
<body>
<div id="green"> 小王 </div>
<div id="green"> 123456 </div>
</body>
注意
1）id选择器前需要使用"#"符号进行标识，后面紧跟类名（自定义）；
2）需要进行修改的标签中加 id="类名"；
id选择器和类选择器的区别
1）类选择器可以多次使用，id选择器只能使用一次
2）id选择器一般用于网页唯一性的元素上，经常和 Javascript 搭配使用
2.6 通配符选择器
<head>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div> 小王 </div>
<div> 小周 </div>
</body>
1）通配符选择器不需要调用，自动就给所有的元素使用样式
2）特殊情况下才使用
3.字体属性
字体属性包括：
字体系列，大小，粗细，文字样式（如斜体）
3.1 字体系列
CSS中使用 font-family 属性定义文本的字体系列
<head>
<style>
div {
font-family: arial, "微软雅黑";
}
</style>
</head>
<body>
<div> 小王 </div>
<div> 小周 </div>
</body>
1）各种字体之间必须用英文状态下的逗号隔开；
2）用空格隔开的多个单词组成的字体加引号（单双都可）
3）尽量使用系统默认自带字体，保证在每个用户的浏览器中都可以正常显示
3.2 字体大小
CSS中使用 font-size 属性定义文本的字体大小
div {
font-size: 20px；
}
1）px（像素）大小是网页的最常用单位；
2）谷歌浏览器的文字大小为16px；
3）不同的浏览器显示字号大小不一样，尽量自己明确值大小，不要默认大小
4）可以给body整个页面指定字体的大小，但标题标签不会随着body一起变化，标题需要单独指定文字大小
3.3 字体粗细
CSS中使用 font-weight 属性定义文本的字体粗细
div {
font-weight: bold;
}
属性值 作用
normal 默认值（不加粗）
bold 定义粗体（加粗）
100-900 400等同于不加粗，700等同于加粗（注意这两个数字后面不跟单位）
3.4 文字样式
CSS中使用 font-style 属性定义文本的字体的风格
div {
font-style: normal;
}
属性值 作用
normal 默认值，标准的字体样式
italic 斜体
注意：平时很少使文字加斜体，反而使斜体的文字改为不斜体（斜体标签有em，i）
3.5 字体的符合属性
字体属性可以把以上文字样式综合来写，这样更节省代码：
div {
/* font:font-style font -weight font-size/line-height font-family; */
font: italic 700 20px "微软雅黑";
}
注意
1）使用font属性时，必须按照上面的语法格式中的顺序书写，不能更换顺序，并且各个属性之间以空格隔开；
2）不需要设置的属性可以省略（取默认值），但需要保留 font-size 和 font-family 属性，否则 font 不起作用
4.文本属性
CSS文本属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本压缩、行间距等。
4.1 文本颜色
使用 color 属性定义文本的颜色
<head>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div> 小王 </div>
<div> 小周 </div>
</body>
表示方法 属性值
颜色值 red，green，blue
十六进制 #FF0000
RGB代码 rgb(255,0,0)
（不需要记，吸取使用即可）
4.2 装饰文本
text-decoration 属性添加对文本的修饰
div {
text-decoration: underline;
}
属性值 作用
none 默认，没有装饰线，经常用none给链接取消下划线
underline 下划线，链接a自带下划线
overline 上划线
line-through 删除线
4.3 对齐文本
text-align 属性用于设置文本的水平对齐方式
div {
text-align: center;
}
属性值 作用
left 左对齐（默认）
right 右对齐
center 居中
4.4 文本压缩
text-indent 属性用于指定文本地一样的缩进，通常将段落手段的首行进行缩进
p {
text-indent: 2em;
}
em使一个相对单位，为当前元素一个文字的大小
4.5 行间距
line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离
p {
line-height: 26px;
}
行间距包括上间距和下间距，其次为文本高度
line-height=行高 可实现文字垂直居中
5.CSS引入方式
CSS样式上写的位置，可以分为三大类：
1）嵌入式
2）行内式
3）链接式
5.1 嵌入式
把所有代码放在 style 标签中
<style>
div {
text-align: center;
}
p {
text-indent: 2em;
}
</style>
1）style 标签理论上放在HTML文档的任何位置都可以，但一般放在文档的head标签中
2）方便控制当前整个页面中的元素样式设置
3）缺点：没有实现样式和结果后的完全分离
5.2 行内式
在元素标签内部的style属性中设置css样式
<div style="color: red; font-size: 12px;"> 小王 </div>
<p style="color: red; font-size: 12px;"> 小王 </p>
1）style是标签的属性
2）可以控制当前的标签设置样式
3）不推荐大量使用，只有对当前元素添加简单样式时，可以考虑使用
5.3 链接式
即外部新建文件，使用最多
实现开发都是外部样式表，适用于央视比较多的情况
核心： 样式独立写在css文件中，之后把css文件引入到html页面中使用
引入外部样式表分为两步：
1）新建一个后缀名为 .css 的样式文件，把所有的css代码都放入此文件中
2）在 html页面head中，使用 link 标签引入这个文件
<link rel="stylesheet" href="css文件路径">
属性 作用
rel 定义当前文件与被连接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件
href 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径
6.CSS复合选择器
复合选择器可以更精准、更高效的选择目标元素（标签）
复合选择器由两个或多个基础选择器，通过不同的返回上级组合而成
包括：后代选择器、子选择器、并集选择器、伪类选择器等
6.1 后代选择器
又称为包含选择器
元素1 元素2 { 样式声明 }
例如：ul li { 样式声明 } //选择样式里面的所有li标签
1）元素1和元素2用空格隔开；
2）元素1是父级，元素2是元素1的后代，最终选择的是元素2；
3）元素1和元素2可以是任何基础选择器
6.2 子选择器
子选择器只能选择作为某元素的最近一级子元素
元素1 > 元素2 { 样式声明 }
例如：div > p { 样式声明 } //选择div里所有最近一级p标签元素
<head>
<style>
.bianse>a {
color: red;
}
</style>
</head>
<body>
<div class="bianse">
<a>小王</a>
<P>
<a>小周</a>
</P>
</div>
</body>
“小王”变色，“小周”不变色，因为子选择器只指定子代
6.4 并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明
元素1,元素2 { 样式声明 }
例如：div,p { 样式声明 }
中间用逗号隔开，表示和的意思
6.5 链接伪类选择器
链接比较特殊，需要单独指定样式
a:link { //未点击的链接
color: red;
}
a:visited { //点击过的链接
color: black;
}
a:hover { //鼠标经过的链接
color: azure;
}
a:active { //鼠标按下没有松开的链接
color: green;
}
注意：为了确保有效，必须按照此顺序进行声明，中间不能有空格
6.7 focus 伪类选择器
修饰获得光标的表单
input:focus {
background-color: yellow;//获得光标的选择器颜色变为黄色
}
7.CSS的元素显示模式
网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好地布局我么的页面
7.1 块元素
常见的块元素有 < h1 >~< h6 >、< p >、< div >、< ul >、< ol >、< li >等，其中< div >标签是典型的块元素
块级元素的特点：
1）自己独占一行；
2）高度、宽度、外边距以及内边距可以自己控制，如果不设置高宽，则高宽由内部元素自动称起撑起
3）宽度默认为父级宽度的100%；
4）是一个容器及盒子，里面可以放行内元素或块级元素
注意：
1）文字类元素内不能使用块级元素
2）< h1 >~< h6 >，< p >都是文字类块级标签，标签主要用于存放文字，因此里面不能放块级元素，特别是< div >
7.2 行内元素
常见的行内元素有＜a >、< strong＞、＜b >、< em >、< i >、 < del >、 < s >、＜ins >、< u >、< span >等，其中＜span＞标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：
1）相邻行内元素在一行上，一行可以显示多个，但是他们之间会有空白缝隙
2）高、宽直接设置是无效的
3）默认宽度就是它本身内容的宽度
4）行内元素只能容纳文本成或其他行内元素
注意：
1）链接里面不能再放链接
2）特殊情况链接＜a＞里面可以放块级元素，但是给 ＜a >转换一下块级模式最安全
7.3 行内块元素
在行内元素中有几个特殊的标签< img />、< input /＞、< td >，它们同时具有块元素和行内元素的特点,有些资料称它们为行内块元素。
行内块元素的特点：
1）和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）。
2）默认宽度就是它本身内容的宽度（行内元素特点）。
3）高度、行高、外边距以及内边距都可以控制（块级元素特点)。
7.4 元素显示模式转换
特殊情况下 ，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性，比如想要增加链接＜a＞的触发范围。
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display:inline-block;
span {
display: ineline-block; //行内元素转换为行内块元素
}
补充：单行文字垂直居中方法：让文字的行高等于盒子的高度 line-height=(height)
8.CSS的背景
通过 CSS 背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
8.1 背景颜色
background-color属性定义了元素的背景颜色。
background-color：颜色值；
一般情况下元素背景颜色默认值是 transparent （透明），我们也可以手动指定背景颜色为透明色
8.2 背景图片
background-image 属性描述元素的背景图像。
常用于 logo或者一些装饰性的小图片或者是超大的背景图片
优点： 便于控制位置
background-image : none | url (url)
none：无背景图（默认值）
url：使用相对或者绝对地址指定的背景图像
8.3 背景平铺
background-repeat 属性设置背景图片的平铺。
background-repeat: repeat | no-repeat | repeat-x | repeat-y;
repeat：背景图像在纵向和横向上平铺（默认值）
no-repeat：背景图像不平铺
repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向平铺
8.4 背景图片位置
background-position 属性可以改变图片在背景中的位置。
background-position: x y;
参数代表的意思是：x坐标和 y坐标。可以使用 方位名词 、精确单位、混合单位
8.4.1 方位名词
属性：top | center | bottom | left | center | right
两个值前后顺序无关，比如left top和 top left效果一致
如果只指定了一个方位名词，另一个值省路，则第二个值默认居中对齐
background-position: left top; //沿着父标签的左上角显示
background-position: top center; //沿着父标签的顶部水平居中显示
8.4.2 精确单位
如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
background-position: -45px 26px； //坐标轴向右为x正方向，向下是y正方向，将图片沿着x轴移动-45px，y轴移动26px
注意：
1）移动的是图片，而不是父标签
2）图片只会显示父标签大小的区域，若父标签大小不够，则图片无法完全显示
8.4.3 混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标 ，第二个值是y坐标
8.5 背景图像固定（背景附着）
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动，后期可以制作视差滚动的效果。
background-attachment: scroll | fixed
scroll：背景图像是随对象内容滚动（默认值）
fixed：背景图像固定
8.6 背景符合写法
简化背景属性的代码，没有特定的书写顺序，一般习惯约定顺序为：
background: transparent url (image.jpg) repeat-y fixed top;
/* 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 */
在实际开发中，更提倡
8.7 背景色半透明
background: rgba(0, 0, 0, 0.3);
最后一个参数是alpha 透明度，取值范围在0~1之间，我们习惯把 0.3省略掉，写为(0, 0, 0, .3);
注意：
1）背景半透明是指盒子背景半透明，盒子里面的内容不受景响
2）CSS3 新增厲性，IE9＋ 版本浏览器才支持的
3）实际开发不太关注兼容性写法，可以放心使用
9.CSS三大特性
CSS 有三个非常重要的三个特性：层叠性、继承性、优先级。
9.1 层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（ 层靈）另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则：
1）样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
2）样式不冲突，不会层叠
<style>
div{
color: red; //后来者居上，此处将被层叠
font-size: 18px;
}
div{
color: green;
}
</style>
9.2 继承性
CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。
适当地使用继承可以简化代码，降低CSS样式的复杂性。
<style>
div{
color: red;
font-size: 18px;
}
</style>
<body>
<div>
<p>文木颜包</p> //此处将会继承<div>的样式
</div>
</body>
子元素可以继承父元素的样式（text-，font-, line- 这些元素开头都可以继承，以及color属性）
注意：
行高的继承：
1）子元素没有设置行高时：
如果父元素行高没有设置单位，则子元素的行高为继承的文字大小的n倍
如果父元素行高设置单位，则子元素的行高为继承的行高
2）子元素设置行高时：
如果父元素行高没有设置单位，则子元素的行高为当前文字大小的n倍
body 行高1.5 这样写法最大的优势就是里面子元素可以根据自己 文字大小 自动调整行高
<style>
body {
font:12px/1.5 Microsoft YaHei;
}
div {
font-size: 14px
//则此时行高为当前子元素的文字大小*1.5，也就是14*1.5等于21px
}
</style>
<body>
<div>行高的继承</div>
</body>
9.3 优先级
多个选择器指定同一个元素时，就会产生权重问题：
选择器相同，则执行层叠性，后来者居上
选择器不同，则根据选择器权重执行
选择器 权重
继承或者 0,0,0,0*
元素选择器 0,0,0,1
类选择器，伪类选择器 0,0,1,0
id选择器 0,1,0,0
行内样式 style=" 1,0,0,0
！important 重要的 无穷大
使用符合选择器时，会出现权重叠加，需要计算权重
‹style>
.test { //权重为10
color: red;
}
div { //权重为无穷大
color: pink ! important;
}
#demo { //权重为100
color: green;
body div { //权重为2
color: red;
}
body { //div的权重由body继承而来，所以为零，第二个选择器比此选择器权重高
color: red;
}
</style>
<body >
<div class="test" id="demo" style="color: purple">权重</div> //面向同一个元素
</body>
注意点：
继承的权重为0，如果没有直接选中，不管父元素权重多高，子元素的权重都是0
权重由四组数字组成，但是不会有进位
10.CSS 盒子模型
盒子模型组成：边框、外边距、内边距、实际内容
10.1 边框 (border)
border可以设置元素的边框，边框由三部分组成，边框宽度(粗细)、边框样式、边框颜色
div{
border-width: 5px;
border-style: solid;
border-color: red;
border: 1px solid red; //边框简写，没有顺序
}
属性 作用
border-width 定义边框粗细，单位是px
border-style 边框的样式
border-color 边框颜色
边框简写：没有顺序
div{
border: 1px solid red;
}
边框分开写法：
div{
border-top: 1px solid red; //上
border-bottom: 1px solid blue; //下
border-left: 1px solid blue; //左
border-right: 1px solid blue; //右
}
10.2 表格的细线边框
制作表格时，每一个表格都有四个边框，两个表格相邻的边框在一起会产生边框变粗的效果，为了防止这种效果产生，所以将两个边框合并
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
td {
border-collapse:collapse; // 表示相邻边框合并在一起
}
collapse 单词是合并的意思
边框会额外增加盒子的实际大小。因此我们有两种方案解决：
1）测量盒子大小的时候，不量边框.
2）如果测量的时候包含了边框,则需要 width/height 减去边框宽度
10.3 内边距 ( padding )
padding 属性用于设置内边距，即边框与内容之间的距离。
属性 作用
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下內边距
padding属性可以有一道四个值
padding: 5px; 1个值，代表上下左右都有5像素内边距;
padding: 5px 10px; 2个值，代表上下内边距是5像素 左右内边距是10像素;
padding: 5px 10px 20px; 3个值，代表上内边距5像素 左右内边距10像素 下内边距20像素；
padding: 5px 10px 20px 30px; 4个值，上是5像素 右10像素 下20像索 左是30像素 顺时针
padding 影响了盒子实际大小
如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
解决方案：让width/height减去多出来的内边距大小即可。
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小.
如果想要使元素具有固定宽和高，但是又想避免padding撑开盒子，可以给目标元素的父盒子指定高宽，利用css的继承性，这样给子盒子添加内边距使就不会撑开盒子
<style>
div {
width: 300px;
height: 100px;
background-color: purple;
}
div p {
padding: 30px; //<p>不会撑开盒子
}
</style>
<body>
<div>
<p>避免撑开盒子</p>
</div>
</body>
10.4 外边距（margin）
行内块，行内元素无法设置宽度高度和margin值
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
属性 作用
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
margin 简写方式代表的意义跟padding 完全一致
修饰盒子与盒子之间距离用margin
外边距可以让块级盒子水平居中，但是必须满足两个条件：
1） 盒子必须指定了宽度 (width）
2）盒子左右的外边距都设置为 auto
注意：只有标准流盒子才能使用此方法进行居中显示，定位或浮动的盒子无法使用此方法
.header {
width: 960px;
margin: 0 auto;
}
<body>
<div class="header">
<span>里面的文字</span>
/* 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可 */
</div>
</body>
常见的写法，以下三种都可以：
1）margin-left: auto; margin-right auto;
2） margin: auto;
3）margin: 0 auto;
注意：以上方法是让块级元素水平居中 ，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
10.5 外边距合并
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父子元素同时有上外边距时，父元素会塌陷较大的外边距值。
解决方案：
1）可以为父元素定义上边框，将父元素上外边距和子元素上外边距隔开
border: 1px solid transparent;
2） 可以为父元素定义上内边距，与上一条同理
padding: 1px;
3）可以为父元素添加 overflow.hidden。
overflow: hidden;
10.6 清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
* {
padding: 0; /*清除内边距*/
margin: 0; /*清除外边距*/
}
注意：行内元素为了照顾兼容性 ，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内 块元素就可以了
小tip：去掉 li 前面的项目符号(小圓点)
list-style: none;
10.7 圆角边框
border-radius 属性用于设置元素的外边框圆角。
border-radius: 10px;
radius 半径(圆的半径）原理：圆与边框的交集形成圆角效果
1）参数值可以是数值或百分比的形式
2）如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
3）该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
4）分开写：border-top-left-radius、border-top-right-radius、 border-bottom-right-radius和 border-bottom-left-radius
10.8 盒子阴影（重点）
box-shadow属性给盒子添加阴影。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。垂直阴影的位置。允许负值。
v-shadow 必需。水平阴影的位置。允许负值。
blur 可选。模湖距离
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
注意：
1）默认的是外阴影(outset)，但是不可以写这个单词,否则导致阴影无效
2）盒子阴影不占用空间，不会影响其他盒子排列。
10.9 文字阴影
text-shadow 属性将阴影应用于文本。
text-shadow: h-shadow v-shadow blur color;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。参阅 CSS 颜色值。
11.浮动（float）
CSS 提供了三种传统的布局方式：标准流、浮动、定位
标准流是最基本的布局方式。
这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置 ，布局自然就完成了。
所谓的标准流：就是标签按照规定好默认方式排列
1）块级元素会独占一行，从上向下顺序排列。 常用标签：div、hr、p、h1~h6、ul、ol、dl、form、table
2）行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 常用元素：span、a、i、em等
浮动的盒子不会有外边距合并的问题
11.1 为什么需要浮动
浮动可以改变元素标签默认的排列方式，标准流行内元素一行显示中间会有空隙，浮动一行显示不会有空隙
浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
11.2 什么是浮动？
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
选择器 {float：属性值；}
属性值 描述
none 元素不浮动（默认値）
left 元素向左浮动
right 元素向右浮动
11.3 浮动特性（重难点）
加了浮动之后的元素,会具有很多特性：
1）浮动元素会脱离标准流(脱标）
2）浮动的元素会一行显示并且元素顶部对齐
3） 浮动的元素会具有行内块元素的特性
4）浮动的盒子不再保留原先的位置，向上浮起，标准流盒子个会占用其位置，形成元素叠加状态，但是内部的文字不会叠加
5）浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级完度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
11.4 浮动布局注意点
1）浮动元素经常和标准流父级搭配使用
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
2）一个元素浮动了，理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子的下一个标准流盒子,不会影响前面的标准流
11.5 清除浮动
原因：
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
本质：
清除浮动元素造成的影响
注意：
1）如果父盒子本身有高度，则不需要清除浮动
2）清除浮动之后，父级就会根据浮动的子盒子自动检测高度。 父级有了高度，就不会影响下面的标准流了
语法：
选择器{
clear：属性值；
}
属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响（实际工作中几乎只用）
清除浮动的策略是：闭合浮动
11.5.1 清除浮动方法
1）额外标签法也称为隔墙法，是W3C推荐的做法。
2）父级添加 overflow 属性
3） 父级添加 :after伪元素
4） 父级添加双伪元素
11.5.2 额外标签法
方法： 在最后一个浮动标签后面添加一个空的块级标签标签。
<div>
<div style=" float: left;”>刘备</div>
<div style=" float: left;”>关羽</div>
<div style=" float: left;”>张飞</div>
<div style=" clear:both”></div＞
//在最后一个浮动标签后面加一个空的块级元素
</div>
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差
注意： 要求这个新的空标签必须是块级元素。
11.5.3 父级添加 overflow属性
方法： 给父级添加 overflow 属性，将其属性值设置为hidden、auto 或 scroll ，注意是给父级添加
<style>
.box{
overflow: hidden;
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
</style>
<div calss="box"> //给父级元素添加该属性
<div style=" float: left;”>刘备</div>
<div style=" float: left;”>关羽</div>
<div style=" float: left;”>张飞</div>
</div>
优点： 代码简洁
缺点： 无法显示溢出的部分
11.5.4 父级添加:after伪元素
:after 方式是额外标签法的升级版，也是给父元素添加
<style>
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.Clearfix { //IEG、7专有
*zoom: 1;
}
</style>
<div calss="clearfix"> //给父级元素添加该属性
<div style=" float: left;”>刘备</div>
<div style=" float: left;”>关羽</div>
<div style=" float: left;”>张飞</div>
</div>
1）优点：没有增加标签，结构更简单
2）缺点：照顾低版本浏览器
3）代表网站：百度、淘宝网、网易等
11.5.5 父级添加双伪元素
<style>
.clearfix :before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1;
}
</style>
<div calss="clearfix"> //给父级元素添加该属性
<div style=" float: left;”>刘备</div>
<div style=" float: left;”>关羽</div>
<div style=" float: left;”>张飞</div>
</div>
1）优点：代码更简洁
2）缺点：照顾低版本浏览器
3）代表网站：小米、腾讯
12.CSS 定位
浮动可以让多个块级盒子一行没有缝除排列显示 ，经常用于横向排列盒子。
定位则是可以让盒子自由的在某个盒子內移位置或者固定屏幕中某个位置，并且可以压住其他盒子。
12.1定位组成
定位 = 定位模式＋ 边偏移。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
12.1.1 定位模式
定位模式决定元素的定位方式，它通过CSS 的 position 属性来设置，其值可以分为四个：
值 语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
12.1.2 边偏移
边偏移就是定位的盒子移动到最终位置。
边偏移属性 示例 描述
top top: 80px 顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom bottom: 80px 底部偏移量，定义元素相对于其父元素下边线的距离。
left left: 80px 左侧偏移量，定义元素相对于其父元素左边线的距离。
right right: 80px 右侧偏移量，定义元素相对于其父元素右边线的距离
注意：如果一个盒子既有left属性也有right属性，则默认会执行left属性 同理 top，bottom只会执行 top属性
12.2 静态定位 static（了解）
静态定位是元素的默认定位方式，无定位的意思。
选择器 {
position: static;
}
1）静态定位按照标准流特性摆放位置，它没有边偏移
2）静态定位在布局时很少用到
12.3 相对定位 relative（重要）重新看
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。
选择器 {
position : relative;
top: 100px;
left: 100px:
width : 200px;
height: 200px;
background-color: red;
}
特点：（务必记住）
1）它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
2）原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。 （不脱标，继续保留原来位置)
12.4 绝对定位 absolute（重要）
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
选择器 {
position: absolute;
}
特点：（务必记住）
1）如果没有祖先元素或者祖先元素没有定位 ，则以浏览器为准定位（ Document文档）。
2）如果祖先元素有定位 (相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3）绝对定位不再占有原先的位置。（脱标）
12.5 子绝父相
意思是：子级是绝対定位的活，父级要用相对定位。
1）子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
2）父盒子布局时，需要占有位置，因此父亲只能是相相对定位。
3）由于绝对定位需要在相对定位的子盒子里进行，所以父盒子要相对定位，从而限制子盒子的的移动范围
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
12.6 固定定位 fixed（重要）
固定定位是元素固定于浏览器可视区的位置。
主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。例如：搜索栏。
选择器 {
position: fixed;
}
特点：（务必记住)
1）以浏览器的可视窗口为参照点移动元素
跟父元素没有任何关系，不随滚动条滚动
2）固定定位不在占有原先的位置（脱标）
固定定位也是脱标的，可以看做是一种特珠的绝对定位
固定定位小技巧：固定在版心右侧位置。
第一步：让固定定位的盒子 left:50%（走到版心的一半位置）
第二部：让固定定位的盒子 margin-left：版心宽度的一半距高（多走版心宽度的一半位置）
这样就可以让固定定位的盒子贴着版心右侧对齐了。
12.7 粘性定位 sticky（了解）
粘性定位可以被认为是相对定位和固定定位的混合。
选择器 {
position: sticky;
top: 10px;
}
滑动页面，标签未距离顶部 10px时，随着滑动移动，到达距离顶部 10px位置时，标签固定在可视窗口上
粘性定位的特点：
1）以浏览器的可视窗口为参照点移动元素（ 固定定位特点）
2）粘性定位占有原先的位置（相对定位特点）
3）必须添加top、left、right、bottom 其中一个才有效
跟页面滚动搭配使用。兼容性较差，IE不支持。
12.8 定位叠放次序 z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index 来控制盒子的前后次序(z轴）
选择器 {
z-index: 1;
}
注意： .
1）数值可以是正整数、 负整数或0，默认是auto，数值越大 ，盒子越靠上
2）如果属性值相同，则按照书写顺序，后来居上
3）数字后面不能加单位
4）只有定位的盒子才有 z-index属性
12.9 定位的拓展
12.9.1 绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平居中和垂直居中。
水平居中
第一步：left: 50%; （让盒子的左侧移动到父级元素的水平中心位置。）
第二步：margin-left: -100p; （让盒子向左移动自身宽度的一半。）
垂直居中
第一步：top: 50%;
第二步：margin-top: -100px;
12.9.2 定位特殊特性
绝对定位和固定定位也和浮动类似。
1）行内元素添加绝对或者固定定位，可以直接设置高度和宽度，相当于转化为块级元素
2）块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
12.9.3 脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。
12.9.4 绝对定位（固定定位）会完全压住盒子
注意：浮动元素不会压住下面标准流盒子里面的文字（图片），但是绝对定位(固定定位）会压住下面标准流所有的内容。
浮动之所以不会压住文字，因为浮动产生的日的最初是为了做文字环绕效果的。文字会围绕浮动元素
13. 网络布局总结
通过盒子模型，清楚知道大部分html标签是一个盒子。
通过CSS浮动、定位可以让每个盒子排列成为网页。
一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
1.标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
2.浮动
可以让多个块级元素一行品示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
3.定位
定位最大的特点是有层叠的概念 ，就是可以上多个盒子前后叠压来展示。如果元素自由在其个盒子內移动就用定位布局。
14 .元素的显示与隐藏
网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现
本质：让一个元素在页面中隐藏或者显示出来，隐藏不等于消失
1）display 显示隐藏
2）visibility 显示隐藏
3）overflow 溢出显示隐藏
14.1 display 属性
display 属性用于设置一个元素应如何显示
1）display: none； 隐藏对象
2）display: block； 除了转换为块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置，后面的标准流会占用其位置
14.2 visibility 可见性
visibility 属性用于指定一个元素应可见还是隐藏。
1）visibility: visible; 元素可视
2）visibility: hidden; 元素隐藏
visibility 隐藏元素后，继续占有原来的位置，后面的标准流不会占用其位置
总结：
如果隐藏元素想要原来位置，就用 visibility: hidden;
如果隐藏元素不想要原来位置，就用 display: none;
14.3 overflow 溢出
overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管是否超出内容，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条
一般情况下 ，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用 overflow. hidden因为它会隐藏多余的部分。
15. CSS 高级技巧
15.1 精灵图
精灵圈（sprites）的使用
第一步：先摆放小盒子
第二步：移动精灵图，是目标图片放在小盒子里
核心：
1）精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2）这个大图片也称为 sprites 精灵图 或者 雪碧图
3）移动背景图片位置，此时可以使用 background-position。
4）移动的距离就是这个日标图片的x和 y 坐标。注意网页中的坐标有所不同
5）因为一般情况下都是往上往左移动，所以数值是负值。
6）使用精灵图的时候需要精确测量 ，每个小背景图片的大小和位置。
使用精灵图核心总结：
1）精灵图主要针对于小的背景图片使用。
2）主要借助于背景位置来实现 background-position。
3）一般情况下精灵图都是负值。
15.2 CSS三角
三网页中常见一些一角形，使用 CSS直接面出来就可以，不必做成图片或者字体图标
div {
width: 0;
height: 0;
border: 500px solid transparent; 500px为三角的大小
border-left-color: red; 想要哪个三角，就给那一边添加颜色
}
16.CSS 用户界面样式
16.1 鼠标样式 cursor
li {
cursor: pointer;
}
设置或检索在对象上移动的鼠标指针采用那种系统预定义的光标形状。
属性值 描述
default 小白（默认）
pointer 小手
move 移动
text 文本
not-allowed 禁止
16.2 轮廓线 outline
给表单添加 outline: 0; 或者 outline: none;样式之后，就可以去掉默认的蓝色边框。
input {
outline: none;
}
16.3 防止拖拽文本域 resize
实际开发中 ，我们文本域右下角是不可以拖搜的。
textarea {
resize: none;
}
文本域需要一行书写，不然会出现空格
17. vertical-align 属性应用
17.1 图片、表单和文字对齐
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直
居中对齐了。
注意：给图片添加
vertical-align : baseline | top | middle | bottom;
/* 基线 顶线 中线 底线 */
17.2 解决图片底部默认空白缝隙问题
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
1）给图片添加 vertical-align : baseline | top | middle | bottom; 等。（提倡使用的）
2）把图片转换为块级元素 display: block;
18. 溢出的文字省略号显示
18.1 单行文本溢出显示省略号--必须满足三个条件
三部曲：
1）先强制一行内显示文本
white-space: nowrap;（默认 normal 自动换行)
2）超出的部分隐藏
overflow: hidden;
3）文字用省略号替代超出的部分
text-overflow : ellipsis;
div {
width: 150px;
height: 80px;
background-color: red;
margin: 100px auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div>
一处的文字省略号显示
</div>
18.2 多行文本溢出显示省略号（仅作了解）
多行文本溢出显示省略号 ，有较大兼容性问题，适命于webkit浏览铅成移动端 移动端大部分是webkit内 核）
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; 弹性伸缩盒子模型显示
-webkit-1ine-clamp:2; 限制在一个块元素显示的文本的行数
-webkit-box-orient: vertical; 设置或检索伸缩盒对象的子元素的排列方式
19. 常见的布局技巧
19.1 margin负值运用
当每一个盒子都有边框的时候，添加左浮动之后，左盒子的右边框和右盒子的左边框会进行重叠，形成看起来更粗的视觉效果。为了防止此效果，我们需要进行第一步
第一步：让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
我们想要鼠标移动到哪个盒子，哪个盒子的边框会变颜色，但是由于右盒子的左边框盖住了左盒子有边框，所以当鼠标移到左盒子的时候，左盒子的有边框无法显示，所以需要进行第二步
第二步：鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位 ，则加相对定位来保留位置，如果有定位，则加z-index）
ul li:hover {
如果盒子没有定位，则鼠标经过添加相对定位即可，因为相对定位会压住其他的标准流盒子
position: relative;
border: 1px solid blue;
}
ul li:hover {
如果i都有定位，则利用z-index提高层级
z-index: 1;
border: 1px solid blue;
}
19.2 css三角强化
用于构造不等腰三角形
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;
width: 0;
height: 0;
把上边框宽度调大
border-top: 100px solid transparent;
border-right: 50px solid skyblue;
左边和下边的边框宽度设置为0
border-bottom: 0 solid blue;
border-left: 0 solid green;
20.CSS 初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾刘览器的兼容，我们需要对css初始化
简单理解：CSS初始化是指重设浏览器的样式。（也称为CSSvreset )
每个网页都必须首先进行CSS初始化。
这里我们以 京东CSS初始化代码为例。
Unicode编码字体：
把中文字体的名称用相应的Unicode编码来代替 ，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如：
黑体 \9ED1\4F53
宋体 \15B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1
