一、伪类选择器
1.1 结构伪类选择器
1. 作用与优势
- 作用：根据元素在HTML中的结构关系查找元素
- 优势：减HTML中类的依赖，保持代码整洁
- 场景：常用于查找某父级选择器中的子元素，ol，ul列表
2. 常用选择器
| 选择器 | 说明 |
|---|---|
| E:first-child {} | 匹配父元素中的第一个子元素，并且是E元素 |
| E:last-child {} | 匹配父元素中的最后一个子元素，并且是E元素 |
| E:nth-child(n) {} | 匹配父元素中的第n个子元素，并且是E元素 |
| E:nth-last-child(n) {} | 匹配父元素中倒数第n个子元素，并且是E元素 |
1.2 静态伪类
-
作用：用来描述一个元素的特殊状态
-
常用选择器
| 选择器 | 说明 |
|---|---|
| :link | 超链接点击之前 |
| :visited | 链接被访问过之后 |
！！！这两种样式只用于超链接
1.3 动态伪类
对于所有标签都适用
| 选择器 | 说明 |
|---|---|
| :hover | 鼠标放到标签上的时候 |
| :active | 鼠标点击标签，但是不松手时 |
| :focus | 某个标签获得焦点时的样式（比如某个输入框获得焦点） |
二、伪元素
1. 区别
- 元素：HTML设置的标签
- 伪元素：由css模拟出来的标签效果，一般用来装饰
2. 常用伪元素
| 伪元素 | 说明 |
|---|---|
| ::before | 在父元素内容的最前面添加一个伪元素 |
| ::after | 在父元素内容的最前面添加一个伪元素 |
3. 注意
（1）必须设置content属性才能生效
（2）伪元素默认为行内元素
三、盒子模型
3.1 HTML元素分类
Html元素大致可以分为3类，分别为：块级元素（block），行内元素（inline），行内块元素（inline-block）
（1）块级元素（block）
- 属性：
display: block - 常见块级元素：
<div>、<p>、<form>、<hr>、<table>、<h1>-<h6>、<dl>、<dt>、<dd>、<ul>、<ol> - 特点：
- 默认情况下都会独占一行，按照从上到下的顺序进行流式布局
- 块级元素可以直接设置宽度和高度，元素在不设置宽度的情况下，它的宽度是父元素的100%
- 遵循盒模型的所有规则，一般作为其他元素的容器（除p标签）
（2）行内（内联）元素（inline）
- 属性：
display: inline - 常见行内元素：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> - 特点：
- 不单独换行，和其它元素在一行上
- 不可设置元素的高度宽度和顶部、底部的边距
- 元素的宽度就是它包含的文字或图片的宽度，不可改变
（3）行内块级元素（inline-block）
- 属性：
display: inline-block - 常见inline-block元素：
<img>、<input> - 特点：
- 同时具备内联元素、块状元素的特点
- 和其他元素均在一行上
- 元素的宽度、高度、行高等边距都可设置
3.2 盒子模型介绍
（1）盒子的概念
-
浏览器渲染页面的时候，会将网页中的元素看成一个一个矩型区域，所以我们形象地将其称之为“盒子”
-
页面中每一个可见的 HTML 元素（即每个标签）都是一个盒子，下面所说的盒子都等同于 HTML 元素。
“盒子”可以帮助我们布局（淘宝）
（2）盒子的模型
一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）
（3）盒子分类
在CSS中，盒子模型可以分成：
- W3C 标准盒子模型
- IE 怪异盒子模型
默认情况下，盒子模型为W3C 标准盒子模型
1. W3C标准盒子模型
-
盒子总宽度 = width + padding + border + margin
-
盒子总高度 = height + padding + border + margin
也就是，width/height 只是内容高度，不包含 padding 和 border值
2. 怪异盒子模型
-
盒子总宽度 = width + margin
-
盒子总高度 = height +margin
怪异盒子模型也叫IE盒模型。他与标准盒子模型的区别就是：元素内容的width和height的范围不同。怪异盒子模型的width和height包括border和padding的宽度。
3. 如何使用
- box-sizing = border-box 创建怪异盒模型。
- box-sizing = context-box 创建标准盒模型。
怪异盒模型中的内容元素并不会把容器撑大，他会自动调节内容元素的大小以保持整体性。
4. 清除默认内外边距
*{
margin: 0;
padding: 0;
}
四、浮动
4.1 标准流
- 标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。
简单讲，就是块状元素从上到下排序，行内元素和行内块从左到右排序。
4.2 浮动
让多个块级元素排成一行，虽然可以用 display : inline-block 但是不方便，我们一般考虑浮动
1. 浮动使用
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：
选择器 { float: 属性值;}
| 属性 | 说明 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
2. 浮动的特点
-
浮动元素会脱离标准流（简称脱标），在标准流中不占位置。
-
浮动元素比标准流高半个级别，可以覆盖标准流中的元素。但只是覆盖元素，文字不覆盖
-
浮动元素会在一行内显示并且元素顶部对齐，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
-
如果两个方向都有浮动的元素，下一元素会去找相同方向的浮动元素贴边
3. 清除浮动
即清除浮动带来的影响
- 直接设置父元素高度
- 额外标签法
- 在父元素内容的最后添加一个块级元素,类名一般起作
.clearfix - 给添加的块级元素设置
clear:both; - clear属性：指定元素两侧不能出现浮动元素
- 在父元素内容的最后添加一个块级元素,类名一般起作
| 属性 | 说明 |
|---|---|
| none | 允许两侧都有浮动元素。默认值 |
| left | 左侧不允许浮动元素 |
| right | 右侧不允许浮动元素 |
| both | 左侧或右侧均不允许浮动元素 |
| inherit | 元素继承其父级的 clear 值 |
- 给父元素设置
overflow:hidden;
overflow 属性：在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条（仅适用于具有指定高度的块元素）
| 属性 | 说明 |
|---|---|
| visible | 默认。溢出没有被剪裁。内容在元素框外渲染 |
| hidden | 溢出被剪裁，其余内容将不可见 |
| scroll | 溢出被剪裁，同时添加滚动条以查看其余内容 |
| auto | 与 scroll 类似，但仅在必要时添加滚动条 |
五、定位
1. 作用
给定position属性，通过top、left、bottom、right来调整元素位置
2. 属性
| 属性 | 说明 |
|---|---|
| relative（相对定位） | 参考元素本身位置 |
| absolute（绝对定位） | 参考最近的祖先元素 |
| static（静态定位） | 默认，根据页面的正常流进行定位 |
| fixed（固定定位） | 参考浏览器窗口 |
| sticky（粘性定位） | 根据用户的滚动位置进行定位 |
详细可见：w3school
3. z-index
设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。仅能在定位元素上奏效（例如 position:absolute;）
505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
