CSS笔记（css元素显示模式和css背景）

css元素显示模式

元素的显示模式就是标签是以什么形式进行展示的，如<div>独占一行，而一行中可以放多个<span>,这些都属于元素的展示模式。元素展示模式一般分为块元素，行内元素，和“行内块元素”

1.块元素

常见的块元素：

块元素的特点：

• 他们比较“霸道”，每个人独占一行
• 可以设置相应的宽高，内外边距
• 如果不设置宽度默认和父级容器一样宽
• 里面可以放任何行内或者块元素
  注：文字类的标签不能放块元素，如p标签和h标签

2.行内元素

常见的行内元素：

行内元素的特点：

• 一行中可以有多个行内元素
• 行内元素无法设置宽高
• 行内元素的宽默认就是他自身的宽度
• 行内元素中只能容纳文本或者其他行内元素
  注：但链接中不能再放链接，特殊情况下<a>链接中可以放块元素，那就要用到我们的模式转换了

3.行内块元素

行内块元素实际并不存在，只是我们习惯这样叫，他同时具有行内元素和块元素的一些特点
常见的行内块元素：

特点：

• 相邻行内块元素会放到一行上，但中间会有空隙（类似行内元素特点）
• 宽度就是他自身的宽度（类似行内元素特点）
• 可以为他们设置行高以及内外边距（块元素特点）

4.元素模式之间的转换

特殊情况下我们可以为标签元素转换
语法：

• display：block（转换成块元素）
• display：inline（转换成行内元素）
• display：inline-block（转换成行内块元素）
  注：这些属性都是内嵌到标签的css中的

5.单行文字垂直居中的小技巧

方法：让文字的行间距等于盒子的行高即可。如果行间距大于盒子行高，则文字下移，否则文字上移

css背景

1.背景颜色

css中使用background-color：设置背景颜色

默认情况下背景色是transparent（透明色），我们可以依需设置

2.背景图片

使用backgroud-image：添加背景图片，业务中我们通常使用这种方式添加图片而不是<img src=“”>。这是因为后者不便于更换显示位置

注：这里的url一定一定一定不能省！！！

3.背景平铺

背景平铺也可理解成图片的重复，用backgroung-repeat设置参数

4.背景图片的位置

当图片放入浏览器后，当然他的位置也是可以调换的
语法：

这里图片的位置有三种写法：
1.参数是方位名词

• 其中x与y的位置可互换，不影响结果，如left center和center left效果等同
• 如果只指定了一个，则另一个默认居中对齐

2.参数是精确单位

• 如果参数是精确单位，那么第一个一定是x第二个是y
• 但如果只有一个数值，那么这个值一定是x

3.参数是混合单位（既有方位又有精确单位）
那么第一个一定是x坐标第二个是y坐标

5.背景附着

css用background-attachment定义背景附着
语法：

6.背景的复合写法

业务中我们经常使用这种写法，减少代码冗余

7.背景色的透明效果

实际网页中我们经常可以看到页面的透明效果，自然css中也有这种定义
语法：

注：

• 最后一个参数是介于0~1之间的，1为黑色，0无色
• 最后一个参数可以简写，写成 .3
• 背景半透明指的是盒子的半透明，其他并不会受影响