文章目录
1 盒子模型
1.1 盒子组成部分
- 内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的三部分都是可选的。内容区有三个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。当内容信息太多而超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。
- 内边距指的是内容区和边框之间的空间，可以看做是内容区的背景区域。关于内边距的属性有五种，即padding-top、padding-bottom、padding-left、padding-right以及综合了以上四个方向的简洁内边距属性padding。使用这五种属性可以指定内容区域各方向边框之间的距离。
- 边框在CSS盒子模型中，边框跟我们之前学过的边框是一样的。边框属性有border-width、border-style、border-color以及综合了三类属性的快捷边框属性border。其中border-width指定边框的宽度，border-style指定边框类型，border-color指定边框的颜色。“border-width:1px; border-style:solid; border-color:gray；”等价于“border:1px solid gray；”。
- 外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。外边距的属性也有五种，即margin-top、margin-bottom、margin-left、margin-right以及综合了以上四个方向的简洁内边距属性margin。同时，CSS允许给外边距属性指定负数值，当指定负外边距值时，整个盒子将向指定负值的相反方向移动，以此可以产生盒子的重叠效果。
1.2 margin叠加
外边距叠加，又称“margin叠加”，指的是当两个垂直外边距相遇时，这两个外边距将会合并为一个外边距，即“二变一”。其中，叠加之后的外边距高度等于发生叠加之前的两个外边距中的最大值。对于外边距叠加，我们分为三种情况来讨论：同级元素、父子元素和空元素。
1.2.1 同级元素的margin叠加
当一个元素出现在另外一个元素上面的时候，第一个元素的下边距（margin-bottom）将会与第二个元素的上边距（margin-top）会发生合并，合并值为margin-bottom和margin-top的较大的那个值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.first, .second {
width: 200px;
height: 200px;
background-color: pink;
}
/*
一定会出现，解决方案：尽量只给其中一个盒子加外边距
*/
.first {
margin-bottom: 100px;
}
.second {
margin-top: 200px;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
</body>
</html>
1.2.2 父子元素的margin叠加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距塌陷</title>
<style>
.father {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 30px;
/* border: 1px solid red; */
/* border: 1px solid transparent; */
/* padding: 1px; */
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background-color: pink;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
<!--
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden。
-->
1.2.3 空元素的margin叠加
当一个空元素有上下外边距时，如果没有border或者padding，则元素的上外边距与下外边距会发生合并。空元素，指的是没有子元素或者没有文字内容的元素，例如
、
等。如果空元素的外边距碰到另外一个元素的外边距，它们也会发生合并。
1.2.4 总结
- 水平外边距永远不会有叠加，水平外边距指的是margin-left和margin-right。
- 垂直外边距只会在以上三种情况下会叠加，垂直外边距指的是margin-top和margin-bottom。
- 外边距叠加之后的外边距高度等于发生叠加之前的两个外边距中的最大值。
- 外边距叠加针对的是block以及inline-block元素，不包括inline元素。因为inline元素的margin-top和margin-bottom设置无效。
1.3 overflow
2 盒子显示类型
2.1 block、inline、inline-block
2.1.1 块元素
块元素在浏览器默认显示状态下将占据整行，排斥其他元素与其位于同一行。块元素一般为矩形，可以容纳行元素和其他的块元素。常见的块元素：
- 独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素。
- 块元素内部可以容纳其他块元素或行元素。
- 宽度默认是容器（父级宽度）的100%。
- 可以定义高度（height），也可以定义宽度（width）。
- 可以定义四个方向的margin属性。
特殊情况
- 文字类的元素内不能使用块级元素，如p标签里面不能放块级元素。
- 同理，h1~h6也不能放其他块级元素。
2.1.2 行内元素
行内元素与块元素恰恰相反。行内元素默认显示状态可以与其他行内元素共存在同一行。常见的行内元素：
- 可以与其他行内元素位于同一行。
- 行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果。
- 默认宽度就是它本身内容的宽度。
- 无法定义高度（height），也无法定义宽度（width）。
- 可以定义margin-left和margin-right，无法定义margin-top和margin-bottom。
特殊情况
- 里面可以放块级元素，但是给a标签转换一下块级模式最安全
2.1.3 行内块元素
在行内元素中有几个特殊的标签，如img标签、input标签，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
- 一行可以显示多个 。（行内元素特点）
- 和相邻行内元素在一行上，但是他们之间会有空白缝隙。（行内元素特点）
- 默认宽度就是它本身内容的宽度。（行内元素特点）
- 高度，行高、外边距以及内边距都可以控制。（块级元素特点）
inline-block元素之间是有间距的。在实际开发中，这种间距有时会对我们的布局产生影响。大多数时候为了不影响布局，我们需要去除inline-block元素的间距。在CSS中，我们可以在父元素中使用“font-size:0”来去除inline-block元素的间距。
2.2 none属性
对于“display:none”，我们需要注意以下两点。
- “display:none”一般用于JavaScript动态隐藏元素，被隐藏的元素不占据原来的位置空间。
- “display:none”不推荐用来隐藏一些对SEO关键的部分。因为对于搜索引擎来说，它会直接忽略“display:none”隐藏的内容，不把“display:none”隐藏的内容加入权重考虑。
在CSS中，如果想要隐藏某一个元素，我们可以使用“display:none”或者“visibility:hidden”来实现。但是这两者也有本质上的区别。
- “display:none”的元素被隐藏之后，不占据原来的位置。也就是说彻底地消失了，看不见也摸不着。
- “visibility:hidden”的元素被隐藏之后，依然占据原来的位置。也就是说并没有彻底消失，看不见但摸得着。
2.3 table-cell属性
在CSS中，“display:table-cell”可以让元素以表格单元格的形式呈现。也就是说，table-cell类型的元素具备td元素的特点。“display:table-cell”非常强大，可以实现以下三种功能。
- 图片垂直居中于元素。
- 等高布局。
- 自动平均划分元素，并且在一行显示。
2.3.1 图片垂直居中
图片的水平居中可以使用“text-align:center”来实现，而图片的垂直居中效果可以使用“display:table-cell”和“vertical-align:center”配合来实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
display: table-cell;
width: 500px;
height: 500px;
border: 1px solid gray;
vertical-align: middle;
text-align: center;
}
img {
vertical-align: middle;
}
div + div {
border-left: none;
}
</style>
</head>
<body>
<div><img src="images/img.jpg" alt=""/></div>
<div><img src="images/img.jpg" alt=""/></div>
<div><img src="images/img.jpg" alt=""/></div>
</body>
</html>
2.3.2 等高布局
同一行的单元格td元素高度是相等的。因此，table-cell元素也具备这个特点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#wrapper {
display: table-row;
}
#img-box {
display: table-cell;
vertical-align: middle; /*垂直居中*/
text-align: center; /*水平居中*/
width: 150px;
border: 1px solid red;
}
#text-box {
display: table-cell;
width: 200px;
border: 1px solid red;
border-left: none;
padding: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="img-box">
<img src="images/img.jpg" alt=""/>
</div>
<div id="text-box">
<span>《ONE PIECE》（海贼王、航海王）简称"OP"，是日本漫画家尾田荣一郎
作画的少年漫画作品。在《周刊少年Jump》1997年34号开始连载。描写了拥有橡皮身体戴草帽的青年
路飞，以成为"海贼王"为目标和同伴在大海展开冒险的故事。</span>
</div>
</div>
</body>
</html>
2.3.3 自动平均划分元素
当父元素定义“display:table”而子元素定义“display:table-cell”时，如果给父元素一定的宽度，父元素宽度就会根据子元素的个数进行自动平均划分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
display: table;
width: 300px;
}
li {
display: table-cell;
height: 60px;
line-height: 60px;
text-align: center;
color: White;
}
ul li:nth-child(1) {
background-color: Red;
}
ul li:nth-child(2) {
background-color: Orange;
}
ul li:nth-child(3) {
background-color: Blue;
}
ul li:nth-child(4) {
background-color: silver;
}
ul li:nth-child(5) {
background-color: Purple;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>22</li>
<li>333</li>
<li>4444</li>
<li>55555</li>
</ul>
</body>
</html>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
