前言

在前几天的面试题中，碰到了一些css的问题。发现自己虽然可以答出大部分的东西，但是还是有一些不太常见的地方说的不准确。

CSS

CSS就是指层叠样式表(Cascading Style Sheets)，主要是用来定义如何显示HTML文档。是页面更加好看，美观。

选择器

选择器就是用来通过某些条件来选择与CSS规则相匹配的HTML元素。
选择器主要有以下这些

  • 通配符（*）：通配符会匹配HTML文档的所有元素
  • 元素选择器：例：body{}选择HTML文档中的body元素
  • 类选择器：例：.wrapper{}选择HTML文档中class属性为wrapper的元素
  • id选择器：例：#root选择HTML文档中id属性为root的元素
  • 后代选择器：例：body .wrapper{}选择body元素中的子元素类名为wrapper的元素
  • 相邻元素选择器：例：div + p{}与div相邻的p元素（ps：div和p有同一个父级）
  • 属性选择器：例：input[type='text']{}选择input中type为text的元素
  • 伪类选择器：例：div:hover{ cursor:'pointer'}会在鼠标滑过div时把鼠标变成一个小手

优先级

对于选择器来说，是会有优先级的。主要指浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。
优先级的计算方式：!important > 内联 > id选择器(#) > 类选择器(.) > 元素选择器

继承

html元素可以从父元素那里继承一部分css属性，即使当前元素没有定义该属性。这样可以少重复定义很多的属性。

  • 不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
  • 所有元素可继承：visibility和cursor。
  • 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
  • 终端块状元素可继承：text-indent和text-align。
  • 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
  • 表格元素可继承：border-collapse。

CSS3

CSS3其实也没有什么很多东西，主要就是对于CSS的一些补充和加强。

  • font-face 可以设置字体集
  • @media 媒体查询，可以设置元素在不同分辨率下的css
  • transform 对元素进行2d、3d转换实现对元素的移动、缩放、转动、拉长或拉伸。
  • transition 过渡 元素从一种样式逐渐改变为另一种的效果。
  • border-radius 边框圆角 是边框可以有圆角
  • box-shadow 边框阴影
  • box-sizing 盒子模型 设置width和height是否包括内边距（padding）和外边距（margin）
    • border-box：设置的 width/height = width/height + margin + padding
    • content-box：设置的width/height = width/height
  • animation，@keyframes 动画
  • flex 弹性布局模式 使布局更加舒服

总结

css虽然平时用起来其实并不难，可实际上还是有很多的知识点需要学习。毕竟世界不是一成不变的。很多时候都需要发展才能更好的满足开发需要。哦对了,这里强烈推荐张鑫旭的博客网站。他对于css的理解真的非常深，网站有很多好文，看了让人受益良多。
That’s all! Thanks for watching!