响应页面设计7

复合选择器

1. 后代选择器
2. 子类选择器
3. 并集选择器
4. 链接伪类选择器

• a:link 选择所有未被访问的链接

• a:visited 选择所有已被访问的链接

• a:hover 选择鼠标上的链接

• a:active 鼠标按下并未弹起时

  5.:focus伪类选择器
  用于选取获得焦点的表单元素，用于<input>类表单标签。

元素显示模式

分为块元素和行内元素

块元素
大概有<h1>~<h2>,<p>,<div>,<ul>,<ol>,<li>
特点：

1. 独自占领一行
2. 宽度高度内外边距可以自己决定
3. 宽度默认100%
4. 可以装其他块元素和行内元素

注意：如<h1>~<h2>,<p>等文字类块级标签里面不能放其他块级标签。

行内元素
大概有<a>,<strong>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>
特点：

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

注意：<a>标签里不能放置<a>标签，但可以放置块级标签。

行内块元素
即同时具有块元素与行内元素的特点，有<img/>,<input/>,<td> 等。
特点：

1. 在一行内，可以显示多个元素，但它们中间存在空白间隙
2. 有默认的宽度，即内容的宽度
3. 可以自行设置高度与宽度

元素显示模式的转换
转换为块元素：

	display: block;

转换为行内元素：

	display: inline;

转换为行内块元素：

	display: inline-block;

背景

1.背景图片
常用于制作logo，插入大型图片和小装饰图片。

	background-image: none\url(url);

2 背景平铺
使用背景图片一般默认为平铺。

	background-repeat: repeat\no-repeat\repeat-x\repeat-y;

repeat 全铺开
no-repeat 不铺开
repeat-x\repeat-y 向x轴铺开和向y轴铺开

3 背景图片位置
改变图片在背景中的位置

	background-position: x,y;

可以使用方位名词，如：top,bottom,left,right，也可以使用参数精准单位，如：px,em等，还可以使用混合单位。

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

	background-attachment: scroll\fixed;

scroll 背景图像随着内容而滚动
fixed 把背景图像固定

5 背景属性复合写法

非固定型写法

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

6 背景颜色半透明

	background-color: rgba(0, 0, 0, 0.3);

实例操作
设计图片链接的方式
第一步 将<a> 标签设定为行内块元素或者块元素
第二步 插入背景图地址
第三步 设置背景图的属性值
第四步 将背景图所在的盒子添加链接伪类选择器

浮动

浮动的特性：

1. 浮动会脱离标准流，即浮动的盒子不再保留原先的位置
2. 浮动元素会在一行内显示并且会在顶部对齐
3. 浮动元素会具有行内块元素的特性

常与标准流父级搭配
浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流

清除浮动
常常用于父级盒子没有设定高度时，为了防止两个盒子重叠而采取清除浮动的措施。
清除浮动的本质：清除浮动元素脱离标准流造成的影响。
清除浮动的策略：闭合浮动。
清除浮动的方法：

1. 添加额外标签（隔墙法）
2. 在父级添加overflow属性
3. 在父级添加after 为元素
4. 在父级添加双伪元素

具体操作：
1 在浮动元素末尾加入一个空标签（必须为块元素），如

	<div style="clear: both\left\right"></div>

2 在父级盒子加入属性值overflow，如

	overflow: hidden\auto\scroll;

3 添加以下代码

4 添加以下代码