1、元素显示模式的分类

1、元素显示模式的分类

块元素

       常见的块元素：

             <h1>~<h6>、<p>、<div>、<ul>、<li> 、<ol>

             <div>标签是最典型的块元素。

              块级元素的特点：

•           自己独占一行。
  

•           高度，宽度、外边距以及内边距都可以控制。
  

•               宽度默认是容器（父级宽度）的100%。
  

•          是一个容器及盒子，里面可以放行内或者块级元素。
  

  ​

注意：

文字类的元素不能放块级元素

标签主要用于存放文字，因此

里面不能放块级元素，特别不能放

同理，

~

等都是文字类块级标签，里面也不能放其他块元素

行内元素

常见的行内元素：

   <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

​ 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

• 相邻行内元素在一行上，一行可以放（显示）多个。
• 高、宽直接设置是无效的。
• 默认宽度是它本身内容的宽度。
• 行内元素只能容纳文本或其他行内元素。

注意：

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

行内块元素

常见的行内块标签：

<img />、<input>、<td>

他们同时具有块元素和行内元素的特点。有些资料称他们为行内块元素。

行内块元素的特点：

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

在合适的地方用合适的标签元素。

3、元素显示模式的转化

简单理解：

一个模式的元素需要另外一种模式的特性

比如想要增加链接的触发范围。

转换方式：

转换为块元素:display:block;

转换为行内块元素：display:inline

转换为行内块元素:display:inline-block

4、单行文字垂直居中的代码

解决方案：

让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中

line-height=盒子的高度

2、css的背景

背景颜色：

background-color 定义元素的背景颜色

元素背景默认值是transparent

背景图片

background-image 定义元素的背景图片

参数值

none 无背景图（默认值）

url 使用绝对或相对地址指定背景图像

背景平铺

样式名称：

​ background-repeat 设置元素背景图像的平铺

背景图片位置

样式名称：background-position属性可以改变图片在背景中的位置

使用方法：

bakground-position: x y;

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

其他说明：

1、参数是方位名词

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

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

2、参数是精确单位

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

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

3、参数是混合单位

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

背景图片固定

样式名称：

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

使用方法：

background-attachement ：scroll | fixed

其他说明：

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

背景合写样式：

​ background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;