关于前端与移动开发学习基础篇（4）——CSS基础（二）

一、选择器进阶

1.1 后代选择器：空格

作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
语法：
选择器1 选择器2{css}

1.2 子代选择器：>

作用：只能设置儿子
语法：
选择器1>选择器2{css}

2.1 并集选择器：,

语法：
选择器1,选择器2{css}

3.1 交集选择器：紧挨着

作用：选中页面中同时满足多个选择器的标签
语法：
选择器1选择器2{css}
注意：继右

4.1 emmet语法

5.1 hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：
选择器：hover{css}
注意：伪类选择器选中的元素的某种状态

二、背景相关属性

1.1 背景颜色

background-color
属性值：关键字,rgb表示,rgba表示,十六进制
注意：默认透明，transparent（透明）

2.1 背景图片

属性名：background-image(bgi)
属性值：background-image:url(‘路径’);
注意：默认平铺，宽高属性必须要

3.1 背景平铺

属性名：background-repeat(bgr)
属性名：

取值	效果
repeat	默认 水平垂直都平铺
no-repeat	不平铺
repeat-x	水平方向平铺
repeat-y	垂直方向平铺
注意：不平铺默认左上

4.1 背景位置

属性名：background-position(bgp)
属性值：
background-position：水平方向位置 垂直方向位置
（1）方位名词
（2）数字+px

5.1 背景属性连写

属性名：background
属性值：空格隔开
顺序：color image repeat position
注意：单写一定在连写下面

6.1 背景图片和Img标签区别

方法一：直接写上Img
不设置宽高默认原尺寸
方法二：div+背景图片
需要设置div的宽高，背景图片只是装饰，不然不能撑开

三、元素显示模式

1.1 块级元素

属性：
display:block
显示特点：
独占一行
宽度默认父元素的宽，高度默认内容撑开
可以设置宽高
代表标签：
div p h ul li dl dt dd form hheader nav footer

2.1 行内元素

属性：
display:inline
显示特点：
一行显示多个
宽和高默认内容撑开
不可以设置宽高
代表标签：
a span b u i s strong ins…

3.1 行内块元素

属性：
display:inline-block
特点：
一行显示多个
可以设置宽高
代表：
input textarea button select

4.1 元素显示模式转换

目的：改变元素默认的显示特点
语法：直接添加语法属性（转换行内极少）

5.1 嵌套规范

p不能嵌套块级
a不能套a

四、CSS三大特性

1.1 继承性

特性：子承父业
常见可继承属性：color font text line……（文本样式）
拓展：
a标签color会继承失效
h标签的font-size会继承失效
div的高度不能继承，但是宽有类死的继承效果，因为div独占一行

2.1 层叠性

特性：
（1）给同一个标签设置不同的样式，样式会层层叠加
（2）给同一个标签设置相同的样式，样式会层层覆盖
注意点：
当样式冲突，只有当选择器优先级相同，才能通过层叠行判断结果