css盒子模型
2018-08-27 本文已影响0人
仆歌
什么是盒子模型？
image
盒子模型的主要构成有：
由内到外：content -> padding -> border -> （background-image 和background-color）->margin
盒子模型的层次：
- 第一层：border
- 第二层：content + padding
- 第三层：background-image
- 第四层：background-color
- 第五层：margin
盒子的内容
- width
- height
内边距 padding
- padding
- padding-top
- padding-right
- padding-bottom
- padding-left
边框 border
根据四个方向 上 右 下 左
- border-top
- border-right
- border-bottom
- border-left
border的三要素：
- 边框颜色 border-color
- 边框粗细 border-width
- thin
- medium
- thick
- 像素值（px）
- 边框样式 border-style
- none
- hidden
- dotted
- dashed
- solid
- double
- ...
border简写
/*样式 粗细 颜色*/
border: solid 20px blue;
边框总结
边框样式定义方式
- 综合方式
- 按三要素拆分实现
- 按方向拆分实现
外边距 margin
根据四个方向 上 右 下 左
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
默认边距的处理
- 常用的html标签具有内外边距，开发之前会统一清除
- 建议不要使用*，针对具体的标签设置
盒子模型实际尺寸的计算
image
