本文详细介绍了CSS中的盒模型，包括内容、内边距、边框和外边距的概念及其对元素尺寸和位置的影响。重点讲解了边框设置、内边距的计算、外边距的重叠和传递现象，以及如何通过display属性和overflow属性控制元素布局。此外，还探讨了浮动元素的特性，如文字环绕和高度塌陷问题，以及解决方案。最后，展示了基本的页面布局示例。
文章目录
盒子模型
-
盒子模型(Box Model)：页面中的任何元素都可以看成一个四边形的盒子
有了盒子模型，就可以任意摆放元素在页面中的位置。
如何摆放元素的位置称为“布局”。
-
盒子模型的构成
- 内容：content。
- 内边距：padding，内容到盒子的边距。
- 边框：border。
- 外边距：margin。
-
content+padding+border影响盒子可视区域的大小，margin影响盒子的位置
盒子模型的边框
边框设置
- border-width、border-style、border-color分别设置完成后才会有边框。
- border简写：
border:1px red solid - 设置边框大小时可以使用
border-width:10px 20px 30px 40px分别设置上右下左边框 - 可以使用
border-width:10px 20px 30px设置上边框10px，左右边框20px，下边框30px。 - 可以使用
border-width:10px 20px设置上下边框10px，左右边框20px。 - 也可以使用
border-top-width:10px设置上边框为10px，border-right-width:10px设置右边框；border-bottom-width:10px设置下边框，border-left-width:10px设置左边框 - 边框的style和color也可以使用上述方式取值
- style的可选值：none：默认值，没有边框；solid：实线；dotted：点状虚线；dashed：虚线；
盒子的内边距
- 设置边框以及内边距会影响可视区域的大小，影响盒子的实际大小。元素的背景会延伸到内边距中。
- 盒子的可见宽=border-left-width+padding-left-width+width+padding-right-width+border-right-width
- 盒子的可见高=border-top-width+padding-left-height+height+padding-bottom-height+border-bottom-width
- 如果子元素宽高设置百分比属性，则根据父元素width和height属性进行计算，padding和border不计入计算范围。
盒子的外边距
- 外边距为盒子与盒子之间的距离
- 设置盒子的外边距不影响盒子本身的大小，但是影响盒子的位置
- 盒子的默认位置为元素的左上角
- 设置margin-top、margin-left的值会改变盒子本身的位置。
- 设置margin-right、margin-bottom的值会改变盒子兄弟元素的位置。
- 盒子的外边距可以设置为负值。
- margin可以设置为auto
- margin-left或margin-right设置为auto则为水平最大值
- 如果水平方向同时设置margin为auto，则在父元素中水平居中
- 垂直方向设置margin，则默认值为0
外边距的重叠和传递
外边距重叠
垂直外边距重叠，在页面中相邻的垂直方向的外边距会发生重叠现象。
外边距发生重叠时，使用和相邻的兄弟元素的外边距的最大值。
外边距传递
如果子元素的垂直外边距和父元素相邻，就会发生外边距传递现象，子元素设置的外边距传递给父元素
-
解决方式
1、在父元素中设置文本内容，让父元素和子元素外边距不相邻
2、设置父元素的边框。
3、设置父元素的内边距
子元素的不需要设置外边距，父元素的高度需要减去内边距
浏览器拥有默认样式
每个元素在浏览器中会有默认的边距，大多数情况下我们需要自己设置内外边距，因此在使用时一般会先清除内外边距*{marg:0;padding:0;}
display属性
-
display属性可以设置元素的类型
inline：设置为内联元素，宽和高都失效，内容大小为元素大小
block：设置为块级元素，可以设置宽和高，独占一行
none：不显示元素，并且位置也不占用
inline-block：设置为行内块元素，可以设置宽和高，不占整行
- visibility: hidden;隐藏元素，但是保留位置。
overflow属性
-
默认子元素存在于父元素中，如果子元素大小超出父元素，则在父元素外显示，超出部分称为溢出。
- 溢出的内容可以通过overflow进行显示设置
- overflow:hidden，隐藏溢出部分
- overflow:scroll，溢出部分使用滚动条显示，存在垂直水平滚动条
- overflow：visible，溢出部分全部显示（默认值）
- overflow：auto，溢出部分使用滚动条显示，水平垂直都使用，不溢出部分不存在滚动条。
内联盒子
内联元素设置宽和高不起作用
内联元素设置水平内边距起作用，且影响布局
内联元素设置垂直内边距起作用，但不影响布局
内联元素设置左右边框起作用，且影响布局
内联元素设置上下边框起作用，但不影响布局
内联元素设置左右外边距起作用，且影响布局
内联元素设置上下外边框不起作用。
box-sizing
box-sizing设置盒子模型中的边框和内边距是否绘制在宽高之外。
box-sizing:border-box;设置padding和border属性设置在盒子之内，盒子的可视大小并没有发生改变，内容区会变小。
box-sizing:content-box;设置内边框和边框绘制在盒子之外
设置box-sizing:border-box;则盒子模式称为：怪异盒模型
怪异盒子模型width/height=content+2border+2padding
网页可以理解为层层叠加的效果，文档流处在网页的最底层
我们创建的文档都默认在文档流中
文档流的特点
- 块元素
- 块元素在文档流中默认会独占一行，自上而下排列，如果脱离文档流会发生变化。
- 块元素默认在文档流中的宽度是父元素的宽度。
- 块元素默认在文档流中的高度是被“内容”撑开。
- 行内元素
- 行内元素在文档流中只占自身的大小，从左向右依次排开，自动换行。
- 行内元素在文档流中的宽和高都被“内容”撑开
元素的默认宽度和高度
如果块元素不设置宽度，则默认宽度和父元素相同，如果宽度设置为auto或100%，也和父元素相同。
但是如果不设置宽高，则默认值为auto。
如果width和height设置为auto，再添加padding或border，可视区域不变，内容被压缩。
如果width和height设置为100%，在添加padding或border，内容区域不变，可视区域变大。
浮动
如果需要让块元素在页面中水平排列，则需要让块元素脱离文档流
使用float属性，让元素脱离文档流。
float:left;左浮动
float:right;右浮动
float:none;不浮动，默认值
浮动的特点:
- 设置元素的float属性值为非none，则元素脱离文档流。
- 当元素脱离文档流，紧跟着下面的元素会向上移动。
- 元素浮动后，会向左上或右上浮动，直到遇到父元素或其他浮动元素的边框，停靠在该位置上。
- 如果浮动元素上面有未浮动的块元素，则浮动位置不会超过未浮动的元素。
- 块级元素浮动后，宽度不再默认占整行了
- 如果浮动元素一行放不下，会自动换行
- 浮动元素不会超过自己前面的兄弟元素，最多并排。
子父元素都在文档流中，父元素的默认宽度为auto，子元素的默认宽度和父元素一致。
父元素脱离文档流其宽度和高度会被子元素的宽和高撑开。
内联元素脱离文档流后会变成块级元素，宽高会起作用。
文字环绕
浮动元素不会覆盖文本内容，文本内容会自动环绕在元素的周围
基本布局
设置基本的页面布局框架。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.body{
width: 1000px;
margin: auto;
}
.head{
height: 100px;
background-color: yellow;
}
.main{
height: 500px;
}
.left{
float: left;
width: 20%;
height: 100%;
background-color: aqua;
}
.middle{
float: left;
width: 50%;
height: 100%;
background-color: aquamarine;
}
.right{
float: left;
width: 30%;
height: 100%;
background-color: coral;
}
.footer{
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="body">
<div class="head"></div>
<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
高度塌陷
文档流中没有设置宽度，则父元素宽度为auto，如果没有设置高度，则父元素高度由子元素撑开。为子元素设置浮动，子元素脱离文档流，此时子元素无法撑起父元素，导致父元素高度塌陷。如果父元素高度塌陷，则父元素下的兄弟元素会上移，导致页面布局出现混乱。
设置元素高度，解决父元素塌陷，但是高度不能自适应子元素高度。（不推荐使用）
清除浮动
清除浮动：表示去掉浮动对当前元素的影响，不是去除本身的浮动样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.div2{
width: 150px;
height: 200px;
background-color: gray;
clear: left;
}
.div3{
width: 200px;
height: 300px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
div2的样式设置中，clear:left;表示清除左浮动对当前元素的影响
float的取值：left，清除左浮动对当前元素的影响；right，清除右浮动对当前元素的影响；both，清除两侧浮动对当前元素的影响；none表示不清除浮动。
清除完浮动，元素退回到原始位置，清除两侧浮动，以最大影响为主。
在子元素的下方添加div元素，并清除浮动，解决高度塌陷，但是页面中会添加多余的元素
div+clear的方式解决父元素高度塌陷，会添加多余的元素。
使用伪类的方式消除多余元素设置
.clearfix::after{
/* 添加内容 */
content: '';
/* 转换为块级元素 */
display: block;
/* 清除浮动 */
clear: both;
}
扫一扫
302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
