盒模型

盒模型是网页的基石，在使用CSS进行网页布局时，我们一定离不开的一个东西————盒模型，一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。盒子模型对应的CSS属性为:width，height，padding，border，margin。

盒样式--border

border:宽度风格颜色; border也可以同时设置四个边框的宽度：border：1px 2px 3px 4px 有4个值时为上右下左有3个值时为上左右下有2个值时为上下左右有1个值时为四周边框边框宽度：border-width 边框颜色：border-color 边框样式：border-style:sold(实线)/dashed(虚线)/dotted(点状)/double(双线) 可单独设置一边：border-left/right/bottom/top 例子：用css实现三角形

    <style>
        div{
            width: 0px;
            height: 0px;
            border-left: 10px solid transparent;
            border-top: 10px solid blue;
            border-right: 10px solid transparent;
        }
    </style>
	<body>
    	<div> </div>
	</body>

盒子样式-padding

1）padding长在盒子的外面，会把盒子撑大 2）作用：控制子元素在父元素中的位置 3）如果想让盒子保持原有的大小：在宽高基础上减掉。如果元素没有设置宽高，则不需要减 4）给单一方向添加padding：padding-top/bottom/left/right 5）padding的设置特点： padding:30px; 四周 padding:10px 30px; 上下左右 padding:10px 30px 50px 上左右下 padding:10px 30px 50px 100px 上右下左 6）注意：padding不会对背景图的位置造成影响。 padding不能设置负值不会对背景图造成影响

盒子样式-margin

1）margin长在元素之外，不会撑大元素的大小 2）margin控制的是同级元素之间的位置关系 3）给单一方向添加margin语法：margin-top/right/bottom/left 4) margin设置方法： margin:30px; 四周 margin:10px 30px; 上下左右 margin:10px 30px 50px 上左右下 margin:10px 30px 50px 100px 上右下左 5）margin：0 auto；让当前元素在父元素左右居中 6）margin常出现的bug： a：两个相邻元素的上下margin值不会叠加，按照较大值显示，左右不会出现这种情况 b：如果父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margin-top；会错误地放在父元素上面，父元素也会向下滑动，通常用padding值设置

盒子的宽高

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right 盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom