盒子模型
文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小，属性——比如它的颜色、背景、边框方面——及这些盒子的位置。
在CSS中，这些矩形盒子用 标准盒模型 来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界margin edge, 边框边界border edge, 内边距边界padding edge 与 内容边界content edge。
盒子模型.png
盒子尺寸计算_默认状态
-
盒子width:
- width + border*2 + 左右padding
- 虽然这样计算盒子的大小逻辑并不复杂,但是如果想要元素精确的是多少px需要修改的值较多
box-sizing属性
box-sizing 属性用来改变默认的 CSS 盒模型 对元素宽高的计算方式
- 属性取值:
- content-box:
- 默认的取值就是
content-box
- 默认的取值就是
- border-box:
- 修改为该值以后盒子的尺寸直接就是
宽度跟高度
- 修改为该值以后盒子的尺寸直接就是
- content-box:
- 测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div{
width: 200px;
height: 200px;
background-color: coral;
}
.top {
border: 10px solid #0094ff;
padding: 20px;
margin:20px;
box-sizing: content-box;
}
.second{
border: 10px solid #0094ff;
padding: 20px;
margin:20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="top">top盒子
</div>
<div class="second">second盒子</div>
</body>
</html>
- 运行效果:
盒子模型预览.png
body高度问题
body标签其实是一个盒子,但是我们一般很少直接使用它
body的高度
-
注意:
- 当我们设置了
body的背景颜色时,整个页面都有效果 - 但是当我们为其添加了
border属性时,会发现他其实是根据内容改变的大小 - 这是因为浏览器的开发厂商 为了设置背景色建议 , 背景色设置给body 那么 就会全屏应用,但是 body的 高度 并没有发生改变
- 当我们设置了
-
body高度设置:
-
body的本质就是一个div - 可以直接通过
height设置他的高度 - 默认是 没有高度的,他是被子元素 撑大的,所以会根据内容变高
-
示例代码
body{
height:100px;
border:1px solid #0094f;
}
设置跟浏览器显示区域高度一致
-
百分比高度
- 如果父盒子有高度,我们可以设置
height属性为100%实现跟父盒子高度一致 - 如果直接设置
body的高度为100%是没有效果的
- 如果父盒子有高度,我们可以设置
-
html标签高度
- 如果设置了
html的边框,我们发现其实他是套在body外部的一个盒子,所以如果想要全屏显示 我们可以设置html标签的高度为100%
- 如果设置了
示例代码:
html{
border:1px solid orange;
height: 100%;
}
body{
height: 100%;
border:1px solid #0094ff;
}
