前端学习 -- Css -- 盒子模式

框模型：

CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。
为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。
我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

一个盒子我们会分成几个部分：
– 内容区(content)上图的element区域
– 内边距(padding)
– 边框(border)
– 外边距(margin)

内容区

内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。
如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。
通过width和height两个属性可以设置内容区的大小。
width和height属性只适用于块元素。

内边距

顾名思义，内边距指的就是元素内容区与边框以内的空间。
默认情况下width和height不包含padding的大小。
使用padding属性来设置元素的内边距。
例如：
padding:10px 20px 30px 40px
这样会设置元素的上、右、下、左四个方向的内边距。

padding:10px 20px 30px;
– 分别指定上、左右、下四个方向的内边距
padding:10px 20px;
– 分别指定上下、左右四个方向的内边距
padding:10px;
– 同时指定上左右下四个方向的内边距
同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距。

内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,
盒子的大小由内容区、内边距和边框共同决定
盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
可见宽的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width

边框

可以在元素周围创建边框，边框是元素可见框的最外部。
可以使用border属性来设置盒子的边框：
– border:1px red solid;
– 上边的样式分别指定了边框的宽度、颜色和样式。
也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。
和padding一样，默认width和height并包括边框的宽度。

边框的样式

边框可以设置多种样式：
– none（没有边框）
– dotted（点线）
– dashed（虚线）
– solid（实线）
– double（双线）
– groove（槽线）
– ridge（脊线）
– inset（凹边）
– outset（凸边）

外边距

外边距是元素边框与周围元素相距的空间。
使用margin属性可以设置外边距。
用法和padding类似，同样也提供了四个方向的margin-top/right/bottom/left。
当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使元素居中。

举个例子：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .box{

                width: 200px;

                height: 200px;

                background-color: cadetblue;

                border-width:10px 20px 30px 40px ;

                border-style: solid dotted dashed double;

                border-color: red yellow orange blue;

            }

        </style>

    </head>

    <body>

        <div class="box"></div>

    </body>

</html>

效果：

示例代码可以看：https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson12.html

具体可以看下运行效果

内边距demo:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .box {

                width: 200px;

                height: 200px;

                background-color: cadetblue;

                border-width: 10px;

                border-style: solid;

                border-color: red;

                padding: 10px 20px 30px 40px;

            }

            .box1 {

                width: 100%;

                height: 100%;

                background-color: yellow;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <div class="box1"></div>

        </div>

    </body>

</html>

看下效果：

代码见：https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson13.html

具体可以看下运行效果

外边距demo:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .box {

                width: 200px;

                height: 200px;

                background-color: cadetblue;

                margin-top: 100px;

                margin-left: 100px;

            }

            .box1 {

                width: 100%;

                height: 100%;

                background-color: yellow;

            }

            .box2 {

                width: 200px;

                height: 200px;

                background-color: green;

                margin-left: -100px;

            }

            .box3 {

                width: 200px;

                height: 200px;

                background-color: red;

                margin-left: auto;

                margin-right: auto;

            }

            .box4 {

                width: 200px;

                height: 200px;

                background-color: blue;

                margin: 50px;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <div class="box1"></div>

        </div>

        <div class="box2"></div>

        <div class="box3"></div>

        <div class="box4"></div>

    </body>

</html>

看下效果：

代码见：https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson14.html

具体可以看下运行效果

垂直外边距的重叠

- 在网页中相邻的垂直方向的外边距会发生外边距的重叠;所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和,如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。（经过测试，貌似第二条不对，也是取得父子元素中最大值）

例子：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            /**

             * box1距离box2距离取最大值 150

             */

            .box1{

                width: 100px;

                height: 100px;

                background-color: red;

                margin-bottom: 150px;

            }

            .box2{

                width: 100px;

                height: 100px;

                background-color: green;

                margin-top: 100px;

            }

            /**

             * 父子元素

             * box4子元素

             * box3父元素

             * box4元素的外边距设置给父元素box3

             */

            .box3{

                width: 200px;

                height: 100px;

                background-color: yellow;

                margin-top: 200px;

            }

            .box4{

                width: 100px;

                height: 100px;

                background-color: yellowgreen;

                margin-top: 100px;

            }

        </style>

    </head>

    <body>

        <div class="box3">

            <div class="box4"></div>

        </div>

        <div class="box1"></div>

        <div class="box2"></div>

    </body>

</html>

效果：