盒模型

盒模型概述

盒子的分类

不同的元素产生的盒子类型可能不同

一个盒子，产生什么样的盒子，取决于它的css的display属性

属性：dispaly

是否继承：否

默认值：inline

display：none 不产生盒子
display：inline 行盒
display：block 块盒
display：其他属性

盒子的组成

包含内容：content（内容）、padding（内边距）、border（边框）、margin（外边距）

padding的取值

padding：10px；
方向：上、下、左、右
padding：10px 20px；
方向：上下、左右
padding：10px 20px 30px；
方向：上、左右、下
padding：10px 20px 30px 40px
方向：上、右、下、左

padding的值与margin的值一样

boder的格式

边框的样式

solid 实线 dashed 虚线 double 双实线 dotted 点线

border-方向-style  边框样式
border-方向-color  边框颜色
border-方向-width  边框粗细

border的边框默认颜色

如果没有设置border-color，那么边框将取元素内容的前景色，也就是文本的颜色，即color属性对应的颜色

border的边框粗细默认是3px（双实线）

<!--扩展-->
圆角边框
border-radius：10px
boder-radiu：10px 20px
左上/右下 左下/右上