一、CSS选择器
1、元素选择器
- 文档的
标签元素是最基本的选择器 - 多个元素间使用逗号
，，可简写，叫选择器分组 - CSS2引入通配选择器
*
2、类(Class) / ID 选择器
- 类(Class)选择器使用点
. - 可结合元素选择器，例：
p.important {color:red;} - 多类选择器，例
<p class="important warning"></p> .important.warning{background:silver;} - ID选择器使用井号
#
3、属性选择器
- 根据元素的属性和属性值选择元素，例
*[title] {color:red;}，具体如下：
4、亲戚选择器 后代选择器、子选择器、相邻兄弟选择器、后续兄弟选择器
- 后代选择器，使用空格，例：
h1 em {color:red;} - 子元素选择器，使用大于号
>，例：h1 > strong {color:red;} - 相邻兄弟选择器（后续的一个兄弟），使用
+，例：h1 + p {margin-top:50px;} - 后续兄弟选择器（后续所有的兄弟），使用
~，例：h1 + p {margin-top:50px;}
5、伪类 / 伪元素选择器
- 伪类使用单冒号
:，所有伪类如下（7个）
- CSS3伪元素使用双冒号
::，所有伪元素如下：（4个，单冒号也识别，最好使双冒号）
二、布局
1、标准流（普通流/文档流）最基本的
-
块级元素独占一行，从上向下顺序排列，例：div、p、h1~h6、form、table、hr、ul、ol -
行内元素按顺序，从左到右排列，遇到父元素边缘换行，例：span、a、em、i
2、浮动（float）
- 网页布局第一准则：多个块级元素
纵向排列找标准流，多个块级元素横向排列找浮动。 - 特点：
- 浮动元素会脱离标准流。
（脱标） - 浮动元素
顶端对齐，一行显示。 - 会具有行内元素特点，当
不指定元素宽高时，以内容宽高为元素宽高。
- 一般
**搭配**父块元素使用。 - 网页布局第二准则：
先设置盒子大小，再设置盒子位置。 - 清除浮动方法：
-
额外标签法，也称隔墙法，W3C推荐方法（如图1-6） -
父级添加overflow属性，属性值设为hidden、auto或scroll（不常用）（如图1-7） -
父级添加after伪元素，大厂专用，相当于额外标签法（如图1-8）关一个门 -
父级添加双伪元素，大厂专用，:befor、:after（如图1-9）关两个门一i
- 总结
3、定位（position）五种
- static（静态定位）
- 按照
标准流摆放位置，无偏移属性
- relative（相对定位）
相对于自己的标准流位置发生偏移。- 原来标准流的位置继续占有
（不脱标），后面盒子仍然以标准流的方式对待它（如图1-1）
- absolute（绝对定位）
- 如果
没有祖先元素，或者祖先元素没有定位，则以浏览器为标准 - 如果祖先元素
有定位（相对、绝对、固定），则以最近的祖先元素为基准（如图1-2） - 绝对定位不再占有原先的位置。
（脱标） 子绝父相，父级元素需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位，（如图1-3）
- fixed（固定定位）
- 以浏览器的
可视窗口为参照点移动元素，与父元素无关，不随滚动条滚动 - 不再占有原来的位置。
脱标（如图1-4）可看做是特殊的绝对定位，犹如正方形对矩形
- sticky（粘性定位）
- 以浏览器的
可视窗口为参照点移动（如图1-5） - 占有原先的定位，
不脱标 必须添加top、left、right、bottom其中一个才有效，跟页面滚动搭配使用，IE不支持。
定位总结
4、盒子模型
- 包括四部分：内容
context、内边距padding、边框border、外边距margin
- border属性包括三个：
border-width、border-style、border-color（如图2-0）
可简写为：border:1px soild red; 没有顺序
- padding值的个数和表达意思（如图2-1）应用（如图2-2）
不指定父亲宽高，则不会撑开 - content：weith和height设定的是
content的属性 - margin：
与padding相同
- 外边距可使
块级盒子水平居中，必须满足两个条件：1）盒子指定宽度2）左右外边距设置auto - 常见写法：
margin:0 auto;1 行内块元素水平居中方法：给其父亲添加text-align:center即可- 外边距
塌陷问题：父子都设置margin-top则父亲会塌陷两次。 解决：1）为父元素设置上边框或上内边距2）为父元素添加overflow：hidden. - 清除内外边距：1）*自带的
margin:8px;1（如图2-3）ul也有，遇见再设设置 2）行内元素上下内外边距不起作用，不要设置（如图2-4）
三、样式
1、元素显示模式 （块、行内、行内块）
- 块元素
- 举例：
<div>、<p>、<h1>~<h6>、<ul>、<ol>、<li> - 特点：1）
独占一行2）宽高、内外边距可控3）宽度默认父级元素的100%4）子元素可行内或块
- 行内元素
- 举例：
<span>、<a>、<b>、<em>等 - 特点：1）
相邻行内元素一行显示2）宽高设置无效3）默认宽度为文本内容宽度4）仅能容纳文本或行内元素
- 行内块元素
- 举例：
<img />、<input />、<td> - 特点：1)
相邻行内块一行显示，但有空隙2）默认宽度为文本内容宽度3）宽高、内外边距可控
2、背景相关
-
背景色：
p {background-color: gray;} -
背景图片：
body {background-image: url(/i/eg_bg_04.gif);}会压住背景颜色 -
背景平铺：
background-repeat，可设置为不平铺、平铺、x或y轴平铺 -
背景图片位置：
background-position：x y第二个参数省略，会默认居中 -
背景固定（背景附着）：
background-attachment：scroll | fixed1 -
融合：
background:颜色 图片地址 平铺 滚动 位置（如图2-6） -
背景色半透明：
background:rgba(0,0,0,0.3);alpha取值0~1,0为全透 -
总结：
3、文字相关
- 重要：文字垂直居中---
行高==盒子高度（如图2-5）
4、表格相关
5、其他（链接、列表、轮廓）
四、备注图
图1-1（relative经典）：
图1-2：
图1-3（absolute经典）：
图1-4（fixed经典）：
图1-5（sticky经典）
图1-6：
图1-7：
图1-8（大厂专用）：
图1-9（大厂专用）：
图2-0：
图2-1：
图2-2（padding实际应用-撑开盒子）：
图2-3：
图2-4：
图2-5：
图2-6（提倡）：
