四.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