选择器
- 全局选择器：可以与任何元素匹配，优先级最低，一般做样式初始化
- 元素（标记）选择器：HTML文档中的元素：p\b\div\a\img\vody等标签选择器，选择的是页面上所有这种类型的标签
- 类选择器：规定用圆点.来定义，针对你想要的所有标签使用（优点：灵活，使用率高）
- ID选择器：针对某一个特定的标签来使用，id名称只能使用一次不能重复，id不能以数字开头用#定义。
- 交集选择器：语法：选择器1选择器2{属性：属性值} 选择器之间无缝连接，并集中间用，隔开 只要有选择器1和选择器2才能实现相应的属性
- 并集选择器：语法:选择器1,选择器2……{属性：属性值} 只要有选择器1或者选择器2都会实现相应的属性 作用：提取共同的样式，减少代码重复率
- 关系选择器
- 后代选择器：选择所有被E元素包含的F元素，中间用空格隔开
- 子代选择器：选择作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示语法：E>F{ }
- 相邻兄弟选择器：选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个元素，只能向下选择 语法：E+F{ }
- 通用兄弟选择器：选择E元素之后的所有兄弟元素F，作用于多个元素，用
隔开 语法：EF{ }
优先级
选择器的优先级：行内样式（1000）>ID选择器（100）>类选择器（10）>元素选择器（1） 如果优先级一样，后面的会覆盖前面的，所以最终的效果是后面定义的。 如果在其后面加上!important，则这个选择器的优先级就会变成最高的
CSS盒子模型（Box Model） 在设计和布局时使用
概念：所有HTML元素都可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括：外边框（margin），边框（border），内边框（padding），实际内容（content）。方便后续进行处理和调整
弹性盒模型（flex box） CSS3的一种新的布局模式
定义：CSS3弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间
CSS3弹性盒内容
- 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成
- 弹性容器通过设置dispaly属性的值为flex将其定义为弹性容器
- 弹性容器内包含了一个或多个弹性子元素
温馨提示
- 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局
- 默认弹性盒子内容是横向摆放
父元素上的属性
display属性
diaplay:flex;开启弹性盒（元素默认水平排列）
flex-direction属性
- 指定弹性子元素在夫容器中的位置
- flex-direction：row（横向从左到右排列）/row-reverse（反转横向排列，右对齐，从后往前排）/column（纵向排列）/column-reverse（反转纵向排列）
justify-content属性（上下）
- 把弹性项沿着弹性容器的主轴线对齐
- justify-content：flex-start（弹性项目向行头紧挨着填充）/flex-end（向行尾紧挨着填充）/center（居中紧挨着填充，如果剩余的自由空间是负的，弹性项目将在两个方向上同时溢出）
align-items属性（左右）
- 设置或检索弹性盒子元素在纵轴方向上的对齐方式
- align-items：flex-start（元素的纵轴起始位置紧靠该行的侧轴起始边界）/flex-end（紧靠结束边界）/center（在纵轴上居中）
子元素上的属性
- flex-grow/flex属性
- 根据弹性盒子元素所设置的扩展因子作为比率（权重）来分配剩余空间。默认为0，即如果有剩余空间也不放大，如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1=10%，1=100%，超出按100%
- 设置这个属性后，宽度不再生效。
