盒子模型

盒子的概念：

页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局

组成：

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等单闭合标签