CSS 进阶（盒子模型、浮动、定位、伪类、伪元素）
目录
关于什么是盒子模型
内容的宽度和高度
border属性
如何通过CSS实现自动内减
margin单方向设置
清除默认边距
结构伪类
伪元素
标准流简介
浮动
浮动的代码
浮动的特点
清除浮动
定位
为什么引入定位：
使用定位的步骤
2. 设置偏移值
静态定位
相对定位
绝对定位
写在前面：关于我们之前学习的CSS以及以前学的Html还需要落实，但在之前已经上传过Csdn上了详细文章在以下的链接
Html常用标签 CSS基础
https://blog.csdn.net/Chen_072_11/article/details/129843853?spm=1001.2014.3001.5501
关于什么是盒子模型
1. 盒子的概念
1. 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
2. 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
2. 盒子模型
➢ CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型
这个图片不太明显我们再换一个模型来看
在这个图片里我们可以知道盒子模型几个区域
1. 内容区域：content
2. 边框区域：border
3. 内边距区域：padding
4. 外边距区域：margin
内容的宽度和高度
➢ 作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
➢ 属性：width / height
➢ 常见取值：数字+px
我们可以通过width和height进行对于盒子的内容进行编辑
border属性
➢ 作用：给设置边框粗细、边框样式、边框颜色效果
➢ 单个属性：
如何使用border
➢ 属性名：border
➢ 属性值：单个取值的连写，取值之间以空格隔开
如：border : 10px solid red;
➢ 快捷键：bd + tab
补充：soild是实线 dashed是虚线
内边距取值
➢ 作用：设置 边框 与 内容区域 之间的距离
➢ 属性名：padding
➢ 常见取值：
如何通过CSS实现自动内减
解决方法 ：自动内减
操作：给盒子设置属性 box-sizing : border-box ; 即可
优点：浏览器会自动计算多余大小，自动在内容中减去
外边距(margin)
margin单方向设置
➢ 场景：只给盒子的某个方向单独设置外边距
➢ 属性名：margin - 方位名词
➢ 属性值：数字 + px
或者直接对其进行定义 
清除默认边距
场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的
margin和padding，后续自己设置
比如：body标签默认有margin：8px
比如：p标签默认有上下的margin
比如：ul标签默认由上下的margin和padding-left
举个例子
Document
1
2
3
结构伪类
作用与优势：
1. 作用：根据元素在HTML中的结构关系查找元素
2. 优势：减少对于HTML中类的依赖，有利于保持代码整洁
3. 场景：常用于查找某父级选择器中的子元素
看一个例子
Document
- 这是第1
- 这是第2
- 这是第3
- 这是第4
- 这是第5
- 这是第6
- 这是第7
- 这是第8
显示的样子
n的注意点：
1. n为：0、1、2、3、4、5、6、……
2. 通过n可以组成常见公式
伪元素
➢ 伪元素：一般页面中的非主体内容可以使用伪元素
➢ 区别：
1. 元素：HTML 设置的标签
2. 伪元素：由 CSS 模拟出的标签效果
➢ 种类：
➢ 注意点：
1. 必须设置content属性才能生效
2. 伪元素默认是行内元
举一个例子
Document
喜欢
显示效果
标准流简介
➢ 标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
➢ 常见标准流排版规则：
1. 块级元素：从上往下，垂直布局，独占一行
2. 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
浮动
在之前我们有文字的浮动，在word中的使用，但是在我们现在可以使用的是对于盒子模型进行的浮动，其实不难想象到的是，所谓的浮动就是将我们的盒子进行一个浮动
浮动的代码
➢ 属性名：float
➢ 属性值：
浮动的特点
1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
相当于从地面飘到了空中
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素有特殊的显示效果
一行可以显示多个
可以设置宽高
➢ 注意点：
浮动的元素不能通过text-align:center或者margin:0 auto
举个例子
Document
chen11
chen22
chen33
显示样子
清除浮动
为什么要清除浮动
➢ 含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
➢ 原因：
子元素浮动后脱标 → 不占位置
➢ 目的：
需要父元素有高度，从而不影响其他网页元素的布局
如何清除清除浮动
直接清除浮动的最简单的方式
直接给父元素设置 overflow : hidden
定位
为什么引入定位：
在盒子模型中总是会有盒子重叠等等不同的情况发生，这时候我们就可以使用定位的相关知识点去解决这些问题
使用定位的步骤
1. 设置定位方式
➢ 属性名：position
➢ 常见属性值：
2. 设置偏移值
➢ 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
➢ 选取的原则一般是就近原则 （离哪边近用哪个）
静态定位
➢ 介绍：静态定位是默认值，就是之前认识的标准流。
➢ 代码：
position:static;➢ 注意点：
1. 静态定位就是之前标准流，不能通过方位属性进行移动
2. 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
相对定位
➢ 介绍：自恋型定位，相对于自己之前的位置进行移动
➢ 代码：
position:relative;1. 需要配合方位属性实现移动
2. 相对于自己原来位置进行移动
3. 在页面中占位置 → 没有脱标
绝对定位
➢ 应用场景：
1. 配合绝对定位组CP（子绝父相）
2. 用于小范围的移动
➢ 介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
➢ 代码：
position:absolute1. 需要配合方位属性实现移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置 → 已经脱标
➢ 应用场景：
1. 配合绝对定位组CP（子绝父相）