前端基础学习专辑

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

2017-04-27  本文已影响20人  Rella7

盒子模型

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

在CSS中,这些矩形盒子用 标准盒模型 来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界:外边距边界margin edge, 边框边界border edge, 内边距边界padding edge 与 内容边界content edge。

盒子模型.png

盒子尺寸计算_默认状态

box-sizing属性

box-sizing 属性用来改变默认的 CSS 盒模型 对元素宽高的计算方式

<!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{
    height:100px;
    border:1px solid #0094f;
}

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

html{
            border:1px solid orange;
            height: 100%;
    }
body{
            height: 100%;
            border:1px solid #0094ff;
    }
上一篇 下一篇

猜你喜欢

热点阅读