CSS盒子模型

内边距

padding:10px 20px 30px 40px

• 1个值：四个方向一样

• 2个值：上下，左右

• 3个值：上，左右，下

• 4个值：上，右，下，左

• padding方向：top，bottom，right，left

边框（可设置各个方向不一样）border	样式
solid	实线
double	双实线
dashed	虚线
dotted	点线

• 背景色可蔓延到边框

border属性	说明
border-width	10px 20px 30px 40px
border-color	yellow
border-style	solid double dashed dotted

 

外边距 margin

• 和内边距一样可以设置四个方向
• 背景色不能蔓延到外边距
• 外边距支持负值
• margin：0 auto  表示屏幕居中
• 兄弟关系的盒子外边距：垂直方向取最大值；水平方向会进行合并处理
• 父子关系的盒子外边距不产生奇怪东西的方法

  子margin-top===父的padding-top，需要注意高度计算

  给父盒子设置边框

  加浮动

  overflow：hidden