4.css盒子模型-第一二章

image.png

宽度属性

宽度：
width：长度值|百分比|auto
最大宽度：
max-width：长度值|百分比|auto
最小宽度：
min-width：长度值|百分比|auto

高度属性

高度：
height：长度值|百分比|auto
最大高度：
max-height：长度值|百分比|auto
最小高度：
min-height：长度值|百分比|auto
注：width和height属性设置对块级元素和替换元素有效

边框属性

• 边框宽度（border-width）
• 边框颜色（border-color）
• 边框样式（border-style）

内边距属性

设置元素的内容与边框之间的距离（内边距或填充），分4个方向（上、右、下、左）

• padding-top: 长度值|百分比
• padding-right: 长度值|百分比
• padding-bottom: 长度值|百分比
• padding-left: 长度值|百分比
  说明：值不能为负值

内边距属性缩写

padding：值1；//4个方向都为值1
padding：值1 值2；//上下=值1，左右=值2
padding：值1 值2 值3；//上=值1，左右=值2，下=值3
padding：值1 值2 值3 值4；//上=值1，右=值2，下=值3，左=值4

外边距属性

设置元素的内容与边框之间的距离（内边距或填充），分4个方向（上、右、下、左）

• margin-top: 长度值|百分比|auto
• margin-right: 长度值|百分比|auto
• margin-bottom: 长度值|百分比|auto
• margin-left: 长度值|百分比|auto
  说明：值不能为负值

外边距属性缩写

margin：值1；//4个方向都为值1
margin：值1 值2；//上下=值1，左右=值2
margin：值1 值2 值3；//上=值1，左右=值2，下=值3
margin：值1 值2 值3 值4；//上=值1，右=值2，下=值3，左=值4

外边距属性

• 垂直方向，两个相邻元素都设置外边距，外边距会发生合并。
• 合并后外边距高度=两个发生合并外边距的高度中最大值