块元素
边距:
内边距:
1、父元素设置了内边距,也不会出现外边距重叠的问题
padding:
(-top、-left...)1234个值跟外边距对应
宽高包含内边距:
box-sizing:
content-box 默认值,宽高不包含内边距和边框,只是内容区的宽高
border-box 宽高包含内边距和边框
边框:
border-width 边框宽度
border-color 边框颜色
border-style 边框样式
border 3个值,顺序随意,空格隔开
border-radius(圆角半径):
px:固定像素
百分比:相对于自身宽高的百分比
(注:容器占比还是原来的宽高)
空白处理:
white-space:
wrap 默认值,不换行
nowrap 不换行
pre 保留文本的空格和换行符,文字不换行
pre-wrap 保留文本的空格和换行符,文字溢出换行
pre-line 保留换行,不保留多个空格,文字换行
文字溢出处理:
overflow::hidden 溢出隐藏
text-overflow:
ellipsis 省略号隐藏
clip 默认值,直接溢出
转义标识符:
 
背景属性:
background-repeat:
no-repeat 不平铺
repeat 平铺
repeat-x 水平平铺
repeat-y 垂直平铺
background-size:
px
百分比 x% y% 相对于容器的宽高
cover 将长边完全充满,另一边保持比例伸缩
contain 将短边完全充满,另一边保持比例伸缩
background-position: x y 偏移
px
百分比 相对于容器的宽高
方位:center(中间)、bottom(下)、left(左)、right(右)、top(上)