2020 8 26 笔记整理

一、背景相关属性

background-color 设置背景颜色

background-image 设置背景图片

• 可以同时设置背景图片和背景颜色，这样背景颜色会成为图片的背景色

• 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满

• 如果背景的图片大于元素，将会一个部分背景无法完全显示

• 如果背景图片和元素一样大，则会直接正常显示

background-repeat 用来设置背景的重复方式
可选值：
repeat 默认值 ，背景会沿着x轴 y轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 背景图片不重复

background-position 用来设置背景图片的位置
设置方式：
通过 top left right bottom center 几个表示方位的词来设置背景图片的位置
使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center
通过偏移量来指定背景图片的位置：水平方向的偏移量 垂直方向变量

background-clip 设置背景的范围
可选值：
border-box 默认值，背景会出现在边框的下边
padding-box 背景不会出现在边框，只出现在内容区和内边距
content-box 背景只会出现在内容区
background-origin 背景图片的偏移量计算的原点
padding-box 默认值，background-position从内边距处开始计算
content-box 背景图片的偏移量从内容区处计算
border-box 背景图片的变量从边框处开始计算

background-size 设置背景图片的大小
第一个值表示宽度
第二个值表示高度
如果只写一个，则第二个值默认是 auto
cover 图片的比例不变，将元素铺满
contain 图片比例不变，将图片在元素中完整显示

backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置
并且该样式没有顺序要求，也没有哪个属性是必须写的

注意：
background-size必须写在background-position的后边，并且使用/隔开
background-position/background-size

background-origin background-clip 两个样式 ，orgin要在clip的前边

background-attachment 背景图片是否跟随元素移动
- 可选值：
scroll 默认值 背景图片会跟随元素移动
fixed 背景会固定在页面中，不会随元素移动

二、尺寸相关属性

（1） 固定高度与宽度（height:200）
（2） 自适应高度（高度会根据内容的增加而增加）
（3） 指定最大高度max-height（内容增加到指定高度的时候就不会再增加）
（4） 指定最小高度min-height（开始时高度固定，内容增加到一定地步时开始增加高度）

三、显示相关属性

（1）visibility 用来设置元素的显示状态
可选值：

• visible 默认值，元素在页面中正常显示

• hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置

（2）display：none 不仅隐藏内容，而且隐藏位置

四、盒子模型

边框（border）

• 边框的宽度 border-width

• 边框的颜色 border-color

• 边框的样式 border-style

border-width
默认值，一般都是 3个像素
border-width可以用来指定四个方向的边框的宽度
值的情况
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右

除了border-width还有一组 border-xxx-width
xxx可以是 top right bottom left
用来单独指定某一个边的宽度

border-color用来指定边框的颜色，同样可以分别指定四个边的边框
规则和border-width一样

border-color也可以省略不写，如果省略了则自动使用color的颜色值

border-style 指定边框的样式
默认值 none 表示没有边框
solid 表示实线
dotted 点状虚线
dashed 虚线
double 双线

border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
例如：border: solid 10px orange

内边距（padding）

内容区和边框之间的距离是内边距
一共有四个方向的内边距：
padding-top
padding-right
padding-bottom
padding-left

内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上

一共盒子的可见框的大小，由内容区 内边距 和 边框共同决定，
所以在计算盒子大小时，需要将这三个区域加到一起计算

padding 内边距的简写属性，可以同时指定四个方向的内边距
规则和border-width 一样

外边距（margin）

1. 外边距不会影响盒子可见框的大小
2. 但是外边距会影响盒子的位置
3. 一共有四个方向的外边距：
   margin-top
   - 上外边距，设置一个正值，元素会向下移动
   margin-right
   - 默认情况下设置margin-right不会产生任何效果
   margin-bottom
   - 下外边距，设置一个正值，其下边的元素会向下移动
   margin-left
   - 左外边距，设置一个正值，元素会向右移动
   -
   margin也可以设置负值，如果是负值则元素会向相反的方向移动

元素在页面中是按照自左向右的顺序排列的

所以默认情况下如果我们设置的左和上外边距则会移动元素自身
而设置下和右外边距会移动其他元素

margin的简写属性
margin 可以同时设置四个方向的外边距 ，用法和padding一样

margin会影响到盒子实际占用空间