前端之 css 选择器高级与盒模型
前言
先回顾昨日的内容，昨天讲了 w3c 的整个架构，由结构层>布局层>内容层三部分组成，了解了 css 的三种引入方式，行间式最简单直接；内联式解耦合，可读性强；外联式适合团队高效开发，耦合性低，复用性强，了解了三种选择器，并且 id 选择器>类选择器>标签选择器>通配选择器，还有通过多类名选择器来操作标签。还有常用的长度单位包括 px、cm、mm、em、vw、in，颜色属性有 rgb、rgba 等，还有操作文本样式的属性调整字体大小，字体风格，文本对齐，缩进，字间距，词间距等，其中 font 是综合性描述：font: 风格 大小/行高 字族（风格可以省略），比如font: 100 normal 60px/200px ‘stsong’;shake的过去式最后讲的就是 display，这是一个重点难点，display 目前只介绍了三个属性值：inline：不支持宽高，宽高由文本内容撑开，只能嵌套 inline 标签同行显示；block：像 p 标签，h 标签的 display 属性就是 block，支持所有的 css 样式，默认有宽高（自定义后取自定义值），能嵌套所有标签，异行显示；inline-block：支持所有css 样式，默认没有宽高（由内容撑开（可以自定义宽高））不建议嵌套任意标签，同行显示。
选择器高级
组合选择器
群组选择器
群组选择器可以同时控制多个选择器，语法：逗号分隔，控制多个
<!doctype html><html><head> <meta chart='utf-8'> <title>群组选择器</title> <style type='text/css'> .d高斯公式1,div,#a { color: green; } </style></head><body> <div class='d1'>001</div> <div>002</div> <div id='d3'>003</div></body></html>一次性控制多个选择器选择器之间以,隔开，每一个选择器位均可以为任意合法选择器或选择器组合
子代(后代)选择器
子代选择器用>连接body > div { color: red;}后代选择器用空格连接.sup .sub { color: red;}一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器每一个选择器位均可以为任意合法选择器或选择器组合子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系
相邻(兄弟)选择器
相邻选择器用+连接.d1 + .d2 { color: red;}兄弟选择器用~连接.d1 ~ .d3 { color: red;}一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器每一个选择器位均可以为任意合法选择器或选择器组合相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系
交集选择器
<div class="d" 会议游戏id="dd"></div>div.d#dd { color: red;}<div class="d1 d2 d3"></div>.d1.d2.d3 { color: red;}组合选择器优先级
组合选择器优先级与权值相关，权值为权重和权重对应关系
选择器 | 权重 | 通配1标签10类、属性100id1000!important10000选择器权值比较，只关心权重和，不更新选择器位置不同级别的选择器间不具备可比性：1个类选择器优先级高于n个标签选择器的任意组合
属性选择器
[attr]：匹配拥有attr属性的标签[attr=val]：匹配拥有attr属性，属性值为val的标签[attr^=val]：匹配拥有attr属性，属性值以val开头的标签[attr$=val]：匹配拥有attr属性，属性值以val结尾的标签[attr*=val]：匹配拥有attr属性，属性值包含val的标签
v_hint：属性选择器权重等价于类
v_test：掌握所有选择器，并熟知选择器优先级
伪类选择器
1、a标签四大伪类
:link：未访问状态:hover：悬浮状态:active：活跃状态:visited：已访问状态
2、内容伪类
:before：内容之前:after：内容之后
:before, :after { content: "ctn";}3、索引伪类
:nth-child(n)：位置优先，再匹配类型:nth-of-type(n)：类型优先，再匹配位置
v_hint：值可以为位置数，也可以为2n、3n…，代表2的倍数，3的倍数，且位置数从1开始
4、取反伪类
:not(lector)：对lector进行取反
盒模型
盒模型概念
广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）盒模型组成：margin + bo学考成绩查询rder + padding + content
v_hint：content = width x height
盒模型成员介绍
1、content
通过设置width与height来规定content块级标签可以设置自身宽高，默认宽为父级宽(width=auto)、高为0，高度可以由内容决定内联标签不可以设置自身宽高，默认宽高均为0，宽高一定由内容决定
2、border
border(边框)由border-width(宽度)、border-color(颜色)、bor四级作文万能模板der-style(风格)三部分组成border成员：border-left、border-right、border-top、border-bottomborder-width成员：border-left-width、border-right-width、border-top-width、border-bottom-widthborder-color成员：border-left-color、border-right-color、border-top-color、border-bottom-colorborder-style成员：border-left-style、border-right-style、border-top-style、border-bottom-style
风格 | 解释 | solid实线dashed虚线dotted点状线double双实线groove槽状线ridge脊线int内嵌效果线outt外凸效果线
v_hint：border满足整体设置语法，eg：border: 1px solid red;
3、padding
padding成员：padding-left、padding-right、padding-top、padding-bottompadding整体设置
值得个数 | 方位 | 1上下左右2上下 | 左右3上 | 左右 | 下4上 | 右 | 下 | 左
4、margin
margin成员：margin-left、margin-right、margin-top、margin-bottommargin整体设置
赋值个数 | 方位 | 1上下左右2上下 | 左右3上 | 左右 | 下4上 | 右 | 下 | 左
边界圆角
border-radius
border-radius成员
成员 | 解释 | border-top-left-radius左上 方位border-top-right-radius右上 方位border-bottom-left-radius左下 方位border-bottom-right-radius右下 方位单方位设置
赋值个数(值类型：长度 | 百分比) | 解释 | 1横纵2横 | 纵按角整体设置
赋值个数(值类型：长度 | 百分比) | 解释 | 1左上 右上 左下 右下2左上 右下 | 右上 左下3左上 | 右上 左下 | 右下4左上 | 右上 | 右下 | 左下分向整体设置
格式 | 解释 | 1 / 1横向 | 纵向
其他相关属性
max|min-width|heightoverflow
值 | 描述 | visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。display
值 | 描述 | inline内联block块级inline-block内联块
,1、content
