盒子模型
盒子的概念：
页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
组成：
CSS 中规定每个盒子分别由：**内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）**四部分构成
1，内容的宽度和高度
作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
属性：width / height
常见取值：数字+px
2，内边距(padding)
➢ 作用：设置 边框 与 内容区域 之间的距离
➢ 属性名：padding
➢ 记忆规则：从上开始赋值，然后顺时针赋值(上右下左)，如果设置赋值的，看对面的！！
内边距（padding）- 单方向设置
➢ 场景：只给盒子的某个方向单独设置内边距
➢ 属性名：padding - 方位名词
➢ 属性值：数字 + px
padding-left = 10px 左内边距为10px;
3，边框(border)
border简写: 边框的粗细 边框的样式 边框的颜色;
边框粗细: border-width: 上 右 下 左; border-top: 边框的宽度 边框的样式 边框的颜色; 数字+px;
边框样式: border-style: 上 右 下 左; border-right: 边框的宽度 边框的样式 边框的颜色; 实线solid 虚线dashed 点线dotted
边框颜色: border-color: 上 右 下 左; border-bottom: 边框的宽度 边框的样式 边框的颜色;
4，外边距(margin)
➢作用：设置边框以外，盒子与盒子之间的距离；
➢ 属性名：margin
➢ 记忆规则：从上开始赋值，然后顺时针赋值(上右下左)，如果设置赋值的，看对面的！！
内边距（margin）- 单方向设置
➢ 场景：只给盒子的某个方向单独设置外边距
➢ 属性名：margin - 方位名词
➢ 属性值：数字 + px
水平外边距计算
水平布局 的盒子，左右的margin正常，互不影响
最终两者距离为左右margin的和
合并现象
➢ 场景：垂直布局 的 块级元素，上下的margin会合并
➢ 结果：最终两者距离为margin的最大值
➢ 解决方法： 只给其中一个盒子设置margin即可
塌陷现象
➢ 场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
➢ 结果：导致父元素一起往下移动
➢ 解决方法：
1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
2. 给父元素设置 overflow：hidden //推荐用法
3. 转换成行内块元素
4.设置浮动
注意点:
行内元素在垂直方向上内外边距是不生效的,
可以通过行高lineheight改变垂直方向上的距离;
5，盒子模型注意问题
1，内减问题
问题描述：
增加了padding（内边距）/border（元素边框）之后，盒子会被撑大，元素的宽高也会增加，
想要保持原来元素宽高不变，必须减去一部分内容的宽高；
➢ 解决方法 ① ：手动内减
• 操作：自己计算多余大小，手动在内容中减去
• 缺点：项目中计算量太大，很麻烦
➢ 解决方法 ② ：自动内减
• 操作：给盒子设置属性 box-sizing : border-box ; 即可
• 优点：浏览器会自动计算多余大小，自动在内容中减去，
可以不用修改内容大小，盒子元素的宽度和高度不变
2，盒子模型常见的宽度和高度
1.内容的宽度和高度：
就是通过标签的width/height属性设置的宽度和高度； 200 200
2.元素的宽度和高度：
宽度=左边框+左内边距+width+右内边距+右边框； 40+20+200+20+40
高度 同理；
3.元素空间的宽度和高度：
宽度=左外边距+左边框+左内边距+width+右内边距+右边框+右外边距； 30+40+20+200+20+40+30
3，盒子实际大小终极计算公式：
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
浮动
标准流:
➢ 标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
➢ 常见标准流排版规则：
1. 块级元素：从上往下，垂直布局，独占一行
2. 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
浮动
浮动流是一种"半脱离标准流"的排版方式
浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
左浮动：float : left
右浮动：float : right
浮动流中没有居中对齐, 也就是没有center这个取值
在浮动流中是不可以使用margin: 0 auto;
在浮动流中是不区分块级元素/行内元素/行内块级元素的
无论是块级元素/行内元素/行内块级元素都可以水平排版
在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
综上所述, 浮动流中的元素和标准流中的行内块级元素很像
一行可以显示多个,可以设置宽高
什么是浮动元素的脱标?
脱标: 脱离标准流
当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标
清除浮动
➢ 含义：清除浮动带来的影响
• 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
➢ 原因：
• 子元素浮动后脱标 → 不占位置
➢ 目的：
• 需要父元素有高度，从而不影响其他网页元素的布局
清除浮动的方法
① 直接设置父元素高度
➢ 特点：
• 优点：简单粗暴，方便
• 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
② 额外标签法
➢ 操作：
1. 在父元素内容的最后添加一个块级元素
2. 给添加的块级元素设置 clear:both
➢ 特点：
• 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
③ 单伪元素清除法
➢ 操作：用伪元素替代了额外标签
• 优点：项目中使用，直接给标签加类即可清除浮动
(给需要清除浮动的元素添加类名,然后给该元素css直接引用)
.clearfix::after{
content:'' ";
display:block;
clear:both;
//补充代码,为了兼容性处理,在网页中看不到伪元素
height =0;
visibility:hidden
}
④ 双伪元素清除法
优点：项目中使用，直接给标签加类即可清除浮动
⑤ 给父元素设置overflow : hidden
直接给父元素设置 overflow : hidden
伪元素
目标：能够使用 伪元素 在网页中创建内容
➢ 伪元素：一般页面中的非主体内容可以使用伪元素
➢ 区别：
1. 元素：HTML 设置的标签
2. 伪元素：由 CSS 模拟出的标签效果
➢ 种类
::before 在父元素的最前面添加一个伪元素
::after 在父元素的最后面添加一个伪元素
➢ 注意点：
1. 必须设置content属性才能生效
2. 伪元素默认是**行内元素**
div ::before {
content: "我是文字前面";
color: red;
}
<div>
<span>/我是文字中间/</span>
</div>
注意点：单闭合标签不支持伪元素，例如img，input等单闭合标签
