盒子模型

发表于

CSS 盒子模型(Box Model)

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

下面的图片说明了盒子模型(Box Model)
css盒子模型

不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
为了在所有浏览器中的元素的宽度和高度设置正确的话，你需要知道的盒模型是如何工作的。

盒子模型-边框border

1
2
3
4
5
border-top-style:  solid   实线
                   dotted  点线
                   dashed  虚线
border-top-color   边框颜色
border-top-width   边框粗细
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box{
        width: 300px;
        height: 390px;
        background: #999;
        /*border-top-style: solid;     /*线型*/
        /*border-top-color: red; */    /*边框颜色*/
        /*border-top-width: 5px;*/

        /*边框属性连写, 特点：没有顺序要求,线型为必写项*/
        /*border-top: red solid 5px;*/       

        /*四个边框值相同的写法, 特点:没有顺序要求，线型为必写项*/
        /*border:12px solid red;*/
        border-left: 5px dashed green;
        border-right: 12px dotted pink;
    }
    </style>
</head>
<body>
    <div class="box">盒子模型</div>
</body>
</html>

盒子模型-边框合并 border-collapse:collapse

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    table{
        width: 300px;
        height: 100px;
        border:1px solid red;
        border-collapse:collapse;
    }
    td{
        border:1px solid red;
    }
    </style>
</head>
<body>
    <table cellspacing="0">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

盒子模型-获取焦点(:focus 获取鼠标光标状态)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!-- 表单控件 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .username {
        border: 0 none;
        /*去掉边框*/
        outline-style: none;
        /*去掉轮廓线*/
        background: #ccc;
        border: 1px dashed green;
    }
    
    .username:focus {
        background: red;
    }
    
    .email {
        border: 0 none;
        outline-style: none;
        border-bottom: 1px dotted red;
    }
    
    .search {
        border: 0 none;
        border: 1px solid #999;
        background: url("../01/search.png") no-repeat right;
    }
    </style>
</head>

<body>
    <label for="username">用户名:</label>
    <input type="text" class="username" id="username">
    <br>
    <br> 邮箱:
    <input type="text" class="email">
    <br>
    <br> 搜索一下:
    <input type="text" class="search">
</body>

</html>

盒子模型-内边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            /*padding-left:20px; 
            padding-right:30px;
            padding-top:40px;
            padding-bottom: 50px;*/
            padding:20px 30px 40px 50px; /*上20px 右30px  下40px  左  50px*/
            width: 300px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box">盒子模型</div>
</body>
</html>

内边距撑大盒子的问题(内边距只会撑大盒子,不会改变盒子的位置)

影响盒子宽度的因素:
内边距影响盒子的宽度
边框影响盒子的宽度
盒子的宽度=定义的宽度(Content的宽度)+边框宽度+左右内边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 150px;
            background: pink;
            padding: 75px 100px;
        }
        .smallbox{
            width:300px;
            height: 150px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="smallbox"></div>
    </div>
</body>
</html>

继承的盒子一般不会被撑大

包含（嵌套）的盒子A，如果子盒子B没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子A。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .father{
            width: 300px;
            height: 200px;
            background: #ccc;
        }
        .son{
            padding: 10px 0;
            background: green;  
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

导航案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .nav{
            height: 40px;
            background: #eee;
            border-top:3px solid orange;
            border-bottom: 1px solid #aaa;
        }
        .nav-con{
            width: 1000px;
            height: 40px;
            margin: 0 auto;  /*盒子水平居中*/
        }
        a{
            font: 12px/40px 微软雅黑;
            line-height: 40px;
            color: #333;
            display: inline-block;
            height: 40px;
            text-decoration: none;
            padding:0 12px;
        }
        a:hover{
            background: #999;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="nav-con">
            <a href="#">设为首页</a>
            <a href="#">手机新浪网</a>
            <a href="#">移动客户端</a>
        </div>
    </div>
</body>
</html>

盒子模型-外边距

用法与padding一样，margin对盒子宽度不会有影响

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            width:300px;
            height: 300px;
            background: #eee;
            margin-left: 20px;
            margin-right: 30px;
            margin-top: 40px;
            margin-bottom: 50px;
            /*外边距连写*/
            margin:20px 30px 40px 50px;

        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

margin之边框合并

外边距合并（叠加）是一个相当简单的概念。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
css-margin

边距合并问题只发生在块级元素之间

垂直方向外边距合并

两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。

嵌套的盒子外边距塌陷

A盒子里面嵌套B盒子,修改B盒子的margin-top会影响A盒子的margin-top.
解决方法:
1.给父盒子设置边框 –> 不推荐使用.
2.给父盒子overflow:hidden; bfc –> 格式化上下文

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .father{
            width: 500px;
            height: 300px;
            background: #b9b8bb;
            /*border: 1px solid #baa8ec;*/
            overflow: hidden;
        }
        .son{
            width: 100px;
            height: 100px;
            background: red;
            margin-top:50px;
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>
</html>

行内元素 关于padding 和margin 问题

行内元素不要给上下的margin 和padding;
上下margin和padding会被忽略;
左右margin和padding会起作用.

坚持原创技术分享，您的支持将鼓励我继续创作！