前端CSS小知识（持续更新....）

前端CSS小知识（持续更新....）

CSS 水平居中/垂直居中

水平居中

• 行内元素
  • 如父元素是块级元素，则直接给父元素添设置 text-align: center;
  • 如父元素不是块级元素，则将父元素设置为快元素，再设置 text-align: center;
• 块级元素
  • 元素宽度确定，则给元素设置为 margin: 0 auto;
  • 元素快读不确定，子元素默认宽度和父元素一样，需要将子元素改为 display:inline;或display:inline-block; 即将其转为行内块元素/行内元素，然后给父元素设置 text-align: center;
• 使用定位position属性 （首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50% ，即让子元素的左上角水平居中）
  • 元素宽度确定，设置绝对子元素的margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);
  • 元素宽度不确定,利用css3新增属性transform: translateX(-50%);
• 使用flexbox布局实现（宽度定不定都可以）
  • 使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

垂直居中

• 单行的行内元素
  • 只需要设置单行行内元素的"行高等于盒子的高"。
• 多行的行内元素
  • 父元素设置display:table-cell;vertical-align: middle;
• 块级元素--使用定位position属性 （首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50% ，即让子元素的左上角垂直居中）
  • 元素高度确定，设置绝对子元素的margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);
  • 元素高度不确定，利用css3新增属性transform: translateY(-50%);
• 块级元素--使用flexbox布局实现
  • 使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

水平垂直居中

• 高度和宽度确定的元素
  • 设置父元素为相对定位position：relative;，给子元素设置绝对定位position：absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
  • 设置父元素为相对定位position：relative;，给子元素设置绝对定位position：absolute; left: 50%; top: 50%; margin-left: -元素宽度的一半px; margin-top: -元素高度的一半px;
• 高度和宽度不确定的元素
  • 使用定位属性；设置父元素为相对定位position：relative;，给子元素设置绝对定位position：absoluteleft: 50%; top: 50%; transform: translateX(-50%); translateY(-50%);
  • 使用flex布局实现；设置父元素为flex定位，设置属性justify-content: center; align-items: center;

CSS 选择器及选择器优先级

特性

• 继承： 即子类元素继承父类的样式;
• 优先级： 是指不同类别样式的权重比较;
• 层叠： 是说当数量相同时，通过层叠(后者覆盖前者)的样式。

css选择符分类

1. 标签选择器 (如：body,div,p,ul,li)
2. 类选择器 (如：class="head",class="head_logo")
3. ID选择器 (如：id="name",id="test")
4. 全局选择器/通配符 (如：*号)
5. 组合选择器 (如：.head .head_logo,注意两选择器用空格键分开)
6. 后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)\
7. 群组选择器 (div,span,img {color:Red} 即具有相同样式的标签分组显示
8. 继承选择器 (如：div p,注意两选择器用空格键分开)
9. 伪类选择器 (如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)
10. 字符串匹配的属性选择符 (^ $ *三种，分别对应开始、结尾、包含)
11. 子选择器 (如：div>p ,带大于号>)
12. 相邻兄弟选择器 (如：h1+p,带加号+)

css选择符分类

如果在同一html元素上定义的属性有冲突，CSS有一套优先级规则来判断哪个属性起作用。

• 在同一级别中后写的会覆盖先写的样式；
• 在不同级别中会遵循下面排序选择器权重一次减小 !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性；
• 在复杂的组合中是由四个级别和各级别的出现次数决定的（行内选择符、ID选择符、类别选择符、元素选择符）；把对应的权值做加法，比较权值，如果权值相同那就后面的覆盖前面的了；
  • 内联样式表的权值为 1000
  • ID 选择器的权值为 100
  • 类别选择器的权值为 10
  • 元素标签选择器的权值为 1

Tips

• !important的优先级是最高的，但出现冲突时则需比其权值；
• 优先级相同时，则采用就近原则，选择最后出现的样式;
• 继承得来的属性，其优先级最低；
• css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化。
• 郑重的声明选择器定位DOM元素是从右往左的方向，这样的好处是尽早的过滤掉一些无关的样式规则和元素 。