CSS3之盒子模型和body高度问题

盒子模型

文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小，属性——比如它的颜色、背景、边框方面——及这些盒子的位置。

在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:
  - 修改为该值以后盒子的尺寸直接就是宽度跟高度

测试代码:

<!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;
    }

CSS3之盒子模型和body高度问题

盒子模型

盒子尺寸计算_默认状态

box-sizing属性

body高度问题

body的高度

设置跟浏览器显示区域高度一致

推荐阅读更多精彩内容

`box-sizing`属性