CSS的元素显示模式和CSS的背景_css不同背景显示-CSDN博客

元素模式	元素排列	设置样式	默认宽度
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%
行内元素	一行可以放置多个元素	不可以直接设置宽度高度	它本身内容的宽度
行内块元素	一行可以放多个行内块元素	可以设置高度和宽度	他本身内容的宽度

1.6元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性，比如想要增加<a>的触发范围。

转换为块元素： display：block;
转换为行内块元素：display：inline-block;
转换为行内元素：display：inline；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素a转换为块级元素 */
            /* display: block; */
            text-decoration: none;
            /* 转换为行内元素 */
            /* display: inline; */
            /* 转换为行内块元素 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">C罗</a>
    <a href="#">C罗</a>
</body>

</html>

1.7一个小技巧，单行文字垂直居中的代码

CSS没有给我们提供文字垂直居中的代码，这里我们可以用一个小技巧是这个问题实现。

解决问题的方案：让文字的行高等于盒子的高度，就可以让当前文字在盒子内垂直居中。

1.8单行文字垂直居中的原理

行高的上空隙和下空隙把文字挤到了中间了是如果行高小于盒子高度。文字会偏上。如果行高大于盒子高度，则文字偏下。

二.CSS的背景

通过CSS的背景属性，可以给页面元素添加背景样式。

背景属性是可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。

2.1背景颜色

background-color 属性定义了元素的背景颜色。

使用： background-color：颜色值;

一般情况下元素背景颜色是transparent;

2.2背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大背景图片，优点是非常便于控制位置。

使用： background-image: none|url(url) 地址

参数值	作用
none	无背景图（默认）
url	使用绝对或相对地址指定背景图片

2.3背景平铺

如果需要HTML页面上对背景图像进行平铺。可以使用background-repeat 属性。

使用： background-repeat:repeat|no-repeat|repeat-x|repeat-y|

参数值	作用
repeat	背景图片在纵向和横向上平铺（默认值）
no-repeat	背景图片不平铺
repeat-x	背景图片横向平铺
repeat-y	背景图片纵向平铺

2.4背景图片位置

利用background-position属性可以设置改变图片在背景中的位置。

使用： background-position： x y;

参数代表的意思是：x坐标和y坐标，可以使用方位名词或者精确单位。

参数值	说明
length	百分数\|由浮点数字和单位标识符组成的长度值
position	top\|center\|bottom\|left\|center\|right 方位名词

参数方位名词

如果指定的两个都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一样

如果指定一个方位名词，另一个值省略，则第二个值默认居中对齐

参数是精确单位

如果参数是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标。

如果只指定一个数值，那该值一定是x坐标，另一个默认垂直居中。

参数是混合单位

如果指定的两个值是精确单位和方向名词混合使用，则第一个值是x坐标，第二个值是y坐标。

2.5背景图像固定(背景附着）

background-attachment 属性设置背景图像是否是固定或者随着页面的其余部分滚动。

background-attachment 后期可以制作视差滚动的效果。

使用： background-attachment: scroll | fixed

参数	作用
scroll	背景图像随对象内容滚动
fixed	背景图像固定

2.6背景复合写法

为了简化背景属性的代码，我们可以将折现属性合并简写在同一个属性 background中，从而节约代码量，当使用简写属性时，没有特定书写顺序，一般习惯约定顺序为：

background：背景颜色，背景图片，背景图片地址，背景平铺，背景图像滚动，背景图片位置。

使用： background: transparent url(image.jpg) repeat-y fixed top; 实际开发比较提倡。

2.7背景色半透明

CSS3为我们提供了背景颜色半透明的效果。

background: rgba(0,0,0,0.3);、

注意：

最后一个参数时alpha透明度，取0~1之间。
我们习惯把0.3的0省略掉，写为background(0,0,0.3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。
CSS3新增属性，IE9+版本浏览器才支持的。
但是现在实际开发中，我们不关注兼容性写法了，可以放心使用。

2.8背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别为x和y坐标
background-attachment	背景附着	scroll(背景滚动)/fixed(背景固定)
背景简写	书写更简单	背景颜色,背景地址，背景平铺，背景滚动，背景位置
背景色半透明	背景颜色半透明	background: rgba(0,0,0,.3); 后面必须时四个值