1、背景属性（元素有宽和⾼才能设置背景属性）
（
1）背景颜⾊⸺background-color: 颜⾊值 默认transparent 透明⾊
属性值有5种格式：1）英⽂单词（不常⽤） 如：blue、yellowRR
2）透明⾊：transparent
3）RGB（
x,x,x）x的值为0-255，共256个值
R ---red G---green B---blue
对应的哪个值最⼤，则显⽰谁的颜⾊
其中 rgb(255,255,255)---⽩⾊ rgb(0,0,0)---⿊⾊
4）rgba (x,x,x,y) x取值同上，但是y的取值为 0-1，0为透明，1为不透明
5）#rrggbb ⼗六进制 单个的取值范围为 0 1 2 3 4 5 6 7 8 9 a b c d e f
其中，#ffffff---⽩⾊ #000000---⿊⾊
当 r g b中各有⼀位相同时，可省略其中⼀位
如 #ff6688 可以写为#f68
（
2）背景图⽚⸺background-image: url(图⽚路径) 默认none ⽆背景图
若有背景图，默认⼤⼩为图⽚⼤⼩
（
3）背景平铺⸺background-repeat：⽅式 默认repeat 平铺
⼀般设为no-repeat 不平铺
（
4）背景图定位⸺background-position：属性值1 属性值2
1）当属性值为数值时，单位为px, 属性值1为⽔平值，属性值2为垂直值，默认为0 0
注意：元素是固定的，移动的是图⽚
图⽚要往左移动时，⽔平值为负数
图⽚要往上移动时，垂直值为负数
2）当属性值为⽅位词时，, 属性值1为⽔平⽅向，属性值2为垂直⽅向，默认为 left top
⽔平⽅位词包括 left center right
垂直⽅向词包括 top center bottom
/* 只有⽅位词 顺序可以忽略 */
background-position: right bottom;
background-position: bottom right;
/* ⽅位词定位只⼀个值 另外⼀个值默认是center */
background-position: left;
/* 可以混搭 */
background-position: left 40px;3） 为输⼊框，将图⽚定位到输⼊框内
▪ ⸺先给输⼊框设置宽和⾼
▪ ⸺导⼊图⽚，设置平铺⽅式
▪ ⸺再来定位
▪
（
5）浏览器调试
在浏览器调试时，调整好后，要把相应数值复制到VSCODE代码区
（
6）将图⽚放⼊相框
因为图⽚也是⼀个标签，背景图放在css代码内修饰标签
所以不⽤再额外去将图⽚套在DIV内了
（
7）边框的属性
1）边框颜⾊ border-color:
2）边框宽度 border-width:
3）边框样式 border-style:
◦ solid 实线
◦ dashed 虚线
◦ dotted 点线◦ double 双实线
4）边框的写法
▪ /* 写法⼀ border-⽅位-属性 */ border-top-width: 20px; border-top-style: dotted;
border-top-color: blue;
▪ /* 写法⼆ border-⽅位：属性⼀，属性⼆，属性三*/ border-top: 20px dotted blue;
border-right:10px dashed green ;
▪ /* 写法三 border-属性值 */
⼀个值 所有边
两个值 上下边 和 左右边
三个值 上边 左右边 下边
四个值 上边 右边 下边 左边
border-color: red blue green orange
▪ /* 写法四 简写 border:color、style、width */
border: 20px solid red;
（
8） 列表的属性
去除列表前⾯的点
2、⽂本属性
（
1） 字体⼤⼩ font-size
◦ 最⼩ 12px
◦ 默认 16px
◦ 消失 0px
◦ ⼀般写偶数，因为有时⽂字⼤⼩为奇数时，字体会出现锯⻮
（
2）字体系列 font-family
可以写多个，⽤逗号分隔
（
3）字体粗细 font-weight
◦ font-weight: 100-900的整百数
◦ font-weight: lighter; 细体◦ font-weight: normal; 常规 默认值
◦ font-weight: bold; 加粗
◦ font-weight: bolder; 更粗
（
4）字体倾斜 font-style
◦ font-style: italic; 倾斜
◦ font-style: oblique; 更倾斜
◦ font-style: normal; 常规 默认值
（
5）字体修饰线 text-decoration
◦ text-decoration: underline; 下划线
◦ text-decoration: line-through; 删除线
◦ text-decoration: overline; 上划线
◦ text-decoration: none; 去除修饰线
（
6）⽂本缩进 text-indent
⼀般设为 2em（
2个字符的⼤⼩）
（
7）字间距 letter-spacing： px
可以为正负数
（
8）词间距 word-spacing: px
词间距针对空格，可以为正负数
（
9）⾏⾼ line-height: px
◦ 也叫⾏间距，是⽂字上⾯的间距 + ⽂字⼤⼩ + ⽂字下⾯的间距
◦ 如何使单⾏⽂本垂直居中： ⽂本⾏⾼=容器的⾼度 p的 height = ⽂字的 line-height
（
10）⽔平对⻬ text-align：（
只对独占⼀⾏的元素有效）
◦ left 靠左对⻬
◦ right 靠右对⻬◦ center 居中对⻬
3、浮动属性
（
1）作⽤
◦ 浮动是让元素脱离默认⽂档流，让独占⼀⾏的元素同⾏展⽰
▪ 默认⽂档流：对⻚⾯布局不加任何修饰，元素⾃动的布局⽅式，元素的默认⽂档流由元素的
类型决定
（
2）使⽤
◦ 元素的取值为 left、right 、none，默认值为none⸺即默认为⽂档流
◦ 若要多个元素同⾏展⽰，那么这些元素全部都要设置浮动属性
（
3）浮动的三⼤规则
◦ 浮动为半脱离⽂档流，背景图定位为全脱离⽂档流。半脱离⽂档流的意思就是不占据⻚⾯空
间，不遮挡⽂字（可实现图⽂环绕）
◦ 浮动的元素在⽗元素的限制范围内浮动
◦ 浮动的元素只能在其当前的⾏框内浮动
（
4）浮动的问题
◦ ⾼度塌陷
▪ 原因：当⽗元素没有设置⾏⾼时，⽗元素的⾏⾼则会靠⼦元素撑开，但是当⼦元素全部浮动
时，⽗元素的⾼度会丢失，⾼度为0，此时浮动失败，布局⽆效
◦ 解决措施：清除浮动
▪ 1）给⽗元素设置⾏⾼，但是此法不推荐。因为如果把⾼度写死，之后再添加元素的话，需
要再去计算和设置⽗元素的⾼度，⾮常⿇烦
▪ 2）使⽤ overflow：hidden，推荐！在⽗元素的css代码中加⼊overflow属性，触发了BFC
（
5）浮动的特殊性
给不独占⼀⾏的元素加上浮动之后，可以给其设置宽⾼，并且有效
（
6）元素的三种分类
A.块元素（
10个）
包括：
①.div
②.列表标签 （
ul ol li dl dt dd）
③.段落标签 p
④.标题标签 h1 - h6
⑤.⽔平线标签 hr特征：
①独占⼀⾏，在⽂档流中从上往下排列
②设置宽⾼有效
③默认宽度为⽗元素的100%，默认⾼度靠内容撑开
④盒⼦模型的属性均有效
盒⼦模型的属性：宽、⾼、边框、内外边距（
padding 和 margin）
⑤常⽤于⻚⾯布局
B.⾏内元素（
12个）
包括
①.span
②.带有修饰线的标签 （
u del s a ）
③.加粗和倾斜标签 （
b strong em i）
④.上标和下标 （
sup sub）
⑤.换⾏标签 （
hr）
特征
①不独占⼀⾏，与其他⾏内元素或者⾏内块元素共⽤⼀⾏，在⽂档流中从左往右排列，⼀⾏
放不下会⾃动换⾏
②设置宽⾼⽆效
③默认宽⾼都靠内容撑开
④盒⼦模型的部分属性⽆效
内外边距（
padding 和 margin） 和上下边框（
border-top 和 border-bottom）
⑤常⽤于⼀⾏⽂本有不同格式的时候
c.⾏内块元素（
2个）
包括
①.输⼊框标签 (input)
②.图⽚标签 (img)
特征
①不独占⼀⾏，与其他⾏内元素或者⾏内块元素共⽤⼀⾏，在⽂档流中从左往右排列，⼀⾏
放不下时⾃动换⾏
②设置宽⾼有效
③默认宽⾼（不需要考虑）
④盒⼦模型的属性均有效
⑤常根据效果图来选择是否使⽤该元素
