css+div页面布局详解（二）

css复合选择器
后代选择器：
语法格式：

选择器1 选择器2 {样式声明;}

后代选择器中用空格分开
子代选择器：
语法格式：

选择器1 > 选择器2 {样式声明;}

后代选择器用户大于号分开
并集选择器：
语法格式：

选择器1,选择器2 {样式声明;}

并集选择器用逗号分开，最后一个选择器不需要逗号
交集选择器：
语法格式：

选择器1选择器2 

既…又…的关系应用场景不多
链接伪类选择器:
针对链接的不同状态设置不同的样式
链接伪类选择器 说明
a:link 选择所有未被访问的链接
a:visited 选择所有已经被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择激活链接（鼠标按下未抬起的链接)

focus伪类选择器：
在表单中突出显示当前获得焦点的表单元素，提升用户体验
语法格式：

<style>
​ input {
​ width: 300px;
​ height: 30px;
​ }
​ input:focus {
​ width: 500px;
​ background-color: gray;
​ }
​ </style>

input和冒号中间不能有空格
元素的显示模式
块元素：
特点：1.独占一行；2.可以设置宽高等属性；3.宽度默认是父级容器的宽度；4.可以存放其他行内元素和块元素
行内元素：
特点 ：1.一行可以存在多个；2.设置宽高等属性无效；3.默认宽度是内容的宽度；4.只能容纳文本和其他行内元素
行内块元素：
特点：1.一行显示，显示多个；2.默认宽度是本身内容的宽度；3.可以设置宽、高等属性
模式转换：

display:block：转换为块结构；
display:inline：转换为行内结构；
display:inline-block：转换为行内块结构；

背景
背景图片：
语法：

background-image: none | url(url);

优点：非常容易控制位置
背景平铺：
参数 说明
repeat 默认，水平垂直平铺
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
背景位置：
方位名词：
background-position可以改变图片在背景中的位置
水平方向：left、center、right
垂直方向：top、center、right
精确单位：
background-position ：x y；
如果只指定了一个值，系统默认是方向的值，另一个方向垂直居中显示
背景固定：
background-attachment控制背景固定
scroll：背景图像跟随滚动（默认）
fixed：背景图像固定