本文详细介绍了CSS中的溢出属性，包括隐藏、滚动和自动等，以及如何通过overflow属性创建BFC来清除浮动影响和避免margin穿透。此外，还讲解了盒模型的四大部分——内容、内边距、边框和外边距，以及它们的计算方式和应用场景，如元素的宽度、高度计算，内联元素与块级元素的盒模型差异，以及如何利用外边距实现元素居中等。最后，文章提供了练习题，帮助读者巩固理解。
十五、溢出
1.溢出属性
- `overflow: hidden;`溢出隐藏
- `overflow: scroll;`x 轴 y 轴都出现拖动条，子元素不超出也会有滚动条的那条轨道。
- `overflow: auto;`只有溢出的方向出现拖动条
- `overflow: visible;`溢出默认展示
- 单独设定 x 轴或者 y 轴的溢出
- overflow-x: auto;
- overflow-y: hidden;
- 如果 overflow-x、overflow-y 的值相同，则等同于 overflow 设置了这个值。
- overflow-x：hidden；那么 overflow-y 就会被重置为 auto。
2.overflow 与 BFC（清除浮动和清除外边距溢出时着重讲解）
- BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，并且与这个区域外部毫不相干。内部元素除了脱离文档流，之外无论如何设置都不会影响父级。（如同杯中水，如何改变也不会撒出）
-计算BFC的高度时，浮动元素也参与计算。所以形成 BFC 的元素可以清除浮动带来的影响，不然的话，子元素浮动，父元素塌陷，父元素的兄弟元素会和父元素的子元素重叠，就违背了 BFC 的初衷，所以要清除浮动带来的影响。- scroll、auto、hidden 这三个可以触发元素的 BFC 特性。visible 不会。
- 利用 overflow 形成 BFC 的应用：
- 清除浮动影响：父元素设置 overflow：auto/scroll/hidden；可以清除子元素浮动带来的影响。（形成 bfc 结界，与外界隔绝，仅支持 ie7+及现代浏览器）
- 避免 margin 穿透/重叠问题（形成 bfc 结界，与外界隔绝）
【练习】
> 一共四张图，横向排列
> 格子里只显示两张图利用横向拖拽条看到另外两张
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.wai {
/* 只显示两张图 */
width: 200px;
height: 120px;
border: 10px solid black;
/* 给外增加overflow属性出现拖拽 */
overflow: auto;
/* 单独设定x轴或者y轴的溢出 */
overflow-x: auto;
overflow-y: hidden;
}
.nei {
/* 4张图一边大 */
width: 400px;
height: 100px;
/* 去掉幽灵 */
font-size: 0;
}
.nei img {
width: 100px;
}
</style>
</head>
<body>
<div class="wai">
<div class="nei">
<img src="./img/overflow/overflow1.jpg" alt="" />
<img src="./img/overflow/overflow2.jpg" alt="" />
<img src="./img/overflow/overflow3.jpg" alt="" />
<img src="./img/overflow/overflow4.jpg" alt="" />
</div>
</div>
</body>
</html>十六、盒子模型
1. 盒尺寸四大家族
每个元素的盒模型都包括四个部分。包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）。
- 一个元素实际占地宽度：
左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
- 一个元素实际占地高度：
上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距
2. 元素内容
元素的内容可以是元素内的文字，也可以是元素的宽度和高度，大部分内联元素设置宽高无效，只能依靠内容撑开，因此内容就是内联元素中的文字。
实验div元素增加宽度和高度背景颜色
实验span元素增加宽度和高度背景颜色
3. 内边距
(1) 内边距的属性
- padding 指盒子的“内补间”，宽高之外到边框以内的距离。
- 可以设置长度，如 px、em、rem 等,且不支持负值
- padding 有四个方向分别是上、右、下、左
- padding-top 上内边距
- padding-right 右内边距
- padding-bottom 下内边距
- padding-left 左内边距
(2) 内边距的值
- 1 个值，将用于全部的四边。
- 2 个值，第一个用于上、下，第二个用于左、右。
- 3 个值，第一个用于上，第二个用于左、右，第三个用于下。
- 4 个值，将按上、右、下、左的顺序作用于四边。
4.外边距
外边距的使用场合：元素的位置微调，元素之间的距离调整
(1) 外边距的属性
- margin 指盒子的外边距，外边距是当前元素和其他兄弟元素之间的距离。
- 可以设置长度，如 px、em、rem，%等,%取值都是父元素宽度的百分比取值。
- 正值时是增大该方向外边距，负值时是缩小该方向外边距。
- margin 有四个方向分别是上、右、下、左
- margin-top 上外边距
- margin-right 右外边距
- margin-bottom 下外边距
- margin-left 左外边距
(2) 外边距的值
和内边距一样，外边距可以简写 1 ～ 4 个值，下和右不会产生效果的原因，是因为外边距其实是当前元素与同级元素之间的距离。
- 1 个值，将用于全部的四边。
- 2 个值，第一个用于上、下，第二个用于左、右。
- 3 个值，第一个用于上，第二个用于左、右，第三个用于下。
- 4 个值，将按上、右、下、左的顺序作用于四边。
(3) margin 的 auto 取值
margin 有一个特殊的取值是 auto，auto 对上下外边距无效，左右取相同的值，使当前元素在父元素内左右居中。
- 块级元素在父元素中水平居中`margin:上下距离 auto;`
- 上下距离在没有的时候可以写 0
- 内联素使用 margin：auto，不能完成居中效果
(4) margin 的无效情形
外边距可以让元素发生位移效果，但只有左和上外边距会移动当前元素。
下和右外边距，只能让当前元素和周围的元素保持距离。当旁边没有其他元素时，它只是看上去无效。因为，`margin`是设置同级元素间的间隔，并不是设置它在父元素中的位置。如果右侧和下面并没有元素，就不会出现效果。
(5) 自带外边距的元素
因不同浏览器对元素的默认渲染样式不同，所以默认的内外边距也可能不同。因此要在编写样式之前使用
- css reset 进行样式统一 \* {margin：0；padding：0;}
- body : 四个方向各 8px
- ul ： 上下 16px 外边距，“左内边距”40px
(6) 外边距合并现象
- 兄弟元素之外边距合并
- 两个在文档流中（垂直相邻）兄弟之间外边距，同时存在的时候，取最大的值。
(7) 外边距溢出
- 外边距溢出是父元素中在文档流里的第一个和最后一个子元素会和父元素的上下边界产生合并现象。
- 原因是外边距其实设置的是元素与同级兄弟元素之间的距离。因此第一个和最后一个子元素的外边距会被浏览器会认为你定义的是其父级元素的边。
- 解决方案
- 父元素增加`padding-top`缺点：增加了父元素实际高度
- 增加父元素的边框，缺点：增加了父元素实际高度
- 父元素增加`overflow: hidden/auto;`，缺点，父元素就不能溢出显示内容了
- 使用空`<table></table>`放在第一个子元素前和最后一个子元素后，作用是分隔与父级的粘连
- 使用 CSS3 伪元素`::before`给父元素添加内容,源于增加空`<table></table>`
.box::before {
content: "";
display: table;
}5. 不同元素的盒子模型（重点）
(1) 内联元素盒模型
内联元素的宽高是 auto，宽度高度只会一直随内容的宽度高度在同步变化。设置上下内边距和外边距无效。
- 宽度高度是 auto，靠内容撑开
- 设置宽度高度无效
- 设置上下内外边距无效
- 排列方式，从左至右
(2) 块级元素盒模型
- 块级元素就可以设置宽度和高度，
- 只有文字内容不设置宽度高度，宽度为父元素的一行，高度为内容撑开的高度。
- 宽度高度可以设置
- 内外边距设置均有效果
- 排列方式，从上至下
【练习】
> 利用 html 结构，完成咸蛋超人
> 使用外边距和元素的特性完成
> 能力强的同学可以加上手臂
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.tou {
width: 400px;
height: 430px;
border-radius: 50%;
border: 5px solid black;
margin: 100px auto;
}
.jian {
width: 60px;
height: 200px;
border: 5px solid black;
background-color: red;
border-radius: 25% 25% 50% 50%;
margin: -20px auto;
}
span {
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
border: 5px solid black;
border-radius: 50%;
margin-left: 60px;
}
.zui {
width: 200px;
height: 20px;
margin: 30px auto;
border-top: 3px solid black;
border-radius: 30px;
}
</style>
</head>
<body>
<div class="tou">
<div class="jian"></div>
<span></span>
<span></span>
<div class="zui"></div>
</div>
</body>
</html>6. 盒子模型的计算方式
- `box-sizing: content-box;` 标准盒子模型
- 元素所占宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
- 元素所占高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距
- `box-sizing:border-box` 改变盒子模型计算方式
- 设置的宽度 width = 左右 border + 左右 padding + 内容的宽度
- 设置的高度 height = 上下 border + 上下 padding + 内容的高度
- 注意：可能会导致内容溢出，需要时再使用
扫一扫
3131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
