HTML笔记5

CSS的元素显示模式

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

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

块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>等，其中<div>是典型的块元素

块级元素的特点：

1. 元素自己独占一行
2. 高度、宽度和内外边距都可以控制
3. 宽度默认是容器（父级宽度）的100%
4. 是一个容器及盒子，里面可以放行内或者块级元素
5. 文字类的元素内不能使用块级元素

行内元素

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

行内元素的特点：

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

注意：

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

行内块元素

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

行内块元素的特点：

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

元素显示模式转换

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

单行文字垂直居中的原理

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

CSS的背景

背景颜色

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

background-color: 颜色值;

一般情况下元素背景颜色默认值是transparent（透明），也可以手动指定背景颜色为透明色

背景图片

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

background-image: none|url(url);

背景平铺

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

background-repeat: repeat|no-repeat|repeat-x|repeat-y

背景图片位置

参数是方位名词

• 如果指定的两个值都是方位名词，则两个值前后顺序无关
• 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

参数是精确单位

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

参数是混合单位

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

背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动，后期可以制作视差滚动效果

background-attachment: scroll|fixed;

背景属性复合写法

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

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

这是实际开发中使用的写法

背景色半透明

背景半透明是CSS3提供的效果，有IE兼容性问题

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

• 最后一个参数是alpha透明度，取值在0~1之间
• 通常将0.3的0省略，写为background: rgba(0, 0, 0, .3)
• 背景半透明是指盒子背景半透明，盒子里面的内容不受影响
• CSS3新增属性，是IE9+版本才支持的
• 现在开发已经很少关注兼容性写法了，可以放心使用