CSS 盒子模型（重点）

1、组成

• border：边框
• content：内容
• padding：内边距
• margin：外边框
  

２、border

属性：border-width、border-style、border-color
简写：border:1px solid red; ※
注意：边框在盒子外部，会影响盒子的大小
合并相邻边框：border-collapse:collapse

3、content

内容：可以放文字，也可以放盒子

4、padding

内边距：边框与内容的距离
属性：padding-left、padding-right、padding-top、padding-bottom

属性简写（复合写法）：
padding:10px; //上下左右都有10像素内边距
padding:10px 20px; //上下10像素，左右20px
padding:10px 20px 30px; //上10像素，左右20像素，下30像素
padding:10px 10px 10px 10px; //上右下左顺时针

注意：会将盒子撑大，影响盒子大小 ※
好处：盒子内字数不同，用padding可以很好的控制盒子大小与字体间隔，设置导航栏就非常合适。

5、margin

外边框：盒子和盒子间距离
属性：margin-left、margin-right、margin-top、margin-bottom
属性简写（复合写法）：同padding

典型应用：
※　块级盒子水平居中（margin:0 auto;）
※　行内元素或行内块元素水平居中方法，给其父元素添加 text-align:center 即可。

6、外边距合并问题（上下） ※

6.1 相邻块元素垂直外边距合并（上下兄弟）
例：
上盒子：margin-bottom:100px;
下盒子：margin-top:200px;
现象：两个盒子间隔并不是300px，而是200px，这种现象称之为外间距合并问题。（取较大值）

解决方案：尽量只给一个盒子定义外边距。

6.2 嵌套块元素垂直外边框的塌陷（父子）
例：
子盒子：margin-top:100px;
现象：父盒子并没添加 margin-top 属性，父元素却会与子元素一同 margin-top:100px。

解决方案：
1）父元素指定上边框：border:1px solid transparent;（透明）
2）父元素定义上内边距：padding:1px;
3）父元素添加：overflow:hidden
4）浮动
5）固定
6）绝对定位

7、圆角边框（CSS3 ※）

语法：border-radius:10px;
圆角矩形：用圆形截取矩形四个角之后，形成圆角矩形。
border-radius: 左上角，右上角，右下角，左下角；//同时设置对个值

做圆：
width:100px; height:200px;
border-radius:50px; // 50%也可以 高度的一半

做心：

.left {
    position: absolute;
    left: 80px;
    width: 100px;
    height: 160px;
    background-color: red;
    border-radius: 100px 100px 0 0;
    transform: rotate(-45deg);
}
.right {
    position: absolute;
    left: 123px;
    width: 100px;
    height: 160px;
    background-color: red;
    border-radius: 100px 100px 0 0;
    transform: rotate(45deg);
}

效果图：

8、盒子阴影（CSS3 ※）

语法：box-shadow:h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影位置。允许为负
v-shadow	必需。垂直阴影位置。允许为负
blur	可选。模糊距离。（虚实）
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅CSS颜色值。
inset	可选。将外部阴影（outset）改为内部阴影。

注意：
1）阴影不占用空间，即对布局没有影响。
2）默认是外阴影（outset），但是不可以写这个单词，否则会导致阴影无效。
相关补充：文字阴影（text-shadow:h-shadow v-shadow blur color）

9、补充

1）清除默认内外编剧
默认内外边距存在原因是，不同浏览器自带默认内外边距，且数值不同。
解决方案： *{padding:0;margin:10;}

2）行内元素不设上下边距
行内元素尽量只设置左右内外边距，上下边距设置也不会有效果。