CSS-盒子模型

下面这个图很好的解释了两种盒子模型。

image.png

　可以看到，在设置width的时候，标准的盒子模型是不包括border和padding的，而在IE浏览器中是包括这两项的。

border

border:width style color
style属性
none 没有边框
solid 边框为实线
dashed 边框为虚线
dotted 边框为点线
double 边框为双实线
表格的细线边框合并：border-collapse:collapse
圆角边框（CSS3）：border-radius:左上角 右上角 右下角 左下角

padding

可以分开设置：padding-left padding-top padding-right padding-bottom
也可以放在一起设置：padding:10px 20px 30px 40px;
顺序为↑→↓←
如果设置1个值，表示四个方向是同一个值
如果设置两个值，表示上下 右左
如果设置三个值，表示上 右左 下

margin

设置方法和padding相同，可以分开设置也可以放在一起设置。
行内元素只有左右外边距，没有上下外边距。在ie6等低版本中是没有内边距的。
外边距可以实现盒子居中，必须满足两个条件：
1． 必须是块级元素
2． 盒子必须指定宽度
然后设置左右外边距为auto，就可以实现水平居中
清除元素默认内外边距
padding: 0;
margin: 0;
外边距合并
场景一：
　使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。当上下相邻的两个块元素相遇时，如果上面的元素有margin-bottom，下面的元素有margin-top，则他们之间的垂直间距不是margin-bottom和margin-top的和，而是取两者中的较大的值作为两个元素的边距，这种现象称为相邻块元素垂直外边距的合并。
解决方法：
避免！（如此羞涩的解决方案）
场景二：
　对于两个嵌套关系的块元素，如果父元素没有padding-top和border，则父元素的margin-top会与子元素的margin-top发生合并，合并后的外边距为两者中的较大者。
解决方法：
1． 为父元素设定1px的border或padding-top
2． 为父元素添加overflow:hidden

注意事项

1． 宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（img和input除外）
2． 计算盒子模型的总高度时，应考虑上下两个盒子垂直外边距合并的情况
3． 如果是一个盒子没有给定宽度或高度或继承父类的宽度或高度，则padding不会影响本盒子的大小。

      
啦啦啦

#p{
    background-color: pink; 
    width: 200px;
    height: 200px;
    margin-top: 100px;
    border: 1px red solid;
}

#s{
    background-color: blue;
    /* width: 100px;
    height: 100px; */
    /* margin: 30px; */
    padding:20px;
}

设置前

image.png

设置后

image.png

中间蓝色没有设置宽高，设置了padding后并没有撑大宽度

CSS3盒子

可变的盒子

box-sizing:content-box padding和border都会撑开盒子，改变盒子的宽度高度
box-sizing:border-box padding和border都不会撑开盒子，不会改变盒子的宽度，盒子的内容会相应缩小

content-box
border-box

#content {
    width: 100px;
    height: 100px;
    background-color: pink;
    padding: 20px;
    border: 10px red solid;
    box-sizing: content-box;
}

#border {
    width: 100px;
    height: 100px;
    background-color: purple;
    padding: 20px;
    border: 10px red solid;
    box-sizing: border-box;
}

image.png

盒子阴影

box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色 内/外阴影
h-shadow 必选，水平阴影的位置，允许负值
v-shadow 必选，垂直阴影的位置，允许负值
blur 可选，模糊距离
spread 可选，阴影的尺寸（影子大小）
color 可选，阴影的颜色
inset 可选，将外部阴影改为内部阴影（外阴影为默认属性，不需要写，没有outset属性）