1. CSS的元素显示模式
1.1 什么是元素显示模式？
元素（标签）以何种形式显示，不同元素（标签）有不同的显示模式，比如<div>自己独占一行，比如一行可以放多个<span>
1.1.1 块元素(block-level)
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。块元素也叫块标签。
·特点1：独占一行
·特点2：高度（height）、宽度(width)、外边距(margin)以及内边距(padding)都可控制
·特点3：若未设定宽度(width)，则默认是容器（即父级元素宽度）的100%(此处常与CSS继承性混淆)
·特点4：这是一个容器级盒子，里面可放 行内元素 或者 块级元素
注意：
1. 文字类的标签内不能放块级元素,例如<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
2. 同理，<h1>~<h6>、<dt>等均为文字类块级标签，里面也不能放其他块级元素
1.1.2 行内元素(inline-level)
行内元素也称内联元素,常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。行内元素也叫行内标签。
·特点1：相邻行内元素在一行上，一行可以显示多个
·特点2：高(height)、宽度(width)直接设定无效
·特点3：默认宽度是标签内容自身的宽度（因此增加内容能自动撑宽盒子）
·特点4：行内元素只能容纳文本或者其他行内元素（即不能放块级元素）
注意：
·链接标签里不能再放链接
·特殊情况 链接<a>里面可以放块级元素，但是<a>转换为块级元素最安全。因为行内元素<a>经过转换后变成块元素，从而具备块元素的特点，因此才可容纳 行内元素 或者 块级元素
1.1.3 行内块元素(inline-block)
在行内元素中有几个特殊的标签---<img />、<input />、<td>，他们同时具有块元素和行内元素的特点。
·特点1：相邻行内元素（行内块）在一行上，但之间有空白缝隙。一行可以显示多个（行内元素特点）
·特点2：未设定宽度时，默认宽度为自身内容的宽度（行内元素特点）
·特点3：高度，宽度、外边距以及内边距都可以控制（块级元素特点）
2. CSS的背景
2.1 背景颜色
选择器 { background-color:颜色值; }
2.2 背景图片
background-image属性描述了元素的背景图像。
实际开发常见于logo 或 一些装饰性的小图片 或 超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）。
background-image不同于在页面中直接插入图片<img src="#" alt="#">,它是在CSS中通过选择器选中标签，然后插入图片，以作为背景。
语法：
background-image：属性值
属性值：
none 无背景图 丨 url 使用绝对或相对地址指定背景图像2.2 背景图片
2.3 背景平铺
在页面上对背景图像进行平铺，使用background-repeat属性,背景默认平铺。
页面元素既可以添加背景图像，也可添加背景颜色，区别是背景颜色在最底层
2.4 背景图片位置
如果在页面中直接插入图片<img src="#" alt="#">,调整图片的位置会牵扯到其他盒子，而采用背景图片时能十分方便的更改图片的位置。
利用background-position属性能改变图片在背景中的位置(在盒子中的位置)，x表示水平坐标，y表示垂直坐标，xy可以使用方位名词 or 精确单位。
注意：如果实现英雄联盟的大背景图片，则必须给<body>设定background-position，因为该背景图片是在屏幕最下层的。
语法：
background-position:x y ;
参数为方位名词时：
（x：left、center、right ；水平方向：靠左、靠中、靠右对齐）
（y：top、center、bottom；垂直方向：靠上、靠中、靠下对齐）
·如果指定的两个值都是方位名词，则两个值前后顺序无关，例如left top 和top left效果一致（即图片在该盒子里，有2种实际效果一致的对齐方式。第1种，左上；第2种，上左）。
·如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐(center)
参数是精确单位（例如px、%）时：
·如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标(严格的顺序)。例如“background-position: 30px 50px”中，30px表示图片在x轴的刻度坐标为30px，50px表示图片在y轴的刻度坐标为50px。页面的坐标系是特殊的。
·如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
参数是混合单位时：
·如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。
·混合单位经常配合背景图片使用，例如王者荣耀首页，大背景图片距离页面顶部有一定距离（background-position: center 40px），而这个距离常用来放导航栏
2.5 背景图片固定
background-attachment属性设置背景图像是否固定 或 随着页面的其余部分滚动。
利用该属性最常用的是制作视差滚动的效果。
语法：
background-attachment: scroll 丨 fixed ；
属性值：scroll 背景图片随对象内容滚动 丨 fixed 背景图像固定
2.6 背景复合写法(实际开发常用)
为了简化背景属性的代码，以上属性可以合并简写在同一个background中。
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background:background-color丨background-image丨background-repeat丨background-attachment丨background-position
2.7 背景颜色半透明(CSS3新增)
CSS3提供了背景颜色半透明的效果
rgba表示颜色混合，三个0混合正好是黑色，0.3表示黑色的透明度，1为纯黑色。
采用rgba的优点是不需要单独设定"background-color",颜色和透明效果一步到位。
语法：
background: rgba（0， 0， 0， 0.3） ；
属性值：
·最后一个参数是alpha透明度，取值为0~1
·习惯省略0.3的0，只写.3
·背景半透明为盒子的背景半透明，盒子中的内容不受影响
3.CSS的三大特征
3.1 层叠性
该特征对所有CSS样式均有效！
啥叫层叠性？同一内容(HTML标签),若多个相同选择器同时选中该内容，且都指定了相同属性的CSS样式（即属性相同，属性值不同），此时出现到底该执行哪个样式的冲突，由CSS层叠性的就近原则可知，距离内容近的样式就会覆盖（层叠）另一个距离内容远的样式。
层叠性原则：
·相同选择器（例如标签选择器，注意，同一元素可有标签、类等多个不同选择器）
·样式冲突，遵循的原则是就近原则。哪个样式离内容近，执行哪个样式。
·样式不冲突，则不会覆盖 。例如上个div样式设定为red，下面同一个div又设定为pink，此时样式冲突。
·层叠性不限于文本的层叠，所有CSS样式都可以发生层叠。
3.2 继承性
该特征只对文本属性有效！
子标签会继承父标签的某些样式(并非所有样式)，比如文本颜色和字号（text-，font-，line-等开头与文本相关的元素均能继承，以及color属性)。
恰当利用继承性，可以简化代码降低CSS复杂性。
继承性具有一定的传递性，但仅限父子-父子-父子...的嵌套结构中。例如上图，若只设定了<body>的字体颜色和大小，但未设定<li>的字体颜色和大小，则<li>根据继承性原理，自动向上一级寻找样式，结果<ul>没有，则再向上一步寻找，最后找到<body>里有字体颜色和大小。
3.2.1 特别情况：行高的继承
如上图，<body>样式下“font:12px/24px”的意思是，字号(font-size)是12px，行高(line-height)是24px。根据继承性，<div>和<p>将继承<body>的文字类样式。
在实际开发中会有这种写法： ，这是啥意思？按照上例，“/”前是字号，后是行高，而此处“/”后的1.5没有单位px，这表示当前的行高(line-height)是“1.5 × 当前的字号”。
3.2.2 层叠性+继承性+行高特殊写法
如上图，<body>样式设定了字体相关，<div>样式设定了字号大小，根据继承性，<div>的父元素是<body>，则<div>的内容将继承<body>样式，即字体颜色为pink。根据层叠性，<div>的内容执行<div>样式的20px字号。根据“/”的含义，<div>的内容的行高(line-height)是“1.5 × 当前的字号”，等于1.5 × 20px。
7.3 优先级
当一个元素对应了多个不同选择器(例如<div class="nav">对应“div”和“.nav”两个选择器)，就会产生优先级
·选择器一模一样，则执行层叠性
·选择器不同，则根据选择器权重执行
| 选择器 | 选择器权重 |
| 继承 或 * | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器、伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式 style="" | 1,0,0,0 |
| !important | 无穷大 |
注意：
1.元素选择器也叫标签选择器
2.权重是有4组数字组成，但不能进位
3.类选择器永远大于元素选择器，ID选择器永远大于类选择器，以此类推
4.等级判断从左向右，如果某一位数值相同，则判断下一位数值
5.简单记忆：通配符和继承的权重为0，标签选择器为1，类和伪类选择器伪10，id选择器为100，行内样式表为1000，!important为无穷大(使用方式是直接放在属性值后面-"color:pink!important")
6.继承样式所对应的权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。继承一般发生在文本类样式上(text-、line-、font-、color等)，所以一般能继承的样式都和文本相关
6.1 关于继承样式所对应的权重。一定要看该元素是否直接被选中，如果多个选择器均有选中该元素，则权重逐层叠加，叠加值大者，执行大者的属性；如果该元素没有选择器被选中，则权重为0，因为继承的权重为0
例如上图，<p>在页面中显示什么颜色？先看结构，<p>为子元素，<div>为父元素，子元素将继承父元素的文本类属性；再看CSS选择器情况，两个选择器不同，进行权重大小比较，“#father”ID选择权重"0,1,0,0",“p { }”元素(标签)选择器权重"0,0,0,1"，但是<p>继承<div>的颜色属性，但其权重为0。故最后显示pink色
<a>的特例：如上图，<a>没有被直接选中，同时CSS中只有一个样式，不构成冲突，故应该不遵守优先级。所以根据继承性(文字类特性)<a>应该继承<body>设定的红色。但实际情况是<a>样式为蓝色且有下划线，因为浏览器为<a>链接默认制定了一个样式，蓝色有下划线。
7.3.1 权重的叠加(仅限复合选择器)
如果是复合选择器，则会有权重叠加，需要计算权重。不是复合选择器，则不存在权重叠加问题。权重虽然会叠加，但永远不会进位。复合选择器权重叠加时，继承权重为0失效，按照单个选择器的权重依次累加。
常用的复合选择器是基础选择器组合而成的
包括：后代选择器、子选择器、并集选择器、伪类选择器、伪元素选择器、属性选择器等
124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
