CSS布局
一、浮动
1.1 结构伪类选择器
1.作用与优势：
- 作用：根据元素在HTML中的结构关系查找元素
- 优势：减少HTML中类的依赖，有利于保持代码整洁
- 场景：常用于查找某父级选择器中的子元素
2.选择器
| 选择器 | 说明 |
|---|---|
| E：first-child {} | 匹配父元素中第一个子元素，并且是E元素 |
| E：last-child {} | 匹配父元素中最后一个子元素，并且是E元素 |
| E：nth-child(n) {} | 匹配父元素中第n个子元素，并且是E元素 |
| E：nth-last-child(n) {} | 匹配父元素中倒数第n个子元素，并且是E元素 |
n的注意点：
-
n为：0、1、2、3、4、5、6、......
-
通过n可以组成常见公式
功能 公式 偶数 2n、even 奇数 2n+1、2n-1、odd 找到前5个 -n+5 找到从第五个往后 n+5
1.1.1 结构伪类选择器的易错点
1.1.2 nth-of-type
选择器：
| 选择器 | 说明 |
|---|---|
| E:nth-of-type(n) {} | 只在父元素的同类型(E)子元素范围中，匹配第n个 |
区别：
- :nth-child→直接在所有孩子中数个数
- :nth-of-type→先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数
1.2 伪元素
伪元素：一般页面中的非主体内容可以使用伪元素
区别：
- 元素：HTML设置的标签
- 伪元素：由CSS模拟出的标签效果
种类：
| 伪元素 | 作用 |
|---|---|
| ：:before | 在父元素内容的最前添加一个伪元素 |
| ：:after | 在父元素内容的最后添加一个伪元素 |
注意点：
- 必须设置content属性才能生效
- 伪元素默认是行内元素
1.3 标准流
又称文档流，规则如下
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素 或 行内块元素：往左往右，水平布局，空间不够自动折行
1.4 浮动
1.4.1 浮动的作用
早期作用：图文环绕
现在作用：网页布局
- 场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右
1.4.2 浮动的代码
float:left 左浮动
float:right 右浮动
1.4.3 浮动的特点
- 浮动元素会脱标，在标准流中不占位置
- 浮动元素比标准流高出半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动元素有特殊的显示效果：①一行可以显示多个②可以设置宽高
1.4.4 浮动的案例
1.5 清除浮动
含义：清除浮动带来的影响
- 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
原因：
- 子元素浮动后脱标→不占位置
目的：
- 需要父元素有高度，从而不影响其他网页元素的布局
1.5.1直接设置父元素高度
特点：
优点：简单粗暴，方便
缺点：有些布局中不能固定父元素高度，如：新闻列表、京东推荐模块
1.5.2 额外标签法
操作：
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置 clear：both
特点：
- 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
1.5.3 单伪元素清除法
操作：用伪元素代替了额外标签
优点：项目中使用，直接给标签加类即可清除浮动
1.5.4 双伪元素清除法
优点：项目中使用，直接给标签加类即可清除浮动
1.5.5 给父元素设置 overflow：hidden
操作：
- 直接给父元素设置 overflow：hidden
二、定位
属性名：position
常见属性值：
设置偏移量：
- 偏移值设置分为两个方向，水平和垂直方向各选一个即可
- 选取原则一般是就近原则
2.1静态定位
介绍：静态定位是默认值，标准流
代码：position：static；
注意：
- 静态定位就是标准流，不能通过方位属性进行移动
- 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
2.2 相对定位
介绍：相对于自己之前的位置进行移动
代码：position：relative；
特点：
- 需要配合方位属性实现移动
- 相对于自己原来位置进行移动
- 在页面中占位置→没有脱标
应用场景：
- 配合绝对定位组CP（子绝父相）
- 用于小范围的移动
2.3 绝对定位
介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
代码：position：absolute
代码：
- 需要配合方位属性实现移动
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置→已经脱标
2.4 绝对定位到底相对于谁进行偏移
1.祖先元素中没有定位一默认相对于浏览器进行移动
2.祖先元素中有定位一相对于 最近的 有定位的祖先元素进行移动
2.5 子绝父相介绍
场景:让子元素相对于父元素进行自由移动
含义:
-
子元素:绝对定位
-
父元素:相对定位子绝父相好处
子绝父相好处：
- 父元素是相对定位，则对网页布局影响最小
（拓展）
2.6固定定位
介绍:死心眼型定位，相对于浏览器进行定位移动
代码:position:fixed;
特点:
1.需要配合方位属性实现移动
2.相对于浏览器可视区域进行移动
3.在页面中不占位置 一已经脱标
应用场景:
1.让盒子固定在屏幕中的某个位置
2.7 元素层级关系
不同布局方式元素的层级关系：
- 标准流< 浮动<定位
不同定位之间的层级关系：
- 相对、绝对、固定默认层级相同
- 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
2.8 更改定位元素的层级
场景: 改变定位元素的层级
属性名: z-index
属性值: 数字
- 数字越大，层级越高
三、装饰
3.1 垂直对齐方式
属性名：vertical-align
属性值：
（拓展）项目中vertical-align可以解决的问题
-
文本框和表单按钮无法对齐问题
-
input和img无法对齐问题
-
div中的文本框，文本框无法贴顶问题
-
div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
-
使用line-height让img标签垂直居中问题
注意点:
-
学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
-
推荐优先使用浮动完成效果
3.2 光标类型
场景:设置鼠标光标在元素上时显示的样式
属性名: cursor
常见属性值:
3.3 边框圆角
属性名: border-radius
常见取值: 数字+px 、百分比
赋值规则: 从左上角开始赋值，然后顺时针赋值，没有赋值的看对角!
3.3.1 圆角边框常见应用
画一个正圆
-
盒子必须是正方形
-
设置边框圆角为盒子宽高的一半一 border-radius:50%
胶囊按钮:
1.盒子要求是长方形
2.设置→ border-radius: 盒子高度的一半
3.4 overflow溢出部分显示效果
溢出部分: 指的是盒子 内容部分 所超出盒子范围的区域
场景:控制内容溢出部分的显示效果，如: 显示、隐藏、滚动条..
属性名: overflow
常见属性值
3.5元素本身隐藏
场景: 让某元素本身在屏幕中不可见。如: 鼠标:hover之后元素隐藏常见属性:
- visibility: hidden
- display: none
区别:
- visibility: hidden 隐藏元素本身，并且在网页中 占位置
- display: none 隐藏元素本身，并且在网页中 不占位置
注意点:
- 开发中经常会通过 display属性完成元素的显示隐藏切换
- display: none; (隐藏) 、 display: block; (显示)
3.6 元素整体透明度
场景: 让某元素整体 (包括内容) 一起变透明
属性名: opacity
属性值: 0~1之间的数字
-
1: 表示完全不透明
-
0: 表示完全透明
注意点：
- opacity会让元素整体透明，包括里面的内容，如: 文字、子元素等......
3.7 边框合并
场景:让相邻表格边框进行合并，得到细线边框效果
代码: border-collapse: collapse;
3.8 用CSS画三角形
场景: 在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成
实现原理:
利用盒子边框完成
实现步骤:
1.设置一个盒子
2.设置四周不同颜色的边框
3将盒子宽高设置为0，仅保留边框
4.得到四个三角形，选择其中一个后，其他三角形 (边框)设置颜色为透明
四、选择器拓展
4.1链接伪类选择器
场景:常用于选中超链接的不同状态
选择器语法:
注意点:
- 如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写
- 记忆口诀: 男盆友送了你一个 LV 包包，你开心的 HA 哈笑
- 其中 :hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态
4.2 焦点伪类选择器
场景: 用于选中元素获取焦点时状态，常用于表单控件
选择器语法:
效果:
- 表单控件获取焦点时默认会显示外部轮廓线
4.3 属性选择器
场景: 通过元素上的HTML属性来选择元素，常用于选择 input 标签
选中页面中所有的文本框，使用属性选择器如何实现呢?
- input[type="text"] { }