二、css知识点2

二、css知识点2

1. CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

1.1 后代选择器

• 概念：

  后代选择器又称为包含选择器

• 作用：

  用来选择元素或元素组的子孙后代

  父级 子级{属性:属性值;属性:属性值;}

1.2 子元素选择器

• 作用：

  子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。

• 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接

1.3 并集选择器

并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

1.4 交集选择器

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点

1.5 链接伪类选择器

伪类 用 2个点 就是 冒号 比如 :link{}

作用：

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。

如：

• a:link /* 未访问的链接 */
• a:visited /* 已访问的链接 */
• a:hover /* 鼠标移动到链接上 */
• a:active /* 选定的链接 */

2.标签显示模式（三种模式）

2.1行内元素

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

• 行内元素的特点：

（1）相邻行内元素在一行上，一行可以显示多个。

（2）高、宽直接设置是无效的。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。

注意：

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

2.2块级元素

常见的块元素有<div>、<hr>、<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>、<from>、<table>等，其中<div>标签是最典型的块元素。

• 块级元素的特点

（1）比较霸道，自己独占一行

（2）高度，宽度、外边距以及内边距都可以控制。

（3）宽度默认是容器（父级宽度）的100%

（4）是一个容器及盒子，里面可以放行内或者块级元素。

• 注意：
  • 只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div
  • 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

2.3行内块元素

常见的行内块元素有<img />、<input />、<td>，可以设置宽高

行内块元素的特点：

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

2.4显示模式转换 display

1.块转行内：display:inline;

2.行内转块：display:block;

3.块，行内元素转换行内块：display：inline-block;

3.行高

3.1 测量行高

基线与基线之间的距离称为行高

3.2 单行文本垂直居中

行高和高度的三种关系

• 如果 行高 等 高度 文字会 垂直居中
• 如果行高 大于 高度 文字会 偏下
• 如果行高小于高度 文字会 偏上

4.背景（background）

• background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
• background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
• background: transparent url(image.jpg) repeat-y scroll center top ;

4.1 背景颜色和图片

颜色：

background-color:颜色值; 默认的值是 transparent 透明的

图片：

background-image : none | url (url)

参数：

none:默认无背景

url:使用绝对地址或相对地址指定背景图像

4.2 背景平铺

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

参数：

repeat:默认图像在横向和纵向上平铺

no-repeat:背景图像不平铺

repeat-x:背景图像在横向上平铺

repeat-y:背景图像在纵向上平铺

4.3 背景位置

background-position : length || length

background-position : position || position

参数：

length:百分数|有浮点数字和单位标识符组成的长度值

position:top|center|bottom|left|right 方位名词

注意：

• 必须先指定background-image属性
• position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
• 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
• 如果只指定了一个方位名词，另一个值默认居中对齐。
• 如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
• 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
• 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

4.4 背景附着

背景表示滚动还是固定

background-attachment: scroll | fixed

参数：

scroll:背景图像是随对象内容滚动

fixed:背景图像固定

4.5 背景透明

background:rgba(0,0,0,0.2);

• 最后一个参数是alpha 透明度 取值范围 0~1之间
• 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
• 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
• 因为是CSS3 ，所以 低于 ie9 的版本是不支持的。

5.css三大特性

5.1 层叠性

css代码按照顺序结构，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

5.2 继承性

子标签会继承父标签的某些样式，如文本颜色和字号。

想要设置一个可继承的属性，只需将它应用于父元素即可。

注意：

• 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
• 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

5.3 优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

• 选择器相同，则执行层叠性
• 选择器不同，就会出现优先级的问题。

通过权重计算来判断

权重叠加：

就是一个简单的加法计算

例如：

• div ul li ------> 0,0,0,3
• .nav ul li ------> 0,0,1,2
• a:hover -----—> 0,0,1,1
• .nav a ------> 0,0,1,1

数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

继承的权重是0：

1） 如果选中了，那么以上面的公式来计权重。谁大听谁的。
0,0,3

• .nav ul li ------> 0,0,1,2
• a:hover -----—> 0,0,1,1
• .nav a ------> 0,0,1,1

数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

继承的权重是0：

1） 如果选中了，那么以上面的公式来计权重。谁大听谁的。
2） 如果没有选中，那么权重是0，因为继承的权重为0.