盒子模型、外边距重叠、塌陷解决办法，什么是标准流、浮动
盒子模型
页面中的每一个标签都看成是一个 盒子
浏览器在显示页面的时候，把页面中的元素看作是一个个矩形区域，也称之为 盒子
css中盒子由 内容content，内边距padding，边框border，外边距margin 构成，就是盒子模型
内容
内容的宽度和高度
通过width和height属性设置的就是 内容区域的大小
边框border
边框粗细，边框样式 ，边框颜色
.box {
width: 200px;
height: 200px;
/* 边框粗细 */
/* border-width: 5px; */
/* 边框样式
dashed 虚线
solid 实线
dotted 点线
*/
/* border-style: dotted; */
/* 边框颜色 */
/* border-color: red; */
/* 连写
border:粗细 样式 颜色;
粗细和样式必须一起写 不能省略
*/
/* border: 5px solid yellow; */
/* 单方向 */
border-left: 3px solid red;
border-top: 5px solid;
border-bottom: 6px dashed blue;
border-right: 10px solid green;
}
案例
需求：盒子尺寸 300*300，背景红色，边框10px solid；
1：设置的width和height 是内容的宽高
2：设置边框会撑大盒子
总结:
盒子实际大小宽度=左边框+内容的width+右边框
盒子实际大小高度=上边框+内容的height+下边框
盒子被border撑大后，手动在内容中减去border的大小
三角形
宽高都设置为0，设置border的宽度，样式为实线，其余三边的颜色为透明
<style>
.main {
width: 0px;
height: 0;
border-left: 40px solid red;
border-top: 40px solid;
border-bottom: 40px solid blue;
border-right: 40px solid green;
}
.box {
width: 0;
height: 0;
border-left: 60px solid red;
border-bottom: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid transparent;
}
</style>
</head>
<body>
<div class="main"></div>
<div class="box"></div>
</body>
内边距padding
内容和盒子边框之间的距离--内边距 padding
语法
.box {
width: 50px;
height: 21px;
/* 上下左右各10px */
/* padding: 10px; */
/* padding:上下各10px 左右各20px */
/* padding: 10px 20px; */
/* padding:上10px 左右各20px 下30px*/
/* padding: 10px 20px 30px; */
/* padding:上10px 右20px 下30px 左40px*/
padding: 10px 20px 30px 40px;
}
盒子实际大小
-
1：设置的width和height 是内容的宽高
-
2：设置边框会撑大盒子
-
3：设置padding也会撑大盒子
盒子大小计算
盒子实际大小宽度=左边框+左padding+内容的width+右padding+右边框
盒子实际大小高度=上边框+上padding+内容的height+下padding+下边框
盒子被border和padding撑大后，计算多余的大小，手动在内容中减去
padding什么情况下不会撑大盒子
-
如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度，给子盒子设置左右的padding，和左右border不会撑大盒子(块元素)
<style>
.out {
width: 500px;
height: 500px;
}
.inner {
/* 不设置宽度 */
border: 20px solid;
padding: 0 30px;
}
</style>
</head>
<body>
<div class="out">
<div class="inner">123</div>
</div>
</body>案例
需求:盒子尺寸300*300，背景粉色，边框10px 实线黑色，上下左右20px的内边距，如何实现？
-
手动内减
width=实际宽度-左边框-左padding-右padding-右边框
height=实际高度-上边框-上padding-下padding-下边框
.box {
/*
实际宽度=左边框+左padding+width+右padding+右边框
实际高度=上边框+上padding+height+下padding+下边框
*/
width: 240px;
height: 240px;
border: 10px solid;
padding: 20px;
}-
自动内减
给盒子设置box-sizing: border-box
/* 自动内减 */
box-sizing: border-box; /*怪异盒模型----移动端*/
width: 300px; /*width height 是盒子实际的宽高,不是内容的宽高*/
height: 300px;
border: 10px solid;
padding: 20px;
-
外边距margin
设置边框以外，盒子和盒子之间的距离
代码
.box {
width: 100px;
height: 100px;
/* 上下左右各10px */
/* margin: 10px; */
/* 上下各10px 左右各20px*/
/* margin: 10px 20px; */
/* 上10px 左右各20px 下30px*/
/* margin: 10px 20px 30px; */
/* 上10px 右各20px 下30px 左40px*/
/* margin: 10px 20px 30px 40px; */
/* 单方向 */
margin-left: 20px;
margin-top: 40px;
margin-bottom: 50px;
margin-right: 40px;
}
清除默认的内外边距
body默认有margin：8px
p默认有上下的margin
ul默认有margin和padding-left
.....项目开始之前要清除这些标签默认的margin和padding
body,
button,
dd,
dl,
dt,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
li,
ol,
ul,
td,
textarea,
th {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
外边距问题
1：正常情况
<style>
* {
margin: 0;
padding: 0;
}
span {
width: 100px;
height: 100px;
display: inline-block;
}
span:first-child {
margin-right: 10px;
}
span:last-child {
margin-left: 20px;
}
</style>
</head>
<body>
<!-- 正常情况 水平布局的盒子，左右的margin正常，互不影响
最终两者距离为左右margin的和
-->
<span>span1</span>
<span>span2</span>
</body>
外边距折叠现象(2种)
-
合并
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.box {
margin-bottom: 30px;
}
.main {
margin-top: 20px;
}
</style>
</head>
<body>
<!-- 垂直布局的块级元素，上下的margin会合并
最终两者的距离为margin的最大值
避免这种问题，只给其中一个盒子设置margin即可
-->
<div class="box"></div>
<div class="main"></div>
</body>
-
塌陷
<style>
* {
margin: 0;
padding: 0;
}
.box {
/*
第一种
width: 300px;
height: 280px;
padding-top: 20px; */
width: 300px;
height: 300px;
/* overflow: hidden; */
float: left;
}
.main {
margin-top: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- 互相嵌套的块级元素，子元素的margin-top会作用在父元素上 ，导致父元素一起往下移动
解决方法：
1：给父元素设置padding-top,父元素的高度根据需求要自减
2：给父元素设置overflow:hidden,子元素的margin-top不能去掉
3：设置浮动
-->
<div class="box">
<div class="main"></div>
</div>
</body>
标准流
标准流又叫文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见文档流排版规则：
-
块级元素：从上往下，垂直布局，独占一行
-
行内元素 或行内块元素 从左往右 水平布局 空间不够自动换行
浮动
作用
让垂直布局的盒子变成水平布局
特点：
浮动元素会脱离标准流，在标准流中不占位置
浮动元素可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果
1：一行可以显示多个
2：可以设置宽高
3：浮动元素不能设置宽高，没有内容，宽高各为0
代码
<style>
* {
margin: 0;
padding: 0;
}
.box {
}
.box .left {
/* width: 400px;
height: 100px; */
/* 左浮动 */
float: left;
}
.box .right {
/* width: 400px;
height: 100px; */
/* 右浮动 */
float: right;
}
.foot {
height: 300px;
}
</style>
</head>
<body>
<!-- 让垂直布局的盒子变成水平布局
谁要从垂直布局变为水平布局，就给谁加float
特点：
浮动元素会脱离标准流，在标准流中不占位置
浮动元素可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果
1：一行可以显示多个
2：可以设置宽高
3：浮动元素不设置宽高，没有内容，宽高各为0
-->
<div class="box">
<div class="left"></div>
<div class="left"></div>
<div class="right"></div>
<div class="right"></div>
<span class="left"></span>
<span class="left"></span>
<span class="left"></span>
<!-- <div class="right"></div> -->
</div>
<div class="foot"></div>
</body>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类