CSS笔记之盒子模型

盒子模型

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛放内容的容器。
CSS盒子模型本质上就是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距以及内容。

边框border：
border可以设置元素的边框。边框由三部分组成：边框粗细、边框样式、边框颜色。
border-width：定义边框粗细。单位一般为px。
border-style：定义边框样式。常用参数：solid实线边框，dashed虚线边框，dotted点线边框。
border-color：定义边框颜色。
边框简写格式:
border：边框粗细 边框样式 边框颜色。顺序可以改变。
举例说明：border：1px solid red;
border-collapse：将相邻边框进行合并。
border-radius：将边框设置为圆形边框，radius时半径的意思。 radius可以设置精确数值，也可以设置百分比，也可以给四个角分别赋值。
正圆盒子：可以先设置一个正方形，再将半径设置为正方形盒子宽的一半。
圆角矩形：将半径设置为高度的一半即可实现。

内边距padding：
可以具体指定上下左右的内边距距离。
分别是padding-top、bottom、left、right。
内边距简写格式：
如果我们先设置了盒子的大小，增加内边距则会撑大盒子，我们可以减小预先设置的盒子大小来解决这个问题。

外边距margin:
大致的使用方法于内边距类似，可以设置上下左右的外边距。
同时，简写方式与内边距一样。

应用：外边距可以使块级盒子水平居中，但是必须满足两个条件：
1.盒子必须指定了宽度。
2.盒子的左右外边距都设置为auto。
行内元素或者行内块元素设置居中对齐只需对其父元素进行text-align：center的设置即可。

外边距合并问题：
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
对于两个嵌套关系的块元素，父元素上有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方法：
1.给父元素定义边框。
2.为父元素定义内边距。
3.为父元素添加overflow:hidden。

清除内外边距：
网页元素一般都有默认的内外边距，同时不同的浏览器默认也不一致。所以我们需要在进行网页布局前，先进行对网页元素内外边距的清除。
语法格式如下：

* {
padding: 0;
margin: 0;
}

注：行内元素为了兼顾兼容性，尽量只设置左右内外边距，不用再设置上下内外边距了。

盒子阴影：
我们可以使用box-shadow来设置盒子阴影。

注：默认的使用外阴影，但是不可以在属性中写入outset，不会起作用的。盒子阴影不占用空间，不会影响其他盒子排列。

当我们需要在鼠标经过时设置阴影的效果呢？
这时我们可以用div:hover来设置，与链接的方式一致。 任何盒子都可以设置成这样的效果。