盒子模型

作者: coderST | 来源:发表于2018-01-22 19:54 被阅读8次

面试题（DAT）
【IMWeb秋招训练营】【Day1】面试题总结
CSS盒子模型
前端面试之HTML+CSS（八股文）
css基础问题
CSS盒模型概述
CSS 盒子模型
CSS
js笔记五十一之js盒子模型
笔记：两种盒子模型——ie 盒子模型和标准 w3c 盒子模型。

边框属性

什么边框?
边框就是环绕在标签宽度和高度周围的线条
边框属性的格式
连写(同时设置四条边)
border: 边框的宽度边框的样式边框的颜色;
示例代码

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 5px solid blue;
            /*border: 5px solid;*/
            /*border: 5px blue;*/
            /*border: solid blue;*/
        }
</style>

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border-top:5px solid blue;
            border-right:10px dashed green;
            border-bottom:15px dotted purple;
            border-left:20px double pink;
        }
</style>

<style>
        .box{
            width: 500px;
            height: 500px;
            background-color: red;
            border-width: 5px 10px 15px 20px;
            border-style: solid dashed dotted double;
            border-color: blue green purple pink;
            /*border-color: blue green purple;*/
            /*border-color: blue green;*/
            /*border-color: blue;*/
        }
</style>

注意点:

这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右

内边距属性

什么是内边距?
边框和内容之间的距离就是内边距
格式
单独设置四条边
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
示例代码

<style>
        div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1{
            padding-top: 20px;
            padding-right:40px;
            padding-bottom:80px;
            padding-left:160px;
       }
</style>

同时设置四条边
padding: 上右下左;
示例代码

<style>
        div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1{
            /*padding:20px 40px 80px 160px;*/
            /*padding:20px 40px 80px;*/
            /*padding:20px 40px;*/
            padding:20px;
        }
</style>

外边距属性

什么是外边距?
标签和标签之间的距离就是外边距
格式
单独设置四条边
- margin-top: ;
- margin-right: ;
- margin-bottom: ;
- margin-left: ;
示例代码

<style>
  .box1{
            margin-top:20px;
            margin-right:40px;
            margin-bottom:80px;
            margin-left:160px;
        }
</style>

注意点:
- 外边距的那一部分是没有背景颜色的
- 外边距合并现象
- 默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距合并现象</title>
    <style>
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        div{
            height: 100px;
            border: 1px solid #000;
        }
        .hezi1{
            margin-right:50px;
        }
        .hezi2{
            margin-left:100px;
        }
        .box1{
            margin-bottom:50px;
        }
        .box2{
            margin-top:100px;
        }
    </style>
</head>
<body>
<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>