[Web 前端] 014 css 盒子模型

最新推荐文章于 2024-09-18 17:34:39 发布

weixin_30659829

最新推荐文章于 2024-09-18 17:34:39 发布

阅读量72

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/yorkyu/p/10801929.html

版权

1. 简介

元素在页面中显示成一个方块，类似一个盒子
把元素叫做盒子，设置对应的样式分别为
- 盒子的边框(border)
- 盒子内的内容和边框之间的间距(padding)
- 盒子与盒子之间的间距(margin)

盒子真实尺寸
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

2. 增大内容和边框的距离但不改变盒子的尺寸的方法

box-sizing：content-box | border-box

3. 少废话，上例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
    </head>
    <body>
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
    </body>
</html>

*{
    width: 100px;
    height: 100px;
}
.box1{
    background: #a7ab86;
    border: 10px solid;
    padding: 20px;
}
.box2, .box3, .box4{
    background: #b8d3ca;
}
.box3{
    padding: 20px;
    box-sizing: border-box; /* 改变间距但不改变盒子大小 */
}
.box4{
    padding: 20px;
    border: 10px solid red;
    box-sizing: border-box;
}