盒子模型

Posted 2020-11-15 zhanghaifeng123

盒子模型是由内容、边框、间隙（padding）、间隔（margin）组成

w3c标准盒子模型:盒子的宽度=左右margin+左右padding+width+border

盒子的高度=上下margin+上下padding+height+border

IE盒子模型：margin+border+padding

border

border是元素的边框，border有三个主要属性，color（颜色）、width（粗细）和style（样式）。

1、color主要是指定border的颜色，比如红色是“#FF0000”，red，rgb(255,0,0)三种方式。

2、width是border粗细程度，可以设置为thin、thick和length，length为具体数值，比如说border:1px #CCC solid;其中1px指的是border的width，默认值是medium，一般浏览器解析为2像素。

3、style属性可以设为none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等，其中none和hodden是不显示border，hidden可以用来解决边框的冲突问题。对于groove、inset、outset、rigde、border-style，IE会出现兼容问题。

margin

margin用于控制块与块（可以理解成块级元素）之间的距离。为了便于理解可以把盒子模型想象成一幅画，content是画本身，padding是画与画框的留白，border是画框，margin是画与画之间距离。需要注意的是IE和firefox在处理margin时有一些差别，倘若设定了父元素的高度height值，如果此时子元素的高度超过了父元素的height值，二则显示结果完全不同，IE浏览器会自动扩大。

margin的值可以写成  例如:margin 10px(上下左右的值都为10); margin 10px 20px（上下的值10，左右的值为20）; margin 10px 20px 30px（上的值为10，右为20，下为30，左为20）; margin 10px 20px 30px 40px;（上下左右分别为10 20 30 40）

padding

padding用于控制content与border之间的距离，设置的方式和margin的一样