chapter06——CSS样式基础(2)

125 阅读1分钟

块元素

边距:

内边距:
    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(上)