内边距
如果父元素设置了内边距,也不会出现外边距重叠问题
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:背景颜色 背景图像 背景图像的位置/背景图片的大小 如何重复背景图像
背景图像的定位区域 背景图像的绘画区域 背景图像是否固定或者随着页面的其余部分滚动