一、背景色
1.1背景颜色
属性名：background-color（bgc）
属性值：
颜色取值：关键字、rgb表示法、ragb表示法、十六进制……
注意点：
背景颜色默认值是透明：rgba（0,0,0,0）,transparent
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
2.1背景图片
属性名：background-image（bgi）
属性值：background-image：url（'图片的路径'）
注意点：
背景图片url中可以省略引号
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果，类似于背景色，是不能撑开盒子的
3.1背景平铺
属性名：background-repeat（bgr）
属性值：
repeat 默认值，水平方向和垂直方向都平铺
no-repeat 不平铺
repeat-x 沿着水平方向（x轴）平铺
repeat-y 沿着垂直方向（y轴）平铺
4.1背景图位置
属性名：background-position（bgp）
属性值：background-position：水平方向位置，垂直方向位置
1.方位名词（最多只能表示九个位置）：其中水平方向有left ，center，right，其中垂直方向有top，center，bottom
2.数字+px（坐标）：将图片左上角与坐标点重合
注意点：方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直
5.1背景相关属性的连写
属性名：background（bg）
属性值：单个属性值的合写，取值之间以空格隔开
例如background：color image repeat position
省略问题：可以按照需求省略
特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background-url（）
注意点：如果需要设置单独的样式和连写，要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面
6.1 img标签和背景图片的区别
img标签是一个标签，不设置宽高默认会以原尺寸显示
div标签+背景图片：需要设置div的宽高，因为背景图片只是装饰css样式，不能撑开div标签
二、元素的显示模式
1.1块级元素
显示特点：独占一行，跨度默认是父元素的宽度，高度默认由内容撑开，可以设置宽度
代表标签：div，p、h系列，ul，li，dl，dt，dd，form，header，nav，footer……
2.1行内元素
显示特点：一行可以显示多个，高度和宽度默认由内容撑开，不可以设置宽高
代表标签：a ，span，b，u，i，s，strong，ins，em，del……
3.1行内块元素
显示特点：一行可以显示多个，可以设置宽高
代表标签：input，textarea，button，select……
特殊情况：img标签有行内块元素特点，但是chrome调试工具中显示结果inline
4.1元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
display：block 转换成块级元素
display：inline-block 转换成行内元素
display：inline 转换成行内元素
拓展：HTML嵌套规范注意点
1.块级元素一般作为大容器，可以嵌套文本，块级元素，行内元素，行内块元素等等……
但是p标签内不要嵌套div，p，h等元素
2.a标签内部可以嵌套任意元素但是a标签不能嵌套a标签
三、css特性
1.1继承性的介绍
特性：子元素有默认继承父元素样式的特点
可以继承的常见属性（文字控制属性都可以继承）
1.color
2.font-size，font-weight，font-style，font-family
3.text-indent，text-align
4.line-height
5......
注意点：可以通过调试工具判断样式是否可以继承
2.1层叠性的介绍
特性：给同一个标签设置不同的样式，此时样式会层叠叠加，会共同作用在标签上。给同一个标签设置相同的样式，此时样式会层叠覆盖，最终写在最后的样式会生效
注意点：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
导航案例
```html
<html>
<head>
<title>document</title>
<style>
a{
text-decoration:none;
width:100px
height:50px
background-color:red;
display:inline-block;
color:#fff;
tac-align:center;
line-height:50px;
}
a:hover{
background-color:orange;
}
</style>
</head>
<body>
<a href="#">导航1</a>
<a href="#">导航2</a>
<a href="#">导航3</a>
<a href="#">导航4</a>
<a href="#">导航5</a>
</body>
</html>
```html
扫一扫
4347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
