# 盒子模型

# 表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框

语法 :

1

border-collapse: collaspe;

• collapse 单词是合并的意思
• border-collapse: collapse; 表示相邻边框合并在一起

# 内边距 padding

• 如果盒子本身没有指定 width/height 属性，则此时 padding 不会撑开盒子大小

# 外边距 margin

如果嵌套盒子对同一个方向都有 margin, 那么取最大值，且盒子都会一起塌陷

而我们想要的效果是 :

子盒子相对父盒子的 margin, 这时，我们的解决方法有 :

• 可以为父元素定义上边框
• 可以为父元素定义上内边距
• 可以为父元素添加 overflow:hidden

# 盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影

语法 :

1

box-shadow: h-shadow v-shadow blur spread color inset;

# 文字阴影

在 CSS3 中，我们可以使用 text-shadow 属性来将阴影应用于文本

语法 :

1

text-shadow: h-shadow v-shadow blur color;