一、背景相关属性
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)
- 外边距不会影响盒子可见框的大小
- 但是外边距会影响盒子的位置
- 一共有四个方向的外边距:
margin-top
- 上外边距,设置一个正值,元素会向下移动
margin-right
- 默认情况下设置margin-right不会产生任何效果
margin-bottom
- 下外边距,设置一个正值,其下边的元素会向下移动
margin-left
- 左外边距,设置一个正值,元素会向右移动
-
margin也可以设置负值,如果是负值则元素会向相反的方向移动
元素在页面中是按照自左向右的顺序排列的
所以默认情况下如果我们设置的左和上外边距则会移动元素自身
而设置下和右外边距会移动其他元素
margin的简写属性
margin 可以同时设置四个方向的外边距 ,用法和padding一样
margin会影响到盒子实际占用空间