四.CSS 盒模型（框模型）
CSS盒模型（框模型）
CSS盒模型又称为框模型，它规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
一个标准的盒模型如图所示：
边框
border 为复合属性
常用的边框属性：
border-color: 边框颜色border-top(right|bottom|left): 上(右|下|左)边框属性border-style:边框样式border-width:边框宽度border-top-color:上边框颜色border-top-style:上边框样式border-top-width:上边框宽度border-radius: 设置边框四角的弧度border-top-left-radius: 设置边框左上角的形状。
div{
width: 300px;
height: 300px;
border: lightseagreen 5px solid;
border-color:rgb(79, 119, 240);
border-top-color:lightsalmon;
border-top-style:dotted;
border-radius: 50%;
border-top-left-radius: 20%;
}
边距
外边距 margin为复合属性
外边距常用属性：
margin-top: 设置元素上外边距margin-right: 设置元素右外边距margin-bottom: 设置元素下外边距margin-left: 设置元素左外边距
内边距 padding为复合属性
外边距常用属性：
padding-top: 设置元素上内边距padding-right: 设置元素右内边距padding-bottom: 设置元素下内边距padding-left: 设置元素左内边距
#div1{
border: mediumturquoise 2px solid ;
width: 300px;
height: 300px;
background-color: lightskyblue;
}
#div2{
border: mediumslateblue 2px solid;
width: 200px;
height: 200px;
background-color: lightpink;
margin: 10px 20px 30px 40px;
padding: 5px;
}
#div3{
background-color: mediumvioletred;
width: 100px;
height: 100px;
}
<div id="div1">
<div id="div2">
<div id="div3">
css测试边距
</div>
</div>
</div>
标准盒模型与怪异盒模型
标准盒模型与怪异盒模型又称为W3C标准盒模型与IE标准盒模型，如下面一段代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
background-color: darkblue;
}
#div1{
width: 300px;
height: 300px;
background-color: blueviolet;
border: 20px solid pink;
padding: 5px;
/* box-sizing: border-box; */
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
如上代码，第一行<!DOCTYPE html>中的!DOCTYPE即用来声明HTML的版本，若这部分缺失，在不同的浏览器中，盒模型便会表现出不同的形式，称为怪异模式，其主要出现在IE核的浏览器（ie6及以下版本）中，故怪异盒模型又叫IE标准盒模型。
标准盒模型
由文章一开始的图片，可知一个标准的盒模型中，
一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
即：width = element
如上图，在标准盒模型下，一个块的总宽度为20px+5px+300px+5px+20px=325px
怪异盒模型
如在怪异模式下，一个怪异盒模型中，
一个块的总宽度= width + margin(左右)
即：width = element+padding+border
如上图，在怪异盒模型下，一个块的总宽度为300px,此时由于将padding和border的宽度分给width，故元素本身的大小300px缩小为250px。
标准盒模型与怪异盒模型的切换
盒模型的切换可以通过添加box-sizing:border-box|content-box;进行切换。
box-sizing为 CSS3中新语法
border-box:切换为怪异盒模型
content-box:切换为标准盒模型
以上为本萌新个人总结，如有不当之处望指正，有问题可以联系
邮箱：yuna_03@163.com或
QQ：2635591841
更于2021.1.29
1312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
