（四）CSS学习笔记:CSS的元素显示模式、CSS背景

本文仅用作学习记录，学习视频为B站的pink老师

CSS的元素显示模式

元素(标签)以什么方式进行显示，比如<div>自己占一行，一行可以放多个<span>
作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
html元素一般分为块元素和行内元素两种类型。

块元素

常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

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

注：文字类的块级元素内不能使用块级元素，例如标签<p>、<h1>~<h6>(文字类块级标签)

行内元素

常见的行内元素(内联元素)：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

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

注：

• 链接内不能再放链接
• 特殊情况<a>内可以放块级元素，但是给<a>转换一下块级模式更安全

行内块元素

在行内元素中有几个特殊的标签：<img />、<input />、<td>同时具有行内元素和块元素的特点，所以称为行内块元素

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

元素显示模式转换

/* 行内元素转化为块级元素 */
display: block;

/* 块级元素转化为行内元素 */
display: inline;

/* 行内元素转化为行内块元素 */
display: inline-block;

单行文字垂直居中

/* 设置文字垂直居中：设置文字行高等于盒子高度 line-height=height */
line-height: 40px;

CSS的背景

/* 设置背景颜色 默认值为transparent:透明 */
background-color: transparent/color;

/* 设置背景图片,常见于logo、一些装饰性的小图片或者超大的背景图片 */
/* 便于控制位置 */
background-image: none/url();

/* 背景图片平铺 默认情况下是repeat的*/
background-repeat: repeat/no-repeat/repeat-x/repeat-y;

/* 控制背景图片位置 x y是坐标，可以使用方位名词或者精确单位*/
/* 方位名词：top center bottom|left center right; */
/* 若x y是方位名词，则两个值的顺序无关；若只指定一个方位名词，则另一个默认居中； */
background-position: x y;
/* 精确单位，第一个是x，第二个是y，顺序不能颠倒 */
/* 若只写1个数值，则代表x,y默认为center */
background-position: 200px 100px;
/* 方位名词与精确坐标可以混合，第一个是x，第二个是y，顺序不能颠倒 */
background-position: 200px center;

/* 设置背景图片是否固定或者随着页面的其余部分滚动,默认为scroll */
background-attachment: fixed/scroll;

/* 背景复合写法，没有顺序 */
background: black url(../images/bg.jpg) no-repeat fixed top center;

/* 设置背景颜色透明 */
/* 红 绿 蓝 透明度(0~1) */
background: rgba(0, 0, 0, 0.5);