CSS 元素显示模式

一、CSS 的元素显示模式

1、元素显示模式的分类

1.1、块元素

常见的块元素：

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

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

块级元素的特点：

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

注意：文字类的元素内不能放块级元素

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

1.2行内元素

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

行内元素的特点：

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

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

1.3行内块元素

常见的行内块标签：
<img />、<input />、<td>

行内块元素的特点：

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

二、元素显示模式转换

显示模式的属性是display ，作用：可以改变标签的特点.

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

单行文字垂直居中

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

div {
   /* 没有高时，行高也能撑大盒子,但是不是高的属性*/
   height: 40px;
   /* 行高等于高 */
  line-height: 40px;
}

四、CSS的背景

1.背景颜色
background-color:red; 背景颜色
背景颜色默认是透明（transparent），我们也可以手动指定背景颜色为透明色

2.背景图片
background-image:url(“图片名称”); 背景图片
注意：背景图片后面的地址，千万不要忘记加 URL
background-image: url("./img/logo.png");

3.背景平铺
background-repeat
background-repeat: no-repeat;

• repeat 默认值 平铺
• no-repeat 不平铺 不重复出现
• repeat-x 向水平方向进行平铺
• repeat-y 向垂直方向进行平铺

4.背景位置
background-position:x y;水平位置 垂直位置
水平位置：left center right
垂直位置：top center bottom
第一种：参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

第二种：精确单位 （具体数值）
background-position: 10px 10px

• 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
• 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

第三种：混合使用
则第一个值是 x 坐标，第二个值是 y 坐标

五、背景固定

background-attachment: scroll或者fixed；
取值：scroll 滚动 ，fixed 固定

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

background: transparent url(image.jpg) repeat-y  fixed  top ; 

注意：不要又使用background-color 等等设置了以后 , 然后再来background

背景透明

background: rgba(0, 0, 0, 0.3); 
RGB 值是 255,255,255 表示的颜色是白色，如果是 0,0,0 表示的就是黑色。
最后一个参数是 alpha 透明度，取值范围在 0~1之间