css盒子模型

盒子模型：

先上谷歌浏览器控制台里的盒子模型图：

应该很明显了，从外而内分别是margin（外边距）、border（边框）、内边距（padding）和内容（heigth&width）。

盒子模型有css标准模型（即上述模型）和IE盒子模型，两者不同之处就在于IE盒子模型的内容区域等于标准模型的内容区域+padding+border。在CSS中可以通过box-sizing来设置使用哪种模型，content-box对应标准盒子模型，border-box对应IE盒子模型。

document和body的margin：

整个网页里最大的盒子是<doucument>，<body>默认margin为8个像素。

padding：

设置backgroud-color的时候，绘制的是内容区域+padding区域。

padding写法有两种：

分开写：

padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;

综合写：

padding:10px,20px,30px,40px;  /*上右下左*/
padding:10px,20px,30px;       /*上10px，左右20px，下30px*/
padding:10px,20px;            /*上下10px，左右20px*/
padding:10px;                 /*上右下左全为10px*

当两种写法都有比如：

padding:10px;
padding-top:20px;

这时候的盒子模型：

而这么写：

padding-top:10px;
padding:20px;

这时候的盒子模型：

所以后写的属性会覆盖之前的属性，所以一般的写法是先写综合属性，再写小属性来微调。

有些元素，会默认带padding，比如大家用之前都喜欢清除它的padding的<ul>。

border:

border有三个属性：粗细、线型、颜色。

颜色可以不写，默认是黑色，但是其它两个属性不写，框就出不来了。

主要线型在谷歌浏览器中为以下效果：

但如果想实现比较炫酷的效果还是会用图片作为边框。

border也是个综合属性，综合的写也是上右下左的顺序。

它还可以按两个维度拆分成小属性：

按要素拆：border-width、border－style、border-color；
按方向拆：border-top、border-right、border-bottom、border-left；

并且，按要素拆分的小属性可以继续按方向拆分，作为综合写法时顺序也为上右下左：

            border-width: 10px 20px;
            /*上下10px，左右20px*/
            border-style: solid double groove ridge;
            /*上solid，右double,下groove，左ridge*/
            border-color: rgb(221, 140, 140) grey rgb(134, 134, 218);
            /*上红，左右灰，下蓝*/

效果图：

当然，你也可以拆分到最底层来控制：

    border-top-width:10px;
    border-top-style:solid;
    border-top-color:red;
    border-right-width:10px;
    border-right-style:solid;
    border-right-color:red;
    border-bottom-width:10px;
    border-bottom-style:solid;
    border-bottom-color:red;
    border-left-width:10px;
    border-left-style:solid;
    border-left-color:red;

现在就综合边框来画个抽象艺术派锦旗：

index.html:

...
    <div id="triangle">
        <p>css盒子毕业之证</p>
    </div>
...

index.css:

        #triangle{
            width:0px;
            height:0px;
            border:15px solid rgb(236, 236, 160);
            border-top:none;
            border-bottom-color: white;
            padding: 20px;
            margin: 30px;
        }
        p{
            margin-left: -20px;
            margin-top: -20px;
            background: rgb(236, 106, 106);
            width: 40px;
        }

posted @ 2018-11-08 11:15 BeeAndFlower 阅读(146) 评论(0) 收藏举报

刷新页面返回顶部

BeeAndFlower

css盒子模型

盒子模型：

document和body的margin：

padding：

border:

公告