- [width 宽度 、height 高度 、padding 内边距 、margin 外边距 ( 外边距合并、子元素外边距塌陷问题 )](#width 宽度 、height 高度 、padding 内边距 、margin 外边距 ( 外边距合并、子元素外边距塌陷问题 ))
- [border 边框](#border 边框)
- [border-radius 圆角](#border-radius 圆角)
- [box-shadow 阴影](#box-shadow 阴影)
- [overflow 溢出](#overflow 溢出)
- [float 浮动 ( 父元素塌陷问题 )](#float 浮动 ( 父元素塌陷问题 ))
盒子模型（Box Model ）是指在网页设计中，用于描述和布局元素的一种模型。它将每个元素看作是一个具有四个边界的矩形盒子，包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）
width 宽度 、height 高度 、padding 内边距 、margin 外边距 ( 外边距合并、子元素外边距塌陷问题 )
| margin / padding | 说明 | margin / padding | 说明 |
|---|---|---|---|
1个值 |
四方相同 | 2个值 |
上下 左右 |
3个值 |
上 左右 下 | 4个值 |
上 右 下 左 |
浏览器会自带 8px 的 margin 外边距
html
<style>
div{
/* 内容区域 */
width: 200px;
height: 200px;
/*
padding-方位名词 margin-方位名词
设置元素水平居中（margin: x auto;）
*/
margin: 10px 20px 30px 40px;
padding: 20px;
/* 盒子尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸 */
border: 1px solid red;
/* 防止盒子撑大方法:（1）手动减法 border/padding 的尺寸（2）内减模式 box-sizing：border-box 自动去计算占据的宽高 */
box-sizing: border-box;
}
</style>
<div></div>效果:
外边距合并问题
垂直排列的兄弟元素，
上下 margin会合并，取两个 margin 中较大值生效；左右则会相加
html
<style>
.one,.two,.three,.four{ width: 200px;height: 50px; float: left;}
.clear::after{
content: "";
display: block;
clear: both;
}
.one{
background-color: #145eff;
margin-right: 20px;
}
.two{
background-color: #ffec00;
margin-left: 30px;
}
.three{
background-color: #09c90c;
margin-right: 40px;
}
.four{
background-color: #ee00ff;
margin-left: 60px;
}
.div1{
margin-bottom: 30px;
}
.div2{
margin-top: 20px;
}
</style>
<div class="clear div1">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="clear div2">
<div class="three"></div>
<div class="four"></div>
</div>效果:
子元素外边距塌陷问题
html
<style>
/*
父子级的标签；子元素 margin-top 会将值传递给父元素产生塌陷问题，导致父
级一起向下运动；子元素 margin-bottom 会将值给传递使父元素产生下外边距
*/
.one,.four{ width: 180px;height: 50px;}
.one{ background-color: #0067ff; }
.four{ background-color: #ff0000; }
.two{
background-color: #fdf10d;width: 100px;height: 100px;
margin-top: 20px; /* 导致父元素下拉 */
}
.three{
background-color: #ed0dfd;width: 100px;height: 100px;
margin-bottom: 20px; /* 使父元素产生下外边距 */
}
.fu{
width: 180px;background-color: #00b905;
/* 解决方法：
1.给父元素加边框
2.给父元素设置 overflow: hidden（也能触发BFC）
3.给父元素通过 ::before 或 ::after 添加子元素（推荐）
.clear::after,.clear::before{
content: "";
display: table;
clear: both;
}
4.设置内边距（方法1，方法4会将元素扩大）
*/
/*overflow: hidden;*/
/*border: 1px solid red;*/
/*padding: 10px 0;*/
}
.clear::after,.clear::before{
content: "";
display: table;
clear: both;
}
</style>
<div class="one"></div>
<div class="fu clear">
<div class="two"></div>
<div class="three"></div>
</div>
<div class="four"></div>效果:
border 边框
none：无边框；solid：实线边框，默认；double：双线边框；dashed：虚线边框；dotted：点线边框。允许单独对某一方向的边框线： top bottom left right
html
<style>
body{
display: flex;
}
div{
width: 200px;height: 100px;
margin-left: 20px;
}
div:nth-of-type(1){
border: 10px double #0048ff;
}
div:nth-of-type(2){
border-top: 10px double #ffea00;
border-bottom: 10px dashed #0fa612;
border-left: 10px dotted #ff00dd;
border-right: 10px solid #ff0000;
}
</style>
<div></div>
<div></div>效果:
border-radius 圆角
| 个数 | 说明 | 个数 | 说明 |
|---|---|---|---|
1个值 |
四个角相同 | 2个值 |
左上+右下 左下+右上 |
3个值 |
左上 右上+左下 右下 | 4个值 |
左上 右上 右下 左下 |
html
<style>
body{
display: flex;align-items: center;flex-wrap: wrap;
}
div{
width: 120px;height: 120px;border: 1px solid red;margin: 0 20px 20px 0;
}
div:nth-of-type(1){
border-radius: 30px;
}
div:nth-of-type(2){
border-radius: 50%;
}
div:nth-of-type(3){
width: 150px;height: 70px;
border-radius: 50px;
}
div:nth-of-type(4){
border-radius: 5px 50% 50% 50%;
}
div:nth-of-type(5){
border-radius: 50% 0% 0% 50%;
}
div:nth-of-type(6){
border-radius: 10% 100% 10% 0%;
}
</style>
<div></div><div></div><div></div>
<div></div><div></div><div></div>效果:
box-shadow 阴影
属性值：
x轴偏移量、γ轴偏移量、模糊半径、扩散半径、颜色、内 \ 外阴影。可以设置多个阴影效果，每个阴影效果之间用逗号分隔
html
<style>
div{
width: 100px;height: 100px;border: 1px solid red;margin: 20px;float: left;
}
#div1{
/*
x轴偏移量(必写)
γ轴偏移量(必写)
模糊半径(值越大阴影越模糊)
扩散半径(阴影的半径大小，值越大阴影越大)
颜色
内外阴影(外阴影默认；内阴影inset，而且扩散半径数值越大阴影往内扩散越大，直到铺满盒子)
*/
box-shadow: 10px -10px 5px 2px red;
}
#div2{
box-shadow: -10px 10px 5px 2px #46b5ff;
}
#div3{
box-shadow: -10px -10px 20px 2px #ffda4a inset;
}
#div4{
box-shadow: 10px 10px 5px 2px #67ff38 inset;
}
#div5{
box-shadow: -10px 5px 8px 30px #b3ff07 inset;
}
#div6{
box-shadow: -10px 5px 8px 20px #ffb8f3;
}
#div7{
box-shadow: 10px 5px 8px 7px #6fffe5,
25px 5px 8px 15px #db8fff;
}
</style>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>效果:
overflow 溢出
html
<style>
div{
width: 200px;height: 200px;border: 1px solid red;
/*
visible：默认值 hidden：溢出隐藏（有清除浮动、清除margin-top塌陷的功能）
scroll：溢出滚动（无论是否溢出，均显示滚动条位置） auto：溢出滚动（溢出才显示滚动条位置）
*/
overflow-y: scroll;
}
</style>
<div>
<h6>文字1</h6>
<h6>文字2</h6>
<h6>文字3</h6>
<h6>文字4</h6>
<h6>文字5</h6>
<h6>文字6</h6>
</div>效果:
float 浮动 ( 父元素塌陷问题 )
left：左对齐，right：右对齐。浮动元素会脱离标准流(脱标)，不再保留原先的位置。浮动的元素会具有行内块元素的特性，此时不会有行内块元素间隙问题。浮动元素一行显示且顶端对齐排列，超出父级宽度就换行。父元素一般不设置高度而由内容决定，内容浮动后就会造成塌陷问题
html
<style>
.one div{
width: 100px;height: 100px;
float: left;
/*
1.给塌陷的父元素最后添加一个没有意义的儿子元素（不推荐）
.clearDiv{ clear: both; }
2.给父元素设置overflow: hidden，能够解决因为触发了BFC（BFC是一种块
级格式化文档，是一种网页的隐藏格式，默认渲染页面是不会触发）
3.谁塌陷就给谁加 class="clear"（推荐）
*/
}
.clear::after{
content: "";
display: block;
clear: both;
}
.one{
overflow: hidden;
}
.one div:nth-of-type(1){ background-color: #0fa612;}
.one div:nth-of-type(2){ background-color: #ffec00;}
.one div:nth-of-type(3){ background-color: #145eff;}
.one div:nth-of-type(4){ background-color: #d655ff;}
</style>
<div class="one clear">
<div>块1</div>
<div>块2</div>
<div>块3</div>
<div>块4</div>
</div>效果:
