字体属性,文本属性,背景属性
CSS的单位
html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。 CSS中的单位是必须要写的，因为它没有默认单位。
CSS中，有很多非布局样式（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。
font 字体属性
常见的字体属性有以下几种：
| 字体属性 | 表示 | 注意 |
|---|---|---|
| font-size | 字号 | 单位是 px |
| font-family | 字体类型 | 按照团队约定来写 |
| font-weight | 字体粗细 | 400=normal，700=bold |
| font-style | 字体样式 | italic表示斜体，normal表示不倾斜 |
文本属性
| 属性 | 表示 | 注意 |
|---|---|---|
| color | 文本颜色 | 通常十六进制缩写 |
| text-align | 文本对齐 | |
| text-indent | 文本缩进 | 记住 text-indent: 2em; |
| text-decoration | 文本装饰 | 记住下划线和去除下划线 |
| line-height | 行高 | |
| text-shadow | 设置文本的阴影 | text-shadow: 20px 27px 22px pink; 参数解释：水平位移 垂直位移 模糊程度 阴影颜色。 |
行高
CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。
背景属性
CSS 背景属性可以给元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
背景颜色
background-color 定义了元素的背景颜色。
background-color: 颜色值;
一般而言，颜色默认值是 transparent（透明），我们也可以指定背景颜色为透明色或其他色。
背景图片
background-image 属性描述了元素的背景图像，实际开发用于 logo 或者一些装饰性开发的小图片或者是超大的背景图片，优点是便于控制位置。（也用于精灵图）
background-image: none|url(图片url);
背景平铺
若需要在 HTML 页面上对背景图进行平铺，可以使用 background-repeat 属性。
background-repeat: repeat(默认) | no-repeat | repeat-x | repeat-y;
页面元素·既可以添加背景图片，也可以添加背景颜色，图片会覆盖颜色。
背景图片位置
background-position 可以改变图片在背景中的位置。
background-position: x y;
参数 x 和 y 指 x 左边和 y 坐标，可以使用方位名词或者精确定位。
| 参数值 | 说明 |
|---|---|
| length | 百分数 / 由浮点数字和单位字符组成的长度值 |
| position | top / center / bottom / left / center / right 方位名词 |
背景图像固定
background-attachment 属性设置背景图像是否随着页面其余部分滚动。background-attachment 后期可以制作视差滚动效果。
background-attachment: scroll | fixed;
| 参数 | 作用 |
|---|---|
| scroll | 背景图像随着对象内容滚动 |
| fixed | 背景图像固定 |
背景属性复合写法
简化代码，将属性写在同一个属性 background 下。
一般按照约定顺序编写。
background 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background: transparent url(image.jpg) repeat-y fixed top;
背景颜色半透明
CSS3 提供 background: rgba(r,g,b,a) 属性设置图片透明度。
background: rgba(0, 0, 0, 0.3);
- CSS3 新增属性，IE9+支持
prev: /CSS/01-CSS属性：字体属性，文本属性和背景属性.md next: /CSS/03-CSS三大特性.md
CSS简介
CSS是层叠样式表（CascadingStyleSheets）的简称。
CSS也是一种标记语言。
CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。·
HTML呈现结构，CSS决定样式，结构与样式分离。
CSS 引用方式
按照 CSS 书写的位置不同，CSS 样式表可以分为三大类：
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式）
<div style="color: red; font-size: 12px">行内样式表</div>
3. 外部样式表（链接式）
<link rel="stylesheet" href="css文件路径" />
CSS基础选择器
基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器
标签选择器
直接用HTML标签名作为选择器，按标签名称分类，为页面某一类标签指定统一的CSS样式。
语法
标签名 {
属性1： 属性值1;
属性2： 属性值2;
属性3： 属性值3;
}
优点
标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式。
缺点
不能设置差异化样式，只能选择全部当前标签。
类选择器
差异化选择不同标签，单独选一个或者某个标签。
语法
使用class属性来调用class类，样式点定义，结构类调用，一个或多个，开发最常用。
类选择器用.号显示。
注意
- 类选择器用
.标识，紧跟类名。 - 小写，使用
-连接单词。 - 不要用纯数字、中文。
- 命名有意义。
类选择器-多类名
类名间用空格分开
<p class="class-name1 class-name2"></p>
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器，用#来定义。
#id名 {
属性1: 属性值1;
...
}
样式#定义，结构id调用，别人切勿使用。
id选择器与类选择器的区别
- 类选择器可以被多个元素调用。
- id选择器只能允许一个标签调用。
- 类选择器使用的较多，id选择器用于唯一特性的标签。
通配符选择器
语法
* {
属性1: 属性值1;
...
}
- 用
*定义通配符选择器，选取页面中所有标签。 - 不需要调用，自动给所有标签。
- 特殊情况使用
* {
margin: 0;
padding: 0;
}
CSS复合选择器
由基础选择器组合而成,复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择最近一级元素 | 只能选亲儿子 | 较少 | 符号是大于 .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号，.nav, a |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a{}和 a:hover{} |
| :focus 选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | 记住input:focus用法 |
后代选择器
后代选择器又称为包含选择器，可以选择父元素里的子元素。写法是将外层标签写在前面，内层标签写在后面，中间空格分开。
语法
元素1 元素2 { 样式声明; }
- 上述语法表示选择元素 1 里面所有的元素 2
- 可以连续嵌套，比如可以是孙子等
- 元素 1、2 可以是任何基础标签
子选择器
子元素选择器（子选择器）只能选择作为元素作为元素的最近一级子元素。简单理解就是选亲儿子。
语法
元素1 > 元素2 { 样式声明; }
- 元素之间用大于号
>隔开 - 1 为父级。二为子级，最终选择的是元素 2
- 元素 2 必须是亲儿子。
并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
并集选择器是各选择器通过英文逗号 , 连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法
元素1, 元素2 { 样式声明; }
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。
伪类选择器书写最大特点是用冒号 : 表示。
伪类选择器种类多，比如链接伪类选择器、结构选择器等。
链接伪类选择器
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接（鼠标按下未弹起的链接）*/
注意事项
- 确保样式生效，要按照 LVHA 的顺序声明：link,visited,hover, active。
- a 链接在浏览器中有默认样式，所以实际开发都需要给链接单独指定样式。
开发中实际写法
a {
color: gray;
text-decoration: none;
}
a:hover {
color: #369;
text-decoration: underline;
}
focus 伪类选择器
:focus 伪类选择器用于获取焦点的表单元素。
焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对表单元素来说。
input:focus {
background-color: yellow;
}
其他标准伪类选择器
1.first-child :first-child 是 CSS 伪类，表示父元素的第一个子元素。
2. last-child:last-child CSS 伪类 代表父元素的最后一个子元素。
3. nth-child(n)(odd) 匹配奇数 (even) 匹配偶数:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类 :nth-child括号中表达式 (an+b) 匹配到的元素集合 (n=0，1，2，3...)
4. :not(p):not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。
CSS 伪元素选择器
::after (:after)
::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
.exciting-text::after {
content: "<- 让人兴兴兴奋!";
color: green;
}
我们几乎可以用想要的任何方法给 content 属性里的文字和图片的加上样式.
6. ::before (:before)
CSS 中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。
使用 ::before 伪元素的一个简单示例就是用于加入引号。
<q>一些引用</q>, 他说, <q>比没有好。</q>.
q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}
CSS3 选择器
属性选择器
属性选择器的标志性符号是 []。
格式：
E[title] 选中页面的E元素，并且E存在 title 属性即可
<style>
img[alt] {
margin: 10px;
}
</style>
<img src="图片url" alt="" />
<img src="图片url" />
此例，将会命中第一张图片，因为匹配到了alt属性
E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc
<style>
input[type="text"] {
border: 2px solid #000;
}
</style>
<input type="text" />
<input type="submit" />
E[attr~=val] 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素
<style>
div[class~="a"] {
border: 2px solid #000;
}
</style>
<div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>
此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值中有一个值为a
E[title^="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头
<style>
div[class^="a"] {
border: 2px solid #000;
}
</style>
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>
此例，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头
E[title$="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾
<style>
div[class$="c"] {
border: 2px solid #000;
}
</style>
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>
此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值以c结尾
E[title*="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc
<style>
div[class*="b"] {
border: 2px solid #000;
}
</style>
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>
此例，将会命中所有div，因为匹配到了class属性，且属性值中都包含了b
E[attr |=val] 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的
<style>
div[class|="a"] {
border: 2px solid #000;
}
</style>
<div class="a">0</div>
<div class="a-test">1</div>
<div class="b-test">2</div>
<div class="c-test">3</div>
在这个例子中，前2个div将会被命中：
第1个div，拥有class属性，并且值为a，所以被命中；
第2个div，拥有class属性，值是a开头并紧跟着连接符“-”，所以被命中；
CSS 三大特性
层叠性、继承性、优先级。
层叠性
相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：
- 样式冲突：遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠
继承性
CSS 中子标签会继承父标签的某些样式，如文本颜色和字号。
- 恰当使用继承可以简化代码，降低 CSS 的复杂性
- 子元素可以继承父元素的样式（text-, font-, line-这些元素开头的可以继承，以及 color 属性）
行高的继承性
body {
font: 12px/1.5 Microsoft Yahei;
}
- 行高可以跟单位也可以不跟
- 如果子元素没有设置行高，则会继承父元素的行高为 1.5
- 此时子元素的行高是：当前子元素的文字大小*1.5
- body 行高 1.5 这样写法最大优势就是里面的子元素可以根据文字大小自动调整行高
优先级
当一个元素指定多个选择器时，就会有有优先级的产生。
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
选择器权重如下所示。
| 选择器 | 选择器权重 |
|---|---|
继承或者* | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器，伪类选择器 | 0,0,1,0 |
| ID 选择器 | 0,1,0,0 |
行内样式 style="" | 1,0,0,0 |
!important | ∞ 无穷大 |
p {
color: pink !important;
}
注意
- 继承的权重为 0，即使加了 important 权重也还是 0。
- a 链接，浏览器默认指定了一个样式，蓝色，下划线，不会继承父级样式
复合选择器权重的叠加
权重可以叠加，需要计算权重，但是没有进位。
盒子模型
盒子模型（Box Model）组成
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，包括：边框、外边距、内边距和实际内容。
标准盒模型和IE盒模型 box-sizing
我们目前所学习的知识中，以标准盒子模型为准。 标准盒子模型： content-box IE盒子模型： border-box 上图显示：
1.边框（border）
border 可以设置元素边框。边框有三个组成：border-width、border-style、border-color 语法
/*属性可连写*/
border: border-width || border-style || border-color;
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位 px |
| border-style | 边框样式 |
| border-color | 边框颜色 |
边框圆角：border-radius 属性
单个属性的写法：
border-top-left-radius: 60px 120px; //参数解释：水平半径 垂直半径
border-top-right-radius: 60px 120px;
border-bottom-left-radius: 60px 120px;
border-bottom-right-radius: 60px 120px;
复合写法：
border-radius: 60px/120px; //参数：水平半径/垂直半径
border-radius: 20px 60px 100px 140px; //从左上开始，顺时针赋值。如果当前角没有值，取对角的值
border-radius: 20px 60px;
四个角的半径都相同时
border-radius: 60px;
边框阴影：box-shadow 属性
box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
box-shadow: 15px 21px 48px -2px #666;
边框会影响盒子实际大小
边框会额外增加盒子的实际大小，因此有两种方案解决。
- 测量盒子大小的时候，不测边框。
- 若测量的时候包含了边框，则需要 width/height-边框宽度。
2.内边距 padding
padding 属性设置内边距，即边框与内容之间的距离。
- padding-left: 左内边距
- padding-right: 右内边距
- padding-top: 上内边距
- padding-bottotm: 下内边距
padding 属性简写 padding 的值的个数：
- 1 个值：上下左右
- 2 个值：上下，左右
- 3 个值：上，左右，下
- 4 个值：上，右，下，左，顺时针
padding 会影响盒子实际大小 当给盒子指定了 padding 值以后，发生了两件事情：
- 内容和边框有了距离，增加内边距
- padding 值影响了盒子实际大小
也就是说，当盒子已经有了宽度和高度，再指定内边距，会撑大盒子。 要保证盒子和效果图一样大，则让 width/height-多出来的内边距大小即可。
3.外边距margin
margin 属性用于设置外边距，即控制盒子与盒子之间的距离。
- margin-left: 左外边距
- margin-right: 右外边距
- margin-top: 上外边距
- margin-bottotm: 下外边距
margin 简写方式与 padding 一致。
外边距典型应用
外边距可以让块级盒子 水平居中，但是必须满足两个条件：
- 盒子必须指定宽度（width）
- 盒子左右的外边距都设置为 auto
.header {
width: 960px;
margin: 0 auto;
}
使行内元素或行内块元素水平居中 text-align: center;
外边距合并
相邻元素垂直外边距的合并
当上下相邻块元素相遇时，若上面的元素有下外边距，下面的元素有上外边距，则他们之间的垂直间距不是 margin-bottotm 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻元素垂直外边距的合并。
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系的块元素，只想给子元素添加上边距,结果父元素移动，此时父元素会塌陷较大的外边距值。 解决方案
- 为父元素添加 overflow:hidden
- 为父元素定义上 边框
- 为父元素定义上 内边距
- 转换成行内块元素
- 设置浮动
清除内外边距
网页元素很多都带有默认内外边距，而且不同浏览器默认的也不一致，因此在布局前，要先清除网页元素的内外边距。 语法
* {
margin: 0;
padding: 0;
}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以设置。
圆角边框
CSS3 新增 圆角边框 属性，盒子可以变成圆角。 border-radius 属性用于设置元素的外边框圆角。 语法 border-radius: length; 原理 （椭）圆与边框的交集形成的圆角效果。 参数
- 参数值可以为数值或百分比的形式
- 若是正方形，想要设置一个圆，则将数值修改为高度或者宽度的一般即可，或者直接写为 50%
- 若是矩形，设置为 height 的一半就可以做
- 简写属性，跟四个值，分别代表左上角、右上角、右下角、左下角
- 分开来写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
盒子阴影
CSS3 新增盒子阴影，使用 box-shadow 属性。 语法 bxo-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影的尺寸 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影改为内部阴影（默认是外部阴影） |
注意：
- 默认是外阴影，但是不可以写这个单词（outset）
- 盒子阴影不占空间，不会影响其他盒子排列
文字阴影
CSS3 中，使用 text-shadow 属性设置文本阴影。
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影位置。允许负值。 |
| v-shadow | 必须，垂直阴影。允许负值。 |
| blur | 可选，模糊距离。 |
| color | 可选，阴影颜色。 |
浮动
1. 浮动（float）
1.1 传统网页布局方式
网页布局的本质——用 CSS 来摆放盒子，把盒子放到相应位置。
CSS 提供了三种传统布局方式：
- 普通流
- 浮动
- 定位
1.2 标准流（普通流/文档流）
所谓的标准流，就是标签按照规定好的默认方式排列。
- 块级元素会独占一行，从上到下顺序排列 常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 常用元素：span、a、i、em
标准流是最基本的布局方式。
以上三种方式都是来摆放盒子的，盒子摆到合适位置，布局自然就完成了。
实际开发中，一个页面基本包含三种布局方式。
1.3 为什么需要浮动？
很多布局效果，标准流没办法完成，此时就可以利用浮动完成布局。浮动可以改变元素标签默认排列方式。
浮动最典型应用：让多个块级元素一行显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素找浮动。
网页布局第二准则：先设置盒子大小，再设置盒子位置。
1.4 什么是浮动？
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘。
语法
选择器 { float: 属性值; }
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
1.5 浮动特性（重点）
加了浮动之后的元素，会具有一些特性。
- 浮动元素会脱离标准流
- 浮动元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
重要特性
-
脱离文档流的控制（浮）移动到指定位置（动），脱标 脱离文档流的盒子，会漂浮在文档流的盒子上面，不占位置。
-
如果多个盒子都设置了浮动，则它们会按照属性值一行显示并且顶端对齐排列。 浮动的元素是相互贴在一起的（没有间隙），若父级宽度放不下盒子，多出的盒子会另起一行对齐。
-
浮动元素具有行内块元素特性。 任何元素都可以浮动，设置了后元素都具有行内块元素性质。
- 若块级元素没有设置宽度，则默认和父级一样宽
- 浮动盒子中间无间隙，紧挨着
- 行内块元素同理
1.6 浮动元素经常和标准流父级元素搭配使用
为了约束元素位置，一般采取：
先用标准流父元素上下排列位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
2. 常见网页布局
-
浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
-
一个元素浮动了，理论上其余兄弟元素也要浮动
一个盒子里有多个盒子，其中一个盒子浮动，其他兄弟也应该浮动，防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流，不会引起前面的标准流。
3. 清除浮动
3.1 为什么需要清除浮动
由于父级盒子很多情况下，不方便给高度，当时盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的盒子，对后面元素排版产生影响。
3.2 清除浮动的本质
- 清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身具有高度，则不需要清除浮动
- 清除浮动之后，父级会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。
3.3 清除浮动
语法：
选择器: {
clear: 属性值;
}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素 |
| right | 不允许右侧有浮动元素 |
| both | 同时清除左右两侧浮动 |
清除浮动策略：闭合浮动
方法：
- 额外标签法（隔墙法），是 W3C 推荐的方法
- 父级添加 overflow 属性
- 父级添加 after 伪元素
- 父级添加双伪元素
3.4 清除浮动（1）——额外标签法
也成为隔墙法，是 W3C 推荐的方法。
额外标签法是在最后一个浮动元素末尾添加一个 空块级元素，给其赋以属性 clear:both;。
<style>
clear: both;
</style>
<div class="clear"></div>
- 优点：通俗易懂，书写方便
- 缺点：添加许多无意义的标签，结构化差
总结
-
清除浮动的本质
清除浮动的本质是清除浮动元素脱离标准流造成的影响
-
清除浮动的策略
闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。
-
使用场景
实际开发中可能会遇到，但是不常用。
3.5 清除浮动（2）——父级添加 overflow
可以给父级添加 overflow 属性，将其属性设置为 hidden、auto或scroll。
注意是给父元素添加代码：
- 优点：代码简洁
- 缺点：无法显示溢出部分
3.6 清除浮动（3）——:after 伪元素法
实际上也是额外标签法的一种。
.clearfix {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/*IE6、7专有*/
*zoom: 1;
}
3.7 清除浮动（4）——双伪元素法
语法
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
- 优点：代码更简洁
- 缺点：照顾低版本浏览器
- 代表网站：小米、腾讯
3.8 清除浮动总结
为什么需要清除浮动？
- 父级没高度
- 子盒子浮动了
- 影响下面布局了，应该清除浮动。
定位
为什么需要定位
一些固定盒子的效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以：
- 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
- 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
定位组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位=定位模式+边偏移。
通过 CSS 的 position 属性来设置
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
边偏移
边偏移就是定位的盒子移动到最终位置。有 top， bottom， left 和 right 4 个属性
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top:80px | 顶端偏移量，定义元素相对于其父元素上边线的距离。 |
| bottom | bottom: 80px | 底部偏移量，定义元素相对于其父元素下边线的距离。 |
| left | left： 80px | 左侧偏移量，定义元素相对于其父元素左边线的距离。 |
| right | right: 80px | 右侧偏移量，定义元素相对于其父元素右边线的距离。 |
1. 相对定位 relative
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。
语法：
选择器 {
position: relative;
}
相对定位的特点：（务必记住）
- 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。
2. 绝对定位 absolute
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。
语法：
选择器 {
position: absolute;
}
绝对定位的特点： （务必记住）
- 如果 没有祖先元素 或者 祖先元素没有定位，则以 浏览器 为准定位（ Document 文档）。
- 如果祖先元素有定位（相对、绝对、固定定位） ，则以最近一级的有定位祖先元素为参考点移动位置。
- 绝对定位不再占有原先的位置。（脱标）
子绝父相的由来
弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。
这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
- 父盒子需要加定位限制子盒子在父盒子内显示。
- 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
3. 固定定位 fixed
固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器 {
position: fixed;
}
固定定位的特点： （务必记住）
- 以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不 占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
固定定位小技巧：固定在版心右侧位置。
- 让固定定位的盒子 left： 50%，走到浏览器可视区（也可以看做版心）的一半位置。
- 让固定定位的盒子 margin—left）板心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对弃了
定位叠放次序 z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z—index 来控制盒子的前后次序（z 轴）
语法：
选择器 {
z-index: 1;
}
- 数值可以是正整数、负整数或 0，默认是 auto ，数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子才有 z—index 属性
元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！本质：让一个元素在页面中隐藏或者显示出来。
1. display 属性
display属性用于设置一个元素应如何显示。display： none;隐藏对象display ： block;除了转换为块级元素之外，同时还有显示元素的意思 display 隐藏元素后，不再占有原来的位置。
后面应用及其广泛，搭配 JS 可以做很多的网页特效。
2. visibility 可见性
- visibility 属性用于指定一个元素应可见还是隐藏。- - visibility : visible;元素可视
- visibility : hidden;元素隐藏
- visibility 隐藏元素后，继续占有原来的位置
如果隐藏元素想要原来位置，就用 visibility ： hidden
如果隐藏元素不想要原来位置，就用 display ： none （用处更多重点）
3.overflow 溢出
overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容 |
| scroll | 超出的部分隐藏掉不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。但是如果有定位的盒子，请慎用overflowhidden 因为它会隐藏多余的部分。
一 、flex
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{ display: flex; }
行内元素也可以使用 Flex 布局。
.box{ display: inline-flex; }
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
二 、基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
三、容器的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）。
.box { flex-direction: row | row-reverse | column | column-reverse; }
它可能有4个值。
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap属性
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
它可能取三个值。
（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box { flex-flow: <flex-direction> || <flex-wrap>; }
justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
.box { justify-content: flex-start | flex-end | center | space-between | space-around; }
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items属性
align-items属性定义项目在交叉轴上如何对齐。
.box { align-items: flex-start | flex-end | center | baseline | stretch; }
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
该属性可能取6个值。
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
四、项目的属性
以下6个属性设置在项目上。
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item { order: <integer>; }
flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item { flex-grow: <number>; /* default 0 */ }
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item { flex-basis: <length> | auto; /* default auto */ }
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
实例篇
介绍了Flex布局的语法，今天介绍常见布局的Flex写法。
你会看到，不管是什么布局，Flex往往都可以几行命令搞定。
我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。
一、骰子的布局
骰子的一面，最多可以放置9个点。
下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。
如果不加说明，本节的HTML模板一律如下。
上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。
1.1 单项目
首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。
.box { display: flex; }
设置项目的对齐方式，就能实现居中对齐和右对齐。
.box { display: flex; justify-content: center; }
.box { display: flex; justify-content: flex-end; }
设置交叉轴对齐方式，可以垂直移动主轴。
.box { display: flex; align-items: center; }
.box { display: flex; justify-content: center; align-items: center; }
.box { display: flex; justify-content: center; align-items: flex-end; }
.box { display: flex; justify-content: flex-end; align-items: flex-end; }
1.2 双项目
.box { display: flex; justify-content: space-between; }
.box { display: flex; flex-direction: column; justify-content: space-between; }
.box { display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.box { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.box { display: flex; } .item:nth-child(2) { align-self: center; }
.box { display: flex; justify-content: space-between; } .item:nth-child(2) { align-self: flex-end; }
1.3 三项目
.box { display: flex; } .item:nth-child(2) { align-self: center; } .item:nth-child(3) { align-self: flex-end; }
1.4 四项目
.box { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: space-between; }
HTML代码如下。
CSS代码如下。
.box { display: flex; flex-wrap: wrap; align-content: space-between; } .column { flex-basis: 100%; display: flex; justify-content: space-between; }
1.5 六项目
.box { display: flex; flex-wrap: wrap; align-content: space-between; }
.box { display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; }
HTML代码如下。
CSS代码如下。
.box { display: flex; flex-wrap: wrap; } .row{ flex-basis: 100%; display:flex; } .row:nth-child(2){ justify-content: center; } .row:nth-child(3){ justify-content: space-between; }
1.6 九项目
.box { display: flex; flex-wrap: wrap; }
二、网格布局
2.1 基本网格布局
最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。
HTML代码如下。
CSS代码如下。
.Grid { display: flex; } .Grid-cell { flex: 1; }
2.2 百分比布局
某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。
HTML代码如下。
.Grid { display: flex; } .Grid-cell { flex: 1; } .Grid-cell.u-full { flex: 0 0 100%; } .Grid-cell.u-1of2 { flex: 0 0 50%; } .Grid-cell.u-1of3 { flex: 0 0 33.3333%; } .Grid-cell.u-1of4 { flex: 0 0 25%; }
三、圣杯布局
圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
HTML代码如下。
CSS代码如下。
.HolyGrail { display: flex; min-height: 100vh; flex-direction: column; } header, footer { flex: 1; } .HolyGrail-body { display: flex; flex: 1; } .HolyGrail-content { flex: 1; } .HolyGrail-nav, .HolyGrail-ads { /* 两个边栏的宽度设为12em / flex: 0 0 12em; } .HolyGrail-nav { / 导航放到最左边 */ order: -1; }
如果是小屏幕，躯干的三栏自动变为垂直叠加。
@media (max-width: 768px) { .HolyGrail-body { flex-direction: column; flex: 1; } .HolyGrail-nav, .HolyGrail-ads, .HolyGrail-content { flex: auto; } }
四、输入框的布局
我们常常需要在输入框的前方添加提示，后方添加按钮。
HTML代码如下。
CSS代码如下。
.InputAddOn { display: flex; } .InputAddOn-field { flex: 1; }
五、悬挂式布局
有时，主栏的左侧或右侧，需要添加一个图片栏。
HTML代码如下。
...
CSS代码如下。
.Media { display: flex; align-items: flex-start; } .Media-figure { margin-right: 1em; } .Media-body { flex: 1; }
六、固定的底栏
有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。
HTML代码如下。
CSS代码如下。
.Site { display: flex; min-height: 100vh; flex-direction: column; } .Site-content { flex: 1; }
七，流式布局
每行的项目数固定，会自动分行。
CSS的写法。
<br />
.parent {
width: 200px;
height: 150px;
background-color: black;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.child {
box-sizing: border-box;
background-color: white;
flex: 0 0 25%;
height: 50px;
border: 1px solid red;
}
<br /><br />
.parent {
width: 200px;
height: 150px;
background-color: black;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.child {
box-sizing: border-box;
background-color: white;
flex: 0 0 25%;
height: 50px;
border: 1px solid red;
} <br />
（完）
