CSS的元素显示模式、盒子模型、背景（颜色、图片、平铺、图片位置、图像固定）

1.CSS的元素显示模式

1.1 什么是元素显示模式

就是元素（标签）以什么方式显示，比如<div>自己占一行，比如一行可以放多个<span>。
HTML元素一般分为块元素和行内元素两种类型。

1.2 块元素

常见块元素有<h1>~<h6>、<p>、<div>（最典型）、<ul>、<ol>、<li>等。

特点：

• 霸道，自己独占一行。
• 高度、宽度、外边距以及内边距都可以控制
• 宽度默认是容器（父级宽度）的100%
• 是一盒容器及盒子，里面可以放行内或者块级元素
  （之后在写标签时发现具有以上特点，则一定是块元素）

注意：

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

1.3 行内元素

常见行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>（最典型）等，也可以将行内元素称为内联元素。

特点：

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

注意：

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

1.4 行内块元素

<img>、<input>、<td>同时具有块元素和行内元素特点，称为行内块元素

特点：

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

<input type="text">
<input type="text">

1.5 元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度，可以间接设置（转换模式）	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

1.6 元素显示模式转换

特殊情况下需要元素模式的转换，即一个模式的元素需要另一种模式的特性，比如想要增加链接<a>的触发范围

• 转换为块元素：display:block;(使用最多)
• 转换为行内元素：display:inline;
• 转换为行内块：display:inline-block;

2.盒子模型：网页布局的基础

网页布局的核心：利用CSS摆盒子
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器，CSS盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容

2.1 外边界/距（margin）

盒子的边框与包含该盒子容器之间的距离
margin:【上、右、下、左】

属性	作用
margin-top	上外边界
margin-right	右边界
margin-bottom	下边界
magin-left	左边界

2.1.1 外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

1. 盒子必须指定了宽度（width）。
2. 盒子左右的外边距都设置为 auto 。
   例：

.header{ width:960px; margin:0 auto;}

常见的写法，以下三种都可以：

• margin-left: auto; margin-right: auto;
• margin: auto;
• margin: 0 auto;
  注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

2.1.2 嵌套块元素垂直外边距塌陷

对于两个嵌套关系（父子元素）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题。

2.2 填充/内边距（padding）

内补白（内边距），盒子中的内容与盒子边框之间的距离
padding：【上、右、下、左】

属性	作用
padding-top	上边距
padding-right	右边距
padding-bottom	下边距
padding-left	左边距

• 当给盒子指定 padding 值之后，发生了 2 件事情：

1. 内容和边框有了距离，添加了内边距。
2. padding影响了盒子实际大小。
   也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
3. 但是如果没有给盒子指定宽度或高度值，padding则不会撑开盒子

• 解决方案：如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

2.3 边框（border)

2.3.1 盒子的边框线

border（综合设置边框）：边框的宽度 边框的样式 边框的颜色
语法：

border : border-width || border-style || border-color

边框样式 border-style 可以设置如下值：

• none：没有边框即忽略所有边框的宽度（默认值）
• solid：边框为单实线(最为常用的)
• dashed：边框为虚线
• dotted：边框为点线
  边框简写：

border: 1px solid red; 没有顺序

边框分开写法：

border-top: 1px solid red;   /* 只设定上边框， 其余同理 */

属性	作用
border-width	定义边框粗细、宽度【上、右、下、左】
border-style	边框的样式【上、右、下、左】
border-color	边框颜色【上、右、下、左】
border-radius	（圆角边框）：水平半径参数/垂直半径参数

2.3.2 表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：

border-collapse:collapse;

• collapse 单词是合并的意思
• border-collapse: collapse; 表示相邻边框合并在一起

2.4 清除页面元素的默认内外边距

*{
	padding:0px;   /* 清除内边距 */
	margin:0p;     /* 清除外边距 */
}

‘*’：通配符，代表所有元素
（这句话也是CSS的第一行代码）
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

3. 背景

3.1 背景颜色

background-color 属性定义了元素的背景颜色。
一般情况下元素背景颜色默认值是 transparent（透明），也可以手动指定背景颜色为透明色。

background-color:transparent;

3.2 背景图片

background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

background-image : none | url (url)

参数值	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。
页面元素既可以添加背景颜色，也可以添加背景图片（背景图片会压住背景颜色）

3.3 背景平铺

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

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

参数值	作用
repeat	背景图像在纵向和横向上平铺（默认）
no-repeat	不平铺
repeat-x	在横向上平铺
repeat-y	在纵向上平铺

3.4 背景图片位置（重要）

利用 background-position 属性可以改变图片在背景中的位置。

background-position: x y;

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

参数值	说明
length	百分数 由浮点数字和单位标识符组成的长度值
position	top cenyer bottom left center right 方位名词

1. 参数是方位名词

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

2. 参数是精确单位

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

3. 参数是混合单位

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

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

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

<style>
background-attachment : scroll | fixed
</style>

参数	作用
scroll	背景图像是随对象内容滚动（默认）
fixed	背景图像固定

3.6 背景复合写法

为了节约代码量，没有固定顺序，习惯性地约定为以下顺序：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
例：

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

3.7 背景总结

背景图片：实际开发常见于LOGO或者一些装饰性的小图片或者超大的背景图片，优点是非常便于控制位置，（精灵图也是一种运用场景）

属性	作用	值
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,0.3); 后面必须是四个值

注：

• 背景颜色半透明指透过一个盒子可以看到下一个被遮挡住盒子的内容
• 最后一个参数alpha透明度，取值范围在0（透明）~1(100%不透明）之间
• 习惯性的把0.5省略掉0，写成rgba(0,0,0,.5);
• 只是让盒子的背景色半透明，盒子内容不受影响
• CSS3新增属性，只有IE9+版本才支持，但在实际开发中不常关注兼容性，可直接使用