前端学习记录 2022.07.19——CSS样式(2)

170 阅读1分钟

边距:

外边距:

body标签默认有8px外边距.

内边距:

父元素设置了内边距,也不会出现外边距重叠.
        padding:
            (-top -left)
            1234个值跟外边距对应.
        宽高包含内边距:
            box-sizing:
                content-box:默认值.宽高不包含内边距和边框,只是内容区的宽高.
                border-box:宽高包含内边距和边距.
            border-width:边框宽度.
            border-color:边框颜色.
            border-style:边框样式.
            border:边框三个值,宽度、颜色、样式.不按顺序.
            border-radius:px.固定宽度     百分比.根据自身宽高的百分比.

空白处理:

white-space:
        warp:默认值.换行.
        nowarp:不换行.
            pre:保留文本的空格和换行符.文字溢出时不换行.
        pre-warp:保留文本的空格和换行符.文字溢出时换行.
        pre-line:保留文本的换行符,不保留空格.文字溢出时换行.

转移标识符:

   &nbsp: 空格

文字溢出处理:

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:上边.