CSS的元素显示模式和CSS的背景-摩杜云开发者社区

一.CSS的元素显示模式

1.1什么是元素的显示模式

1.2块元素

1.3行内元素

1.4 行内块元素

1.5元素显示模式总结

1.6元素显示模式转换

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

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

二.CSS的背景

2.1背景颜色

2.2背景图片

2.3背景平铺

2.4背景图片位置

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

2.6背景复合写法

2.7背景色半透明

2.8背景总结

一.CSS的元素显示模式

1.1什么是元素的显示模式

作用：网页的标签元素非常多，在不同的地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。

元素显示模式就是元素(标签)以什么方式进行显示，比如<div> 自己占一行,比如一行可以放多个<soan>.

HTML元素一般可以分为块元素和行内元素两种类型。

1.2块元素

常见的块元素有<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等。其中<div>标签是最典型的块元素。

块元素的特点：

比较霸道，自己独占一行。
高度，宽度，外边距，以及内边距都可以控制。
宽度默认是容器（父其宽度）的100%。
是一个容器及盒子，里面可以放块级元素。

注意：

文字类的元素内不能使用块级元素。
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>。
同理，<h1>~<h6>等都是文字类块级标签，里面不能放其他块级元素。

1.3行内元素

常见的行内元素有<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span> 等。其中<span>标签是最典型的行内元素，有的地方也将行内元素称为内联元素。

行内元素的特点：

相邻和行类元素在一行上，一行可以显示多个
高宽直接设置时无效的
默认宽度就是他本身内容的宽度
行内元素只能容纳文本或者其他行内元素。

注意：

链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素，但是个<a>转换一下块级模式最安全。

1.4 行内块元素

在行内块元素中有几个特殊的标签——<img/>,<input/>,<td>。他们同时具有块元素和行内元素的特点，（有些资料称他们为行内块元素）

行内块元素的特点：

和相邻行内元素（行内块）在同一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素的特点）
默认宽度就是它本身内容的宽度(行内元素的特点)
高度，行高，外边距以及内边距都可以控制(块级元素的特点)

1.5元素显示模式总结

元素模式	元素排列	设置样式	默认宽度
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的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的背景_html

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

二.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); 后面必须时四个值

背景图片：实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。