CSS学习笔记（3）【CSS元素显示模式以及背景设置】

CSS基础学习

一、CSS元素的显示模式（了解）

在HTML中将所有标签分为容器级和文本级两类
在CSS中将所有的标签分为块级元素和行内元素

1.什么是块级元素和行内元素？

块级元素会独占一行而行内元素则不会

2.块级元素和行内元素的区别：

2.1 块级元素（容器级）：
独占一行
如果没有设置宽度，那么默认和父元素一样

2.2 行内元素（文本级）：
不会独占一行
如果没有设置宽度，默认和内容一样宽
行内元素是不可以设置宽度和高度的
2.3 行内块级元素

二、CSS元素显示模式转换

1.如何转换CSS元素的显示模式
通过设置display属性
其中：inline 行内
block 块级
inline-block 行内块级

三、背景颜色

1.如何设置标签的背景颜色？
在CSS中，通过backgroun-color属性设置标签的背景颜色

四、背景图片

1.如何设置背景图片？
在CSS中通过background-image:url();
注意：（1）图片必须放在 url() 中，图片地址可以是本地的也可以是网络上的
（2）如果图片的大小没有标签的大小大，那么会自动在水平和垂直方向平铺和填充
（3）如果网页上出现了图片，那么浏览器会在此发送请求获取

五、背景平铺

1.如何控制背景图片的平铺方式？
在CSS中通过background-repeat属性控制背景图片的平铺方式
取值：
repeat 默认，在水平是垂直方向都需要平铺
no-repeat 在水平和垂直方向都不需要平铺
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺

六、背景定位

1.如何控制背景图片的位置？
在CSS中通过background-position属性控制背景图片的位置
2.格式：
background-position:水平方向 垂直方向
3.取值：
3.1 具体的方位名词如：left center right
top center bottom
3.2 具体的像素：
例：5px 20px 100px（一定要写单位）
具体的像素是可以接收负数的
注意：（1）同一个标签可以同时设置背景颜色和背景图片，如果颜色和图片同时存在，那么图片会覆盖颜色

七、CSS精灵图（了解）

1.什么是CSS精灵图？

一种图像合成技术

2.CSS精灵图的作用

可以减少请求的次数，以及可以降低服务器处理压力

3.如何使用CSS精灵图

CSS精灵图需要配合背景图片和背景定位来使用