CSS看这一篇就够啦，CSS底子大全，可用于快速回顾知识，口试首选
1 CSS简介CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。
CSS 是也是一种标记语言，重要用于设置 HTML 页面中的文本内容（字体、巨细、对齐方式等）、图片的外形（宽高、边框样式、
边距等）以及版面的布局和外观显示样式。
更多CSS内容可以看MDN：点击传送
1.1 CSS 语法规范
全部的样式，都包含在
<head>
<style>
h4 {
color: blue;
font-size: 100px;
}
</style>
</head>
1.2 CSS 的三大特性
CSS 有三个非常告急的三个特性：层叠性、继续性、优先级。
1.2.1 层叠性
雷同选择器给设置雷同的样式，此时一个样式就会覆盖（层叠）另一个辩说的样式。层叠性重要办理样式辩说
的题目
层叠性原则：
[*]样式辩说，遵循的原则是就近原则，哪个样式离结构近，就实行哪个样式
[*]样式不辩说，不会层叠
1.2.2 继续性
CSS中的继续: 子标签会继续父标签的某些样式，如文本颜色和字号。
恰当地使用继续可以简化代码，低落 CSS 样式的复杂性
子元素可以继续父元素的样式（text-，font-，line-这些元素开头的可以继续，以及color属性）
[*]行高的继续性
body {
font:12px/1.5 Microsoft YaHei；
}
[*]行高可以跟单元也可以不跟单元
[*]假如子元素没有设置行高，则会继续父元素的行高为 1.5
[*]此时子元素的行高是：当前子元素的笔墨巨细 * 1.5
[*]body 行高 1.5 如许写法最大的上风就是内里子元素可以根据自己笔墨巨细自动调整行高
1.2.3 优先级
当同一个元素指定多个选择器，就会有优先级的产生。
选择器雷同，则实行层叠性，选择器差别，则根据选择器权重实行
https://img-blog.csdnimg.cn/24bb780f1117472ea0311ecac2346f63.png
[*]权重是有4组数字组成,但是不会有进位。
[*]可以明白为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…
[*]等级判断从左向右，假如某一位数值雷同，则判断下一位数值。
[*]可以简单记忆法: 通配符和继续权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为
1000, !important 无穷大.
[*]继续的权重是0， 假如该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。
权重叠加：假如是复合选择器，则会有权重叠加，需要盘算权重。
[*]div ul li ------> 0,0,0,3
[*].nav ul li ------> 0,0,1,2
[*]a:hover -----—> 0,0,1,1
[*].nav a ------> 0,0,1,1
2 CSS 选择器
选择器分为底子选择器和复合选择器两个大类
2.1 底子选择器
底子选择器是由单个选择器组成的，包括：标签选择器、类选择器、id 选择器和通配符选择器
2.1.1 标签选择器
标签选择器（元素选择器）是指用 HTML 标署名称作为选择器，按标署名称分类，为页面中某一类标签指定
同一的 CSS 样式。
标签名{
属性1: 属性值1;
属性2: 属性值2;
...
}
标签选择器可以把某一类标签全部选择出来，比如全部的 <div> 标签和全部的 <span> 标签。
优点：能快速为页面中同类型的标签同一设置样式。
缺点：不能设计差别化样式，只能选择全部的当前标签。
2.1.2 类选择器
想要差别化选择差别的标签，单独选一个或者某几个标签，可以使用类选择器，类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。
.类名 {
属性1: 属性值1;
...
}
在标签class 属性中可以写多个类名，多个类名中央必须用空格分开。
2.1.3 id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。
#id名 {
属性1: 属性值1;
...
}
注意：id 属性只能在每个 HTML 文档中出现一次。
2.1.4 通配符选择器
在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中全部元素（标签）。
* {
属性1: 属性值1;
...
}
2.1.5 底子选择器小结
https://img-blog.csdnimg.cn/9b72af3343fa4372b52797585574df02.png
2.2 复合选择器
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
2.2.1 后代选择器
后代选择器又称为包含选择器，可以选择父元素内里子元素。其写法就是把外层标签写在前面，内层标签写在
后面，中央用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
元素1 元素2 { 样式声明 }
[*]元素1 和 元素2 中央用空格隔开
[*]元素1 是父级，元素2 是子级，终极选择的是元素2
[*]元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
[*]元素1 和 元素2 可以是任意底子选择器
2.2.2 子选择器
子元素选择器（子选择器）只能选择作为某元素的近来一级子元素。简单明白就是选亲儿子元素。
元素1 > 元素2 { 样式声明 }
[*]元素1 和 元素2 中央用 大于号 隔开
[*]元素1 是父级，元素2 是子级，终极选择的是元素2
[*]元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 也可以叫他亲儿子选择器
2.2.3 并集选择器
并集选择器是各选择器通过英文逗号（,）连接而成，任何情势的选择器都可以作为并集选择器的一部分。
元素1,元素2 { 样式声明 }
2.2.4 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。
2.2.4.1 链接伪类选择器
[*]为了确保收效，请按照 LVHA 的循次序声明 :link－:visited－:hover－:active。
[*]由于 a 链接在浏览器中具有默认样式，所以我们现实工作中都需要给链接单独指定样式。
/* a 是标签选择器 所有的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
2.2.4.2 :focus 伪类选择器
:focus 伪类选择器用于选取获得核心的表单元素。
核心就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也重要针对于表单元素来说。
input:focus {
background-color:yellow;
}
2.2.5 复合选择器小结
https://img-blog.csdnimg.cn/8bc676dd91444d46b7dd639ee8c7f9f7.png
3 CSS 字体属性
CSS Fonts (字体)属性用于定义字体系列、巨细、粗细、和笔墨样式（如斜体）。
3.1 字体系列
CSS 使用 font-family 属性定义文本的字体系列。
p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
最常见的几个字体：body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }
3.2 字体巨细
CSS 使用 font-size 属性定义字体巨细。
p {
font-size: 20px;
}
差别浏览器可能默认显示的字号巨细差别等，谷歌浏览器默认的笔墨巨细为16px。
3.3 字体粗细
CSS 使用 font-weight 属性设置文本字体的粗细。
p {
font-weight: bold;
}
https://img-blog.csdnimg.cn/9309058c2cd047fcb57e712808085e5a.png
3.4 笔墨样式
CSS 使用 font-style 属性设置文本的风格。
p {
font-style: normal;
}
https://img-blog.csdnimg.cn/16060d4003c34b94b305a643c0449d01.png
3.5 字体复合属性
body {
font: font-style font-weight font-size/line-height font-family;
}
使用 font 属性时，必须按上面语法格式中的次序书写，不能更换次序，而且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用
3.6 字体属性小结
https://img-blog.csdnimg.cn/dacf0e44b94243a49319f5c7e34e1966.png
4 文本属性
CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
4.1 文本颜色
color 属性用于定义文本的颜色。
div {
color: red;
}
https://img-blog.csdnimg.cn/7a564f15b90445e3942e9969d042452b.png
4.2 对齐文本
text-align 属性用于设置元素内文本内容的水平对齐方式。
div {
text-align: center;
}
https://img-blog.csdnimg.cn/83a5e85fbb9a4b63892d17dc589e744a.png
4.3 装饰文本
text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
div {
text-decoration：underline；
}
https://img-blog.csdnimg.cn/12246e1e4b694dd382518ec45a326006.png
4.4 文本缩进
text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
div {
text-indent: 10px;
}
p {
text-indent: 2em;
}
em 是一个相对单元，就是当前元素（font-size) 1 个笔墨的巨细, 假如当前元素没有设置巨细，则会按照父元
素的 1 个笔墨巨细。
4.5 行间距
line-height 属性用于设置行间的距离（行高）。可以控制笔墨行与行之间的距离。
p {
line-height: 26px;
}
4.6 文本属性小结
https://img-blog.csdnimg.cn/0e9eea607b5f4394a6a7417a6dd3a228.png
5 CSS 引入方式
按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：
[*]行内样式表（行内式）
[*]内部样式表（嵌入式）
[*]外部样式表（链接式）
引入外部样式表：
<link rel="stylesheet" href="css文件路径">
https://img-blog.csdnimg.cn/34a1236331b944c78baac5159229ecd4.png
6 CSS 的元素显示模式
可以更好的布局网页，元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。
HTML 元素一般分为块元素和行内元素两种类型。
6.1 块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，此中 <div> 标签是最典型的块元素。
块级元素的特点：
① 独占一行。
② 高度，宽度、外边距以及内边距都可以控制。
③ 宽度默认是容器（父级宽度）的100%。
④ 是一个容器及盒子，内里可以放行内或者块级元素。
注意：
[*]笔墨类的元素内不能使用块级元素
[*]<p> 标签重要用于存放笔墨，因此 <p> 内里不能放块级元素，特别是不能放<div>
[*]同理， <h1>~<h6>等都是笔墨类块级标签，内里也不能放其他块级元素
6.2 行内元素
常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，此中
<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：
① 相邻行内元素在一行上，一行可以显示多个。
② 高、宽直接设置是无效的。
③ 默认宽度就是它自己内容的宽度。
④ 行内元素只能容纳文本或其他行内元素。
注意：
[*]链接内里不能再放链接
[*]特殊情况链接 <a> 内里可以放块级元素，但是给 <a> 转换一下块级模式最安全
6.3 行内块元素
在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。
有些资料称它们为行内块元素。
行内块元素的特点：
① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
② 默认宽度就是它自己内容的宽度（行内元素特点）。
③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
6.4 元素显示模式小结
https://img-blog.csdnimg.cn/281cb0a0ec8f407792e48bb959d951a9.png
6.5 元素显示模式转换
特殊情况下，需要元素模式的转换，简单明白: 一个模式的元素需要另外一种模式的特性
比如想要增加链接 <a> 的触发范围。
[*]转换为块元素：display:block;
[*]转换为行内元素：display:inline;
[*]转换为行内块：display: inline-block;
7 CSS 的背景
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
7.1 背景颜色
background-color 属性定义了元素的背景颜色。
background-color:颜色值;
一般情况下元素背景颜色默认值是 transparent（透明），也可以手动指定背景颜色为透明色。
background-color:transparent;
7.2 背景图片
background-image 属性描述了元素的背景图像。现实开发常见于 logo 或者一些装饰性的小图片或者是超
大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)
background-image : none | url (url)
https://img-blog.csdnimg.cn/e3cfc5c6b530492c9a251b42558f8e53.png
注意：背景图片后面的地址，千万不要忘记加url， 同时内里的路径不要加引号。
7.3 背景平铺
假如需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。
background-repeat: repeat | no-repeat | repeat-x | repeat-y
https://img-blog.csdnimg.cn/cb8fc2644b2b4d97a62b5067864bdfc8.png
7.4 背景图片位置
利用 background-position 属性可以改变图片在背景中的位置。
background-position: x y;
https://img-blog.csdnimg.cn/8ab7bf91cc944dce9528ee290d4a7080.png
[*]参数是方位名词
假如指定的两个值都是方位名词，则两个值前后次序无关，比如 left top 和 top left 效果同等
假如只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
[*]参数是正确单元
假如参数值是正确坐标，那么第一个肯定是 x 坐标，第二个肯定是 y 坐标
假如只指定一个数值，那该数值肯定是 x 坐标，另一个默认垂直居中
[*]参数是混合单元
假如指定的两个值是正确单元和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标
7.5 背景图像固定（背景附着）
background-attachment 属性设置背景图像是否固定或者随着页面的别的部分滚动。
background-attachment 后期可以制作视差滚动的效果。
background-attachment : scroll | fixed
https://img-blog.csdnimg.cn/45b23787164842e49a8d2cf1b2d616fc.png
7.6 背景复合写法
为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中。从而节约代码量.
当使用简写属性时，没有特定的书写次序,一般习惯约定次序为：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: transparent url(image.jpg) repeat-y fixed top ;
7.7 背景致半透明
CSS3 提供了背景颜色半透明的效果。
background: rgba(0, 0, 0, 0.3);
[*]最后一个参数是 alpha 透明度，取值范围在 0~1之间
[*]我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
[*]注意：背景半透明是指盒子背景半透明，盒子内里的内容不受影响
[*]CSS3 新增属性，是 IE9+ 版本浏览器才支持的
7.8 背景小结
https://img-blog.csdnimg.cn/f9338ac1e34e48159abf791d5cead6fe.png
8 盒子模子
网页布局过程：
[*]先准备好相关的网页元素，网页元素根本都是盒子 Box 。
[*]利用 CSS 设置好盒子样式，然后摆放到相应位置。
[*]往盒子内里装内容。
网页布局的核心本质： 就是利用 CSS 摆盒子。
所谓 盒子模子：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模子本质上是一个盒子，封装周围的 HTML 元素，它包括：边框(border)、外边距(margin)、内边距(padding) 和 现实内容(content)
https://img-blog.csdnimg.cn/51f2e23b056c4d34893991c256ad83ac.png
8.1 边框（border）
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细)、边框样式、边框颜色
border : border-width || border-style || border-color
https://img-blog.csdnimg.cn/1a9a35bd5f4c4d8abd60d935effda9f1.png
边框样式 border-style 可以设置如下值：
[*]none：没有边框即忽略全部边框的宽度（默认值）
[*]solid：边框为单实线(最为常用的)
[*]dashed：边框为虚线
[*]dotted：边框为点线
边框简写：
border: 1px solid red; 没有顺序
边框分开写法：
border-top: 1px solid red; /* 只设定上边框， 其余同理 */
8.1.1 表格的细线边框
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
border-collapse: collapse;
[*]collapse: 单词是合并的意思
[*]border-collapse: collapse;
表示相邻边框合并在一起
边框会额外增加盒子的现实巨细。因此有两种方案办理:
[*]测量盒子巨细的时候,不量边框.
[*]假如测量的时候包含了边框,则需要 width/height 减去边框宽度
8.1.2 圆角边框
在 CSS3 中，新增了圆角边框样式，border-radius 属性用于设置元素的外边框圆角。
border-radius:length;
[*]参数值可以为数值或百分比的情势
[*]假如是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
[*]该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
[*]分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和
border-bottom-left-radius
[*]兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用.
8.2 内边距（padding）
padding 属性用于设置内边距，即边框与内容之间的距离。
https://img-blog.csdnimg.cn/bce289fb9d1d4ff18e77ff9c79e32ea1.png
https://img-blog.csdnimg.cn/0869d7e828684472a512b5e5c348ba68.png
给盒子指定 padding 值之后，发生了 2 件事变：
[*]内容和边框有了距离，添加了内边距。
[*]padding影响了盒子现实巨细。
也就是说，假如盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
办理方案：
假如包管盒子跟效果图巨细保持同等，则让 width/height 减去多出来的内边距巨细即可。
8.3 外边距（margin）
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
https://img-blog.csdnimg.cn/830660adc3f94428a43e288359fd762c.png
margin 简写方式代表的意义跟 padding 完全同等。
外边距可以让块级盒子水平居中，但是必须满足两个条件：
① 盒子必须指定了宽度（width）。
② 盒子左右的外边距都设置为 auto 。
.header{ width:960px; margin:0 auto;}
常见的写法，以下三种都可以：
[*]margin-left: auto; margin-right: auto;
[*]margin: auto;
[*]margin: 0 auto;
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
重要有两种情况:
[*]相邻块元素垂直外边距的合并
[*]嵌套块元素垂直外边距的塌陷
8.3.1 相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，假如上面的元素有下外边距 margin-bottom，下面的元素有
上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的
较大者这种现象被称为相邻块元素垂直外边距的合并。
办理方案：
只管只给一个盒子添加 margin 值。
https://img-blog.csdnimg.cn/e84179cd71c047979b772262b0059361.png
8.3.2 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
办理方案：
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden。
④ 还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷题目
https://img-blog.csdnimg.cn/abdcff3b27aa4c0c929e19a182c2b122.png
8.4 清除内外边距
网页元素很多都带有默认的内外边距，而且差别浏览器默认的也差别等。因此我们在布局前，首先要清除下网
页元素的内外边距。
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
注意：行内元素为了照顾兼容性，只管只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内
块元素就可以了
9 阴影
9.1 盒子阴影
CSS3 中新增了盒子阴影，可以使用 box-shadow 属性为盒子添加阴影。
box-shadow: h-shadow v-shadow blur spread color inset;
https://img-blog.csdnimg.cn/0a81d2c538f94cee9f8310cac26c50f1.png
注意：
[*]默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
[*]盒子阴影不占用空间，不会影响其他盒子排列。
9.2 笔墨阴影
在 CSS3 中，可以使用 text-shadow 属性将阴影应用于文本
text-shadow: h-shadow v-shadow blur color;
https://img-blog.csdnimg.cn/f0094239979a484e99917b13a0f6a2aa.png
10 布局方式
CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列次序)：平凡流（标准流）、浮动、定位。
10.1 标准流（平凡流/文档流）
所谓的标准流: 就是标签按照规定好默认方式排列，标准流是最根本的布局方式。
[*]块级元素会独占一行，从上向下次序排列。
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
[*]行内元素会按照次序，从左到右次序排列，碰到父元素边沿则自动换行。
常用元素：span、a、i、em 等
10.2 浮动
float 属性用于创建浮动框，将其移动到一边，直到左边沿或右边沿触及包含块或另一个浮动框的边沿。
选择器 { float: 属性值; }
https://img-blog.csdnimg.cn/2d2df92331d24b4ab20a5984a06e4438.png
加了浮动之后的元素,会具有很多特性：
[*]浮动元素会离开标准流(脱标)
[*]浮动的元素会一行内显示而且元素顶部对齐
[*]浮动的元素会具有行内块元素的特性.
https://img-blog.csdnimg.cn/3a7c851bb04a48c2b5b0e70815e175b9.png
https://img-blog.csdnimg.cn/a4f1003ff0c94a47bea62488c5fe4a1d.png
注意： 浮动的元素是相互贴靠在一起的（不会有缝隙），假如父级宽度装不下这些浮动的盒子， 多出的盒子
会另起一行对齐。
浮动元素会具有行内块元素特性
[*]任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
[*]假如块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的巨细根据内容来决定。
浮动元素经常和标准流父级搭配使用，先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置。
https://img-blog.csdnimg.cn/052834a19b0a4538baee391eeac3d6fa.png
浮动布局注意点
[*]浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
[*]一个元素浮动了，理论上别的的兄弟元素也要浮动。
一个盒子内里有多个子盒子，假如此中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起题目。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
10.2.1 清除浮动
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会
影响下面的标准流盒子。
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
清除浮动本质：
[*]清除浮动的本质是清除浮动元素造成的影响
[*]假如父盒子自己有高度，则不需要清除浮动
[*]清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
选择器{clear:属性值;}
https://img-blog.csdnimg.cn/88778cb269a743c596c2ec3721010915.png
清除浮动的策略是: 闭合浮动
清除浮动方法：
[*]额外标签法也称为隔墙法，是 W3C 保举的做法。
[*]父级添加 overflow 属性
[*]父级添加after伪元素
[*]父级添加双伪元素
10.2.1.1 额外标签法
额外标签法也称为隔墙法，是 W3C 保举的做法。
额外标签法会在浮动元素末尾添加一个空的标签。例如 <div style=”clear:both”></div>，或者其他标签
（如<br />等）
缺点： 添加很多无意义的标签，结构化较差
注意： 要求这个新的空标签必须是块级元素。
10.2.1.2 父级添加 overflow
可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。
缺点：无法显示溢出的部分
10.2.1.3 :after 伪元素法
:after 方式是额外标签法的升级版。也是给父元素添加
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
缺点：照顾低版本浏览器
10.2.1.4 双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
缺点：照顾低版本浏览器
10.2.2 清除浮动小结
https://img-blog.csdnimg.cn/859e811ad6a847199698939060658321.png
10.2 定位
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，而且可以压住其他盒子。
定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。
10.2.1 定位组成
定位 = 定位模式 + 边偏移 。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的终极位置。
10.2.1.1 定位模式
定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：
https://img-blog.csdnimg.cn/2388ec32f41a42deba14c4994004d48b.png
10.2.1.2 边偏移
边偏移就是定位的盒子移动到终极位置。有 top、bottom、left 和 right 4 个属性。
https://img-blog.csdnimg.cn/90c0f01fc2ef48e880cc7088b0322618.png
10.2.2 静态定位 static
静态定位是元素的默认定位方式，无定位的意思。
选择器 { position: static; }
静态定位按照标准流特性摆放位置，它没有边偏移，静态定位在布局时很少用到
10.2.3 相对定位 relative
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。
选择器 { position: relative; }
相对定位的特点：
[*]它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
[*]原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。
10.2.4 绝对定位 absolute
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
选择器 { position: absolute; }
绝对定位的特点：
[*]假如没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
[*]假如祖先元素有定位（相对、绝对、固定定位），则以近来一级的有定位祖先元素为参考点移动位置。
[*]绝对定位不再占有原先的位置。（脱标）
所以绝对定位是离开标准流的
子级是绝对定位的话，父级要用相对定位。
① 子级绝对定位，不会占有位置，可以放到父盒子内里的任何一个地方，不会影响其他的兄弟盒子。
② 父盒子需要加定位限制子盒子在父盒子内显示。
③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
10.2.5 固定定位 fixed
固定定位是元素固定于浏览器可视区的位置。重要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。
选择器 { position: fixed; }
固定定位的特点：
[*]以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系，不随滚动条滚动。
[*]固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
10.2.5 粘性定位 sticky
粘性定位可以被认为是相对定位和固定定位的混合。
选择器 { position: sticky; top: 10px; }
粘性定位的特点：
[*]以浏览器的可视窗口为参照点移动元素（固定定位特点）
[*]粘性定位占有原先的位置（相对定位特点）
[*]必须添加 top 、left、right、bottom 此中一个才有用
跟页面滚动搭配使用。 兼容性较差，IE 不支持。
10.2.6 定位小结
定位模式是否脱标移动位置static 静态定位否不能使用边偏移relative 相对定位否 (占有位置)相对于自身位置移动absolute绝对定位是（不占有位置）带有定位的父级fixed 固定定位是（不占有位置）浏览器可视区sticky 粘性定位否 (占有位置)浏览器可视区 10.2.7 定位叠放次序 z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)
选择器 { z-index: 1; }
[*]数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
[*]假如属性值雷同，则按照书写次序，厥后居上
[*]数字后面不能加单元
[*]只有定位的盒子才有 z-index 属性
10.2.8 定位的拓展
10.2.8.1 绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下盘算方法实现水平和垂直居中。
① left: 50%;：让盒子的左侧移动到父级元素的水平中央位置。
② margin-left: -100px;：让盒子向左移动自身宽度的一半。
10.2.8.2 定位特殊特性
绝对定位和固定定位也和浮动雷同。
[*]行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
[*]块级元素添加绝对或者固定定位，假如不给宽度或者高度，默认巨细是内容的巨细。
10.2.8.3 脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的题目。
10.2.8.4 绝对定位（固定定位）会完全压住盒子
浮动元素差别，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子内里的笔墨（图片）
但是绝对定位（固定定位） 会压住下面标准流全部的内容。
浮动之所以不会压住笔墨，由于浮动产生的目标最初是为了做笔墨环绕效果的。 笔墨会围绕浮动元素
10.3 网页布局小结
一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
[*]标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
[*]浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
[*]定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。假如元素自由在某个盒子内移动就
用定位布局。
11 CSS 属性书写次序
发起遵循以下次序：
[*]布局定位属性：display / position / float / clear / visibility / overflow（发起 display 第一个写，毕竟关系到模式）
[*]自身属性：width / height / margin / padding / border / background
[*]文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
[*]其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
12 元素的显示与隐藏
雷同网站广告，当我们点击关闭就不见了，但是我们重新革新页面，会重新出现！
本质：让一个元素在页面中隐藏或者显示出来。
[*]display 显示隐藏 但是不保留位置
[*]visibility 显示隐藏 但是保留原来的位置
[*]overflow 溢出显示隐藏 但是只是对于溢出的部分处置惩罚
12.1 display 属性
display 属性用于设置一个元素应如何显示。
[*]display: none ；隐藏对象
[*]display：block ；除了转换为块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置。
12.2 visibility 可见性
visibility 属性用于指定一个元素应可见还是隐藏。
[*]visibility：visible ; 元素可视
[*]visibility：hidden; 元素隐藏
visibility 隐藏元素后，继续占有原来的位置。
假如隐藏元素想要原来位置， 就用 visibility：hidden
假如隐藏元素不想要原来位置， 就用 display：none (用处更多 重点）
12.3 overflow 溢出
overflow 属性指定了假如内容溢出一个元素的框（高出其指定高度及宽度） 时，会发生什么。
https://img-blog.csdnimg.cn/5fefea6b468a446cbd42353af44b7580.png
13 CSS高级本领
13.1 精灵图
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频仍地接收和发送
哀求图片，造成服务器哀求压力过大，这将大大低落页面的加载速率。
因此，为了有用地镌汰服务器接收和发送哀求的次数，进步页面的加载速率，出现了 CSS 精灵技术（也称
CSS Sprites、CSS 雪碧）。
核心原理：将网页中的一些小背景图像整合到一张大图中 ，如许服务器只需要一次哀求就可以了。
使用精灵图核心：
[*]精灵技术重要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
[*]这个大图片也称为 sprites 精灵图 或者 雪碧图
[*]移动背景图片位置， 此时可以使用 background-position 。
[*]移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所差别
[*]由于一般情况下都是往上往左移动，所以数值是负值。
[*]使用精灵图的时候需要正确测量，每个小背景图片的巨细和位置。
13.2 字体图标
字体图标使用场景： 重要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点很显着。
[*]图片文件还是比较大的。
[*]图片自己放大和缩小会失真。
[*]一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的办理了以上题目，就是字体图标 iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
13.2.1 字体图标的优点：
[*]轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，镌汰了服务器哀求
[*]灵活性：本质其实是笔墨，可以很随意的改变颜色、产生阴影、透明效果、旋转等
[*]兼容性：险些支持全部的浏览器，请放心使用
注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
13.2.2 总结
[*]假如遇到一些结构和样式比较简单的小图标，就用字体图标。
[*]假如遇到一些结构和样式复杂一点的小图片，就用精灵图。
13.2.3 字体图标的下载网站
保举下载网站：
[*]icomoon 字库 http://icomoon.io 保举指数 ★★★★★
IcoMoon 建立于 2011 年，推出了第一个自定义图标字体天生器，它答应用户选择所需要的图标，使它们成
一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。
[*]阿里 iconfont 字库 http://www.iconfont.cn/ 保举指数 ★★★★★
这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI
制作图标上传天生。 重点是，免费！
13.2.4 字体图标的引入
[*]把下载包内里的 fonts 文件夹放入页面根目次下
https://img-blog.csdnimg.cn/606335ae9a9f44e7bed3d481067c6664.png
[*]在 CSS 样式中全局声明字体： 简单明白把这些字体文件通过css引入到我们页面中。
肯定注意字体文件路径的题目。
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[*]html 标签内添加小图标。
https://img-blog.csdnimg.cn/510d12c8a25740e6a806e11f110ae935.png
[*]给标签定义字体。
span {
font-family: "icomoon";
}
注：务必包管 这个字体和上面@font-face内里的字体保持同等
https://img-blog.csdnimg.cn/21da76c88b004700972ca621ade7e949.png
13.2.4.1 字体文件格式
差别浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是由于包含了主流浏览器支持的字体文件。
[*]TureType(.ttf)格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、
Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
[*]Web Open Font Format(.woff)格式woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、
Safari3.6+、Opera11.1+；
[*]Embedded Open Type(.eot)格式.eot字体是IE专用字体，支持这种字体的浏览器有IE4+；
[*]SVG(.svg)格式.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、
Opera10.0+、iOS Mobile Safari3.2+；
13.3 CSS 三角
网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。
https://img-blog.csdnimg.cn/041efcc549e444aab2eed8f2716c86a2.png
div {
width: 0;
height: 0;
border-top: 10px solid pink;
border-right: 10px solid red;
border-bottom: 10px solid blue;
border-left: 10px solid green;
}
13.4 CSS 用户界面样式
所谓的界面样式，就是更改一些用户操作样式，以便进步更好的用户体验。
[*]更改用户的鼠标样式
[*]表单轮廓
[*]防止表单域拖拽
13.4.1 鼠标样式 cursor
li {cursor: pointer; }
设置或检索在对象上移动的鼠标指针采用何种体系预定义的光标形状。
https://img-blog.csdnimg.cn/e1de145a4b884a0697f290b96151f967.png
13.4.2 轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
input {outline: none; }
13.4.3 防止拖拽文本域 resize
现实开发中，我们文本域右下角是不可以拖拽的。
textarea{ resize: none;}
13.5 vertical-align 属性应用
CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和笔墨垂直对齐。
官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有用。
vertical-align : baseline | top | middle | bottom
https://img-blog.csdnimg.cn/daa51bcd8a15444d824ae3b7c1ec2a40.png
https://img-blog.csdnimg.cn/f040676d34d1402d9d4f5d1e869b9acf.png
13.5.1 图片、表单和笔墨对齐
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让笔墨和图片垂直
居中对齐了。
13.5.2 办理图片底部默认空白缝隙题目
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和笔墨的基线对齐。
重要办理方法有两种：
[*]给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
[*]把图片转换为块级元素 display: block;
13.6 溢出的笔墨省略号显示
13.6.1 单行文本溢出显示省略号
必须满足三个条件
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
13.6.2 多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性题目， 得当于webKit浏览器或移动端（移动端大部分是webkit内
核）
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]