八、基础选择器
CSS（层叠样式表）选择器是CSS规则的一部分，用来指定需要设置样式的HTML元素。
通过选择器可以实现CSS对HTML元素的一对一、一对多、多对一的控制。
1、通配选择器
可以与其他选择器相结合，选择某元素下的所有元素
/* 选择类名为box的元素的所有后代，添加一个黑色的字体颜色 */ .box * { color: #000; }
由于每个浏览器对元素的默认边距不一致，通配选择器常用于reset样式文件中，覆盖浏览器的默认样式
* { margin: 0; padding: 0; border: 0; }
2、标签选择器
标签选择器也常用于reset样式文件中，用于清除元素的默认样式，如li标签的小圆点、a标签的下划线等
3、id选择器
id属性的属性值应当是当前文档唯一
4、类选择器
class属性值在文档中可以重复
5、组合选择器
通过间隔符将基础选择器连接起来，实现组合选择的效果
九、伪类选择器
将伪类与选择器相结合，可以指定选择元素的特殊状态，也可以根据元素的所处的状态应用不同的样式，掌握伪类选择器可以帮助我们实现更加丰富的样式。
十、伪元素选择器
伪元素选择器通过选择元素的某个部分，对元素的特定部分单独设置样式。伪元素是某个元素的子元素，是逻辑上存在的虚拟元素，但是实际并不存在与DOM树中。
一个选择器只能使用一个伪元素，伪元素必须在基础选择器语句后使用
为了便于区分伪类选与伪元素，使用双冒号 :: 作为伪元素选择符
十一、CSS优先级
当创建的CSS样式表越来越多、越来越复杂的时候，一个元素的样式可能受到多个CSS样式表的影响，到底这个元素显示的是哪个样式表的样式呢？通过CSS优先级可以帮助我们得出结论。
1、CSS优先级
浏览器通过CSS选择器的优先级来判断元素到底应该显示那个属性值
CSS的优先级如下
内联样式 > ID选择器 > 类选择器、属性选择器、伪类选择器 > 标签选择器 、伪元素选择器
通配符选择器 * 和关系选择符 +（相邻选择符）、>（子代选择符）、~（兄弟选择符）、" "（后代选择符）等对优先级没有影响
在选择器使用较多的情况下，使用CSS优先级判断元素的属性值显示很容易出错且不利于排错，可以通过给选择器添加权重的概念来帮助我们更好的理解CSS选择器的优先级
2、选择器权重计算
选择器的权重可以相加
#header .nav li { list-style: none; }
该选择器的权重 = ID选择器100 + 类选择器10 + 标签选择器1 = 111
对于同一个元素的两种选择器均声明了同一个属性情况
权重相同时，根据HTML代码从上往下执行的特点，后面选择器会覆盖前面选择器中相同的属性
权重不同时，权重大的选择器生效
3、!important规则
当你在一个样式声明中使用 !important 规则时，这个样式将覆盖其他的任何声明
!important 规则与优先级无关，但是会直接影响样式的最终显示结果
十二、块级元素与行内元素
HTML（超文本标记语言）中元素大多数为块级元素或行内元素，浏览器在显示页面时，对这两类元素的默认处理方式是不一样的。
1、块级元素
- 在浏览器显示时总是独占一行
- 宽高、内外边距可以控制，且上下左右的外边距均可对周围元素产生影响
- 可以包含内容、行内元素和其他块级元素
- 宽度未设置时默认为其父级元素的宽度，高度未设置时为内容的高度
- 常见块级元素：div、form、footer、h1-h6、ol、ul、p、video
- 设置 display 属性为 display: block 可将元素转换为块级元素
2、行内元素
- 不独占一行，默认不自动换行
- 宽高、上下边距不可以控制，仅有左右边距可以控制且会对周围元素产生影响
- 一般只能包含内容和其他行内元素，不可包含块级元素
- 设置宽高无效，宽高默认为内容的宽高
- 常见行内元素：span、label、a、em、strong、img
- 设置 display 属性为 display: inline 可将元素转换为行内元素
3、行内块级元素
- 综合块级元素与行内元素的特性
- 不独占一行
- 元素宽高、内外边距均可设置，上下左右边距均会对周围元素产生影响
- 宽高未设置时默认为内容宽高
- 常见行内块级元素：button、input、textarea、select
- 设置 display 属性为 display: inline-block 可将元素设置为行内块级元素
十三、盒子模型
所有的HTML元素都可以看做是一个盒子模型，每个盒子模型包含外边距、内边距、边框、实际内容四个部分，通过对以上四个部分的属性设置可以极大的丰富盒模型乃至整个HTML文档的表现效果和布局结构。
1、概念
当对一个页面进行布局（lay out）的时候，浏览器会将所有元素表示为一个个矩形的盒子（box），HTML页面可以理解为将多个盒子堆叠累加而成。
2、盒子模型组成部分
<style> div{ width: 100px; height: 100px; margin: 50px; padding: 15px; } </style> <div></div>
盒模型由里到外包括四个部分：
- 内容部分
- padding（内边距）
- border（边框）
- margin（外边距）
内容部分一般用来显示图像或文字，在标准盒模型中（默认），内容部分的宽高可以通过width、height属性设置
padding（内边距） 是包围在内容区域外的空白区域，代表的是盒子边框与实际内容之间的距离，通过 padding 相关属性设置大小
border 指的是盒子模型的边框。border除了可以使用 border-width 设置边框大小外，可以使用 border-style 设置边框的样式，如实线、虚线，使用 border-color 设置边框颜色
margin（外边距） 指的是盒子和其他元素之间的空白部分，代表的是盒子的边框与其他相邻盒子边框之间的距离，通过 margin 相关属性设置大小
3、标准盒模型与怪异盒模型的区别
3.1标准盒模型
标准盒模型结构图
在标准盒模型中，给盒模型设置width和height，实际上是给内容区域设置大小
标准盒模型的盒子实际宽高 = 内容区域的宽高 + border大小 + padding大小
如果将div设置为标准盒模型 box-sizing：content-box ，CSS设置如下
div{ width: 100px; height: 100px; margin: 50px; padding: 15px; box-sizing: border-box; }
检查元素如下图所示，div设置的 width 和 height 是100×100，div的实际大小是 130×130 ，div的实际宽度 = width + padding-left + padding-right + border-left + border-right = 100+ 15 + 15 + 0 + 0 = 130，div的实际高度计算同理
div在标准盒模型中的实际大小
标准盒模型属性
3.2怪异盒模型
在怪异盒模型中，给盒模型设置的 width 和 height 就是盒模型的实际大小，宽高已经包含了 border 和 padding
怪异盒模型的 实际大小 = 盒模型设置的 width、height（包含border和 padding）
在怪异盒模型中，内容部分的 实际宽高 是 盒模型的宽高减去padding和border
例如将div设置为怪异盒模型 box-sizing：border-box ，CSS设置如下
div{ width: 100px; height: 100px; margin: 50px; padding: 15px; box-sizing: border-box; }
检查元素如下图所示，div设置的width和height设置为100×100，实际大小也是 100×100，div的实际宽度 = width，div的实际高度 = height
div在怪异盒模型中的实际大小
怪异盒模型属性
不管是标准盒模型还是怪异盒模型，margin 都不计入盒子的实际大小。但是 margin会影响盒模型所占空间，即影响的盒子模型的外部空间。在计算盒子模型的实际占位大小时才会将 margin 计入其中。
浏览器默认使用标准盒模型，如需使用怪异盒模型，可用通过将盒模型设置为 box-sizing: border-box 实现
十四、定位
在一个网页的排版布局中，定位属性是最重要的属性之一，能够熟练使用定位布局对页面美化有很好的帮助。
1、脱离文档流
文档流指的是在元素排版过程中，元素会自动从上至下，从左往右流式排列，当文档流
元素脱离文档流后，将不在文档流中占据空间，元素浮于文档流的上方，此时元素层级发生变化
2、position定位
- position 属性用于指定元素的定位类型，属性值可为
- static（默认定位）
- relative（相对定位）
- absolute（绝对定位）
- fixed（固定定位）
- sticky（粘性定位）
设置定位类型后可以通过设置 top、right、bottom、left 属性确定定位的位置
2.1 static定位
页面上的每个盒子从上到下、从左到右依次排列的布局
<style> .box1{ width: 100px; height: 100px; border: 1px red solid ; } .box2{ width: 100px; height: 100px; border: 1px blue solid ; } </style> <div class="box1">box1</div> <div class="box2">box2</div>
static定位示例
2.2 relative定位
相对于元素自身原始位置定位，元素不脱离文档流，即原来元素所占的空间不会改变
上述 static 定位示例代码中，将 box1 设置以下属性，元素会相对于自身原始位置向右偏移 10px ，向下偏移 10px
<style> .box1{ width: 100px; height: 100px; border: 1px red solid ; position: relative; top: 10px; left: 10px; } .box2{ width: 100px; height: 100px; border: 1px blue solid ; } </style> <div class="box1">box1</div> <div class="box2">box2</div>
relative定位示例
2.3 absolute定位
元素相对于最近的非 static 定位的祖先元素定位进行偏移，元素脱离文档流
上述 static 定位示例代码啊中，将 box2 以及其父级元素 box-container 设置如下属性
box2 元素相对于 relative 定位的 box-container 向右偏移 10px ，向下偏移 10px
<style> .box1{ width: 100px; height: 100px; border: 1px red solid ; } .box2{ width: 100px; height: 100px; border: 1px blue solid ; position: absolute; top: 30px; left: 25px; } </style> <div class="box1">box1</div> <div class="box2">box2</div>
absolute定位示例
2.4 fixed定位
相对于浏览器窗口进行定位，元素脱离文档流
常用于顶部导航栏、顶部搜索框、侧边联系客服等板块
2.5 sticky定位
存在兼容性问题
根据自身原始位置或浏览器窗口进行固定定位，类似relative和fixed的结合
常用于页面的搜索工具栏，初始加载在默认位置（相当于relative），页面向下滚动时，工具栏固定在页面头部（相当于fixed），页面重新向上滚动，工具栏也会回到默认位置
3、层级属性z-index
用于设置元素的堆叠顺序，该属性仅能在非static定位的定位元素上生效
数值越高，层级越高，层级高的元素会覆盖层级低的元素（层级高的元素会在层级低的元素上方）
z-index 属性值相同时，遵循后来者居上的原则，后面的元素会覆盖前面的元素
下面的 absolute 定位的示例中，给box1、box2添加背景后可以清晰看见，box2覆盖box1
<style> .box1{ width: 100px; height: 100px; background-color: red; position: absolute; } .box2{ width: 100px; height: 100px; background-color: blue; position: absolute; top: 30px; } </style> <div class="box1">box1</div> <div class="box2">box2</div>
absolute 定位层级示例
将 box1、box2 增加以 z-index 属性，可将 box1、box2 层级改变，使 box1 在 box2 的上方
<style> .box1{ width: 100px; height: 100px; background-color: red; position: absolute; z-index: 1; } .box2{ width: 100px; height: 100px; background-color: blue; position: absolute; top: 30px; z-index: 0; } </style> <div class="box1">box1</div> <div class="box2">box2</div>
z-index 调整后示例
十五、浮动
浮动属性产生之初是为了实现“文字环绕”的效果，让文字环绕图片在网页实现类似word中“图文混排”。
后可用于所有元素，在页面布局中发挥重要作用。
1、float属性
用于设置元素是否浮动，absolute（绝对）定位的元素会忽略 float 属性
元素浮动后会被移出正常的文档流，向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
下表为float可设置的属性值
2、clear属性
用于清除浮动，给元素清除浮动后，元素将会排在该元素之前的浮动元素下方
下表为float可设置的属性值
<style> .layout { width: 120px; height: 300px; margin: 10px; background-color: cadetblue; float: left; } .content { width: 340px; height: 300px; margin: 10px; background-color: powderblue; float: left; } footer { width: 500px; height: 40px; background-color: darkseagreen; } </style> <main> <section class="layout">侧边栏</section> <section class="content">内容</section> </main> <footer></footer>
在以上代码使用浮动实现两列布局中，main 中的 section 都为浮动元素，main 元素的高度为0无法被撑开
main后的footer元素在页面布局时无法在main后正常显示
未清除浮动布局示例
section 元素左浮动，此时将 footer 元素左侧浮动清除，即可将 footer 元素置于 main 元素下方
/* 清除左右两侧浮动 */ footer { clear: both; } /* 或清除左侧浮动 */ footer { clear: left; }
清除浮动后布局示例
3、浮动布局
浮动在布局中最常用于实现两列布局或三列布局
在使用浮动属性实现三列布局的时候常用，左侧盒子左浮动，右侧盒子右浮动，中间的盒子左右外边距设置大于左右两侧盒子大小即可
以下为三列布局的简单实现代码
<style> main { width: 500px; height: 300px; margin: 50px; } .left { width: 100px; height: 300px; background-color: cadetblue; float: left; } .center { width: 300px; height: 300px; background-color: lightblue; margin: 0 100px; } .right { width: 100px; height: 300px; background-color: cadetblue; float: right; } </style> <main> <div class="left"></div> <div class="right"></div> <div class="center"></div> </main>
浮动实现三列布局示例
十六、多媒体查询
使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式
使用 @media 规则可以针对不同媒体类型定制不同的样式规则。
媒体查询可用于检测示例：
- viewport（视窗）的宽度与高度。
- 设备的宽度与高度。
- 朝向（智能手机横屏，竖屏）。
- 分辨率。
目前很多针对手机，平板等设备都会使用到多媒体查询。
1、使用多媒体查询
多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。
@media not|only mediatype and (expressions) { /* CSS 代码... */ }
如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。
除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。
- not： 用来排除掉某些特定设备的，比如 @media not print（非打印设备）
- only： 用来定某种特别的媒体类型。
- all： 所有设备，这个应该经常看到。
也可以在不同的媒体上使用不同的样式文件：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css" />
多媒体类型
2、多媒体特征
创建媒体查询时，最常用的是设备的 视口宽度（width） 和 屏幕宽度（device-width） 。
下面是所有可供媒体查询检测的特性：
- width：视口宽度。
- height ：视口高度。
- device-width ：渲染表面的宽度（设备屏幕的宽度）。
- device-height ：渲染表面的高度（设备屏幕的高度）。
- orientation ：检查设备处于横向还是纵向。
- aspect-ratio ：基于视口宽度和高度的宽高比。 16∶9 比例的显示屏这样定义 aspect-ratio: 16/9。
- device-aspect-ratio ：和 aspect-ratio 类似，基于设备渲染平面宽度和高度的宽高比。
- color ：每种颜色的位数。例如 min-color: 16 会检测设备是否拥有 16 位颜色。
- color-index ：设备的颜色索引表中的颜色数。值必须是非负整数。
- monochrome ：检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如：monochrome: 2。
- resolution ：检测屏幕或打印机的分辨率，如 min-resolution: 300dpi。可以接受每厘米像素点数的度量值，如 min-resolution: 118dpcm。
- scan ：电视机的扫描方式，值可设为 progressive（逐行扫描）或 interlace（隔行扫描）。
- grid ：用来检测输出设备是网格设备还是位图设备。
在上述所有特性中，除 scan 和 grid 之外，都可使用 min 和 max 前缀来创建一个查询范围
@import url("phone.css") screen and (min-width: 200px) and (max-width: 460px);
这里对 width 应用了 min 和 max 来设定查询范围。这样 phone.css 文件只会引入视口宽度介于 200 像素至 460 像素的显示屏设备。
