css提升

css提升

1.css复合选择器

选择器	语法	注意
交集选择器	标签类、id选择器{代码}	中间不能有空格及其它的符号
并集选择器	标签，类、id选择器{代码}	中间以逗号隔开
后代选择器(重点)	标签   类、id选择器{代码}	中间以空格隔开
子代选择器(重点)	标签>类、id选择器{代码}	中间以大于号隔开

• 交集选择器:由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
• 并集选择器：是各个选择器通过逗号连接而成的
• 后代选择器：用来选择元素或元素组成的子孙后代。
• 子代选择器：子元素选择器只能选择作为某元素子元素(亲儿子)的元素，且不包含重子孙

2. display：标签显示模式(重点)

2.1 display属性值(常用 )

属性	类别
block-level	块级元素
inline-level	行内元素
inline-block	行内块元素

2.2.1 块级元素block-level

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

元素特点:

1. 总是从新行开始。
2. 高度、宽度、行高、外边距以及内边距都可以控制。
3. 宽度默认是容器的100%。
4. 可以容纳内联元素和其他块元素。

2.2.2 行内元素inline-level

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

行内元素的特点：

1. 和相邻行内元素在一行上。
2. 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
3. 默认宽度就是它本身内容的宽度。
4. 行内元素只能容纳文本或则其他行内元素。（a特殊）

注意:

1. 只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2. 链接里面不能再放链接。

2.3 行内块元素inline-block

在行内元素中有几个特殊的标签<img />、<input />可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：

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

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

2.2 标签显示模式转换 display

• 块转行内：display:inline;
• 行内转块：display:block;
• 块、行内元素转换为行内块： display: inline-block;

3. CSS三大特性

3.1 css层叠性

当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

3.2 css继承性

​ 注意：

1.**所以对于字体、文本属性等网页中通用的样式可以使用继承。**例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中所有文本。

2.并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：边框、外边距、内边距、背景、定位、元素高属性。

3.3css优先级

!important>行内样式表>ID选择器>类选择器>标签选择器>通配符>继承的样式>浏览器默认样式

• 注意:
• 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
• 行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
• 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
• CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

3.4补充（权重计算）

关于CSS权重，用一个四位的数字串来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	∞ 无穷大

注意:权重是可以叠加的

4.背景样式(重点)

4.1背景颜色background-color

属性名	background-color
属性值	合法的颜色的名，比如：red；十六进制值，比如：#ff0000；RGB 值，比如：rgb(255,0,0)
默认值	transparent
描述	设置背景颜色。

示例如下：

.box {
    /* 下面3种写法是等价的 */
    background-color: red;
    background-color: rgb(255, 0, 0);
    background-color: #ff0000;
}

4.2 背景图片background-image

属性名	background-image
属性值	图片所在路径
默认值	none
描述	设置背景图片。

示例如下：

.box {
    background-image: url("图片位置");
}

4.3 图片重复方式background-repeat

属性名	background-repeat
属性值	repeat | repeat-x | repeat-y | no-repeat
默认值	repeat
描述	设置背景图片。

属性值

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。

示例如下：

.box {
    /* repeat 默认值，默认情况下，在水平和垂直方向上都重复*/
    background-repeat: repeat;
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-repeat: no-repeat;
}

4.4 图片位置background-position

属性名	background-position
属性值	长度 | 百分比 | 表示方位的单词
默认值	0% 0%
描述	背景图片的位置

示例如下：

/*
    水平：left center right
    垂直：top  center bottom
*/

.box {
    background-position: 40px 40px;（水平位置、垂直位置）
    background-position: 20% 20%;
    background-position: right bottom;
}

4.5图片附着(了解)background-attachment

属性名	background-attachment
属性值	scroll | fixed
默认值	scroll
描述	设置背景图像是否固定或者随着页面的其余部分滚动。

示例如下：

.box {
    /*  背景图随着页面内容滚动 */
    background-attachment: scroll;
    /*  背景图不会随着页面内容滚动 */
    background-attachment: fixed;
}

4.6简写属性

.box {
    /* 颜色  图片 平铺 位置   */
    background: #00ff00 url("index.png") no-repeat fixed center;
}

4.7 背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值、十六进制、RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat、no-repeat、repeat-x、repeat-y
background-position	背景位置	length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
background-attachment	背景固定还是滚动	scroll、fixed
背景简写	更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值
背景缩放	背景图片的尺寸	长度单位、cover、contain