虽然通过上篇我们了解了盒模型的五种属性的及其相应的基本语法:【22】CSS核心样式（3）——盒模型5种属性，但在实际工作中有更多的技巧，这也需要掌握。
由此，有了本篇：盒模型的5种应用。
本篇讲解前3种应用，目录如下：
一、清除默认样式
1.原因
大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。
2.类型
（1）盒模型属性中内外边距
| 出现情况 | 清除方法 |
|---|---|
| 大部分容器级标签都有默认边距 | ①用标签选择器的并集方式;②通配符清除。 |
（2）一些标签自带的默认样式
| 出现情况 | 清除方法 |
|---|---|
<ul>和<ol>两种列表有默认的列表前缀 | list--style属性 |
<a>标签的默认样式 | 设置color和text-decoration |
<b>、h系列标签默认加粗效果 | 设置font-weight |
（3）设置初始公共样式
body中设置文字标签的样式，层叠掉原body默认无样式。
| 出现情况 | 清除方法 |
|---|---|
整体的无论哪里出现的<font>标签的样式都是一致的 | 在<body>中设置整体文字样式，让大部分后代标签全部去继承 |
3.代码
/*（1）盒模型属性中内外边距*/
/*盒模型属性中内外边距_用标签选择器的并集方式清除*/
body, div, p, h1, h2, h3 ,h4, h5, h6, ul, ol, li, dl, dd, td, th {
margin: 0;
padding: 0;
}
/*盒模型属性中内外边距_②通配符清除*/
* {
margin: 0;
padding: 0;
}
/*（2）一些标签自带的默认样式*/
/*清除<ul>和<ol>两种列表有默认的列表前缀*/
ul, ol {
list-style: none;
}
/*清除并且设置<a>标签的默认样式*/
a {
color: #666;
text-decoration: none;
}
/*清除<strong>、<b>、h系列标签默认加粗效果*/
h1, h2, h3, h4, h5, h6, b, strong {
font-weight: noraml;
}
/*（3）设置初始公共样式*/
body {
color: #999;
font-size: 14px;
font-family: "Arial", "Sim Sun";
}
二、height应用
1.应用背景
根据不同的需求，高度属性可以设置也可以不设置。
• 如果设置高度：盒子占有的高度位置就确定了，后面的同级元素会紧挨着加载；
• 如果不设置高度：会根据标签内部内容高度自动撑开。
2.举例
以<div> 标签为例，根据情况不同选择是否设置高度：
| 情况 | 表现 |
|---|---|
| 必须设置高度 | 设计图中盒子高度占位是固定的，后面同级元素在高度下面加载。 自身盒子内部内容过多会溢出盒子区域。 |
| overflow 属性 | 设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。 可以通过一个溢出的属性 overflow，进行溢出部分内容的显示效果设置。 |
| 必须不设置高度 | 要求盒子高度必须自适应内部内容的高度。 或者设置height的属性值是自动的。 |
补充：
| overflow 属性值 | 属性值说明 |
|---|---|
| visible | 默认值，可见的可视的，溢出部分会显示。 |
| hidden | 溢出部分直接隐藏，隐藏超过边框范围的内容。 |
| scroll | 溢出的部分出现滚动条，可以拖动滚动条看到隐藏部分，多出盒子高度的部分不显示，不论有没有溢出，水平和垂直方向都会出现滚动条。 |
| auto | 自动的，如果没有溢出就正常显示，如果有溢出，溢出的方向自动出现滚动条。 |
3.举例代码及浏览器中显示效果
情况1：必须设置高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div必须设置高度情况</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid #f00;
}
</style>
</head>
<body>
<div>
这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
这是一个div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
</div>
<span>这是一个span</span>
</body>
——————————————————————————————
情况2：overflow 属性
①overflow：visible;
默认值，可见的可视的，溢出部分会显示。与上情况1显示效果一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>①overflow: visible;情况</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid #f00;
overflow: visible; /*多加一条overflow属性*/
}
</style>
</head>
<body>
<div>
这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个
div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是
一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这
是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一
个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,
这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
</div>
<span>这是一个span</span>
</body>
②overflow: hidden;
溢出部分直接隐藏，隐藏超过边框范围的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>②overflow: hidden; 情况</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid #f00;
overflow: hidden;
}
</style>
</head>
<body>
<div>
这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个
div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是
一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这
是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一
个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,
这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
</div>
<span>这是一个span</span>
</body>
③overflow: scroll;
溢出的部分出现滚动条，可以拖动滚动条看到隐藏部分，多出盒子高度的部分不显示，不论有没有溢出，水平和垂直方向都会出现滚动条。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>③overflow: scroll; 情况</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid #f00;
overflow: scroll;
}
</style>
</head>
<body>
<div>
这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个
div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是
一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这
是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一
个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,
这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
</div>
<span>这是一个span</span>
</body>
④overflow: auto;
④-①如果有溢出，溢出的方向自动出现滚动条。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>④overflow: auto;情况（溢出）</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid #f00;
overflow: auto;
}
</style>
</head>
<body>
<div>
这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个
div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是
一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这
是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一
个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,
这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
</div>
<span>这是一个span</span>
</body>
④-② 如果没有溢出就正常显示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>④overflow: auto;情况（未溢出）</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid #f00;
overflow: auto;
}
</style>
</head>
<body>
<div>
这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
这是一个 div,这是一个 div这是一个 div,这是一个 div这是一个 div,这是一个 div
</div>
<span>这是一个span</span>
</body>
—————————————————————————————————
情况3：必须不设置高度
要求盒子高度必须自适应内部内容的高度。 或者设置height的属性值是自动的。
div {
height: auto;
}
三、居中
1.应用背景
在网页中经常见到元素或者文字居中的效果。
2. 情况及实现方法
| 情况 | 居中方法 |
|---|---|
| 文本水平居中 | text-align属性，不论单行或多行都可以设置。 |
| 文本垂直居中 | 单行文本垂直居中：让文字行高 line-height 等于盒子高度 height。 多行文本垂直居中：让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同。 |
| 元素垂直居中（一个元素内部嵌套的子元素，在父元素中居中） | 与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高 度，再给父元素设置相同的上下边距。 |
| 元素水平居中 | 针对类似<div>样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可 以设置子盒子的 margin 值，水平方向的值都设置为 auto。 原因：auto 只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平向都是auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。 |
3. 代码
情况①文本水平居中
不论单行或多行都可以设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本水平居中</title>
<style>
p {
width: 400px;
height: 200px;
border: 1px solid #000;
text-align: center;
}
</style>
</head>
<body>
<p>这是一段文字内容这是一段文字内容这是一段文字内容这是一段文字内容这是一段文字内容</p>
</body>
</html>
———————————————————————————————————
情况②文本垂直居中
②-①单行文本垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单行文本垂直居中</title>
<style>
p {
width: 400px;
height: 200px;
border: 1px solid #000;
line-height: 200px;
}
</style>
</head>
<body>
<p>这是一段文字内容这是一段文字内容</p>
</body>
</html>
②-②多行文本垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多行文本垂直居中</title>
<style>
p {
width: 400px;
height: auto; /*高度自适应*/
border: 1px solid #000;
padding: 40px 0; /*内边距上下相同*/
}
</style>
</head>
<body>
<p>这是一段文字内容这是一段文字内容
这是一段文字内容这是一段文字内容
这是一段文字内容这是一段文字内容
这是一段文字内容这是一段文字内容
</p>
</body>
</html>
————————————————————————————————————
情况③元素垂直居中
与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素垂直居中</title>
<style>
.box {
width: 300px;
height: auto;/*父元素高度自适应*/
padding: 30px 0;/*父元素上下内边距相同*/
border: 1px solid #0f0;
}
.demo {
width: 400px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="demo"></div>
</div>
</body>
</html>
———————————————————————————————————
情况④元素水平居中
如果子盒子宽度低于父盒子宽度，可以设置子盒子的 margin 值，水平方向的值都设置为 auto。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素水平居中(子盒子宽度低于父盒子宽度)</title>
<style>
.box {
width: 500px;
height: 150px;
border: 1px solid #0f0;
}
.demo {
width: 400px;
height: 100px;
background-color: pink;
margin: 0 auto; /*子元素设置margin,左右auto*/
}
</style>
</head>
<body>
<div class="box">
<div class="demo"></div>
</div>
</body>
</html>
下篇继续：
【24】CSS核心样式（4）——盒模型的5种应用②（5/5）
187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
