CSS3语法基础3

121 阅读2分钟

内边距

如果父元素设置了内边距,也不会出现外边距重叠问题

            padding
                    (-top,-left,-right,-button)
默认值,宽高不包含内边距和边框,知识内容区的宽高
             box-sizing: content-box; 
宽高包含内边距和边框
             box-sizing: border-box; 

文字溢出

                white-space:
                    white-space: wrap;     默认值,换行
                    white-space: nowrap;   不换行
                    white-space: pre;      保留文本的空格和换行符,文字不换行
                    white-space: pre-wrap; 保留文本的空格和换行符,文字换行
                    white-space: pre-line; 保留换行符,不保留多个空格,文字换行
文字溢出用省略号代替
                按步骤写
                1.white-space: nowrap;     让文本不换行
                2.overflow: hidden;        让其溢出隐藏
                3.text-overflow: ellipsis; 省略号隐藏

背景图片

              background-image: url(./images/mine-pic.png);  插入背景图
              background-repeat: no-repeat;                  不平铺
              background-repeat: repeat;                     平铺
              background-repeat: repeat-x;                   水平平铺
              background-repeat: repeat-y;                   垂直平铺

              background-size: ;                             指定背景图像的大小
              background-size: 600px;                         px
              background-size: 50% 100%;                      百分比  X% Y% 相对于容器的宽高
              background-size: cover;                         将长边完全填充满,另一边保持比例缩放
              background-size: contain;                       将短边完全填充满,另一边保持比例缩放

              background-position: ;                          设置背景图像的起始位置
              background-position-x: 50px;                    左右
              background-position-y: 50px;                    上下
              background-position: 50px 50px;                 px(左右 上下)
              background-position: 50% 50%;                   百分比(左右 上下) 相对于容器的宽高
              background-position: center;                    背景图居中
              background-position: bottom;                    背景图位于底部
              background-position: left;                      背景图位于左边
              background-position: right;                     背景图位于右边
              
              background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip
                         bg-attachment initial|inherit;
              background:背景颜色 背景图像 背景图像的位置/背景图片的大小 如何重复背景图像
                         背景图像的定位区域 背景图像的绘画区域 背景图像是否固定或者随着页面的其余部分滚动