热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

关于javascript:2021应届秋招前端面经一CSS部分

SpecificityisthemeansbywhichbrowsersdecidewhichCSSpropertyvaluesarethemostrelevanttoanelementand,therefore,willbeapplied.SpecificityisbasedonthematchingruleswhicharecomposedofdifferentsortsofCSSselect

CSS

css权重 (Specificity)

  • 较长的css选择器权重会大于较短的css选择器
  • id选择器权重高于class选择器

官网文档阐明:

  • Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors
  • 官网文档中用 Specificity: 特异性 来示意一个 css selector 和其元素的相关性. 相关性越强, 即示意示意其权重最高。
  • Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector
  • Specificity 是由 selector 中 不同 selector type 的数目决定的。

依据 W3 规范中的规定, css selector 分为 4 种 type: a, b, c, d. 他们的数目计算规定为:

  • a: 如果 css 属性申明是写在 style=“” 中的, 则数目为 1, 否则为 0
  • b: id 选择器的数目
  • c: class 选择器, 属性选择器(如 type=“text”), 伪类选择器(如: ::hover) 的数目
  • d: 标签名(如: p, div), 伪类 (如: :before)的数目

在比拟不同 css selector 的权重时, 依照 a => b =>c => d 的程序进行比拟.
由第一个 selector type a 的计算规定可知: 写在 html 代码 style 属性中的 css 相较写在 css 选择器中的 css 属性具备最高的优先级。
而 id selector (b) 相较 class selector (c) 有更高的优先级. 这也和咱们平时的教训相吻合。

  • 除了下面 Specificity 计算规定中的 css 选择器类型, 还有一些选择器如: *, +, >,:not() 等. 这些选择器并不会被计算到 css 的权重当中 。
  • 有一个须要特地留神一下的选择器: :not(), 尽管它自身是不计权重的, 然而写在它外面的 css selector 是须要计算权重的。
  • 如果 a,b,c,d 算完都一样,最初申明的 css selector 会失效。
  • 如果我反复同样的 css selectory type, 权重会被反复计算。

对于!important:
依照 MDN的说法, !important 是不在 css 选择器的权重计算范畴内的, 而它之所以能让 css 选择器失效是因为浏览器在遇见 !important 时会进行非凡的判断. 当多个 !important 须要进行比拟时, 才会计算其权重再进行比拟.
通常来说, 不提倡应用 !important. 如果你认为肯定要应用, 无妨先自检一下:

  • 总是先思考使用权重更高的 css 选择器, 而不是应用 !important
  • 只有当你的目标是笼罩来自第三方的 css(如: Bootstrap, normalize.css)时, 才在页面范畴应用 !important
  • 永远不要 在你写一个第三方插件时应用 !important
  • 永远不要在全站范畴应用 !important

css 行内 块级 及 行内块级元素

块级元素 block:
顾名思义,该元素出现“块”状,所以它有本人的宽度和高度,能够自定义width和height。并且单独占据一行高度(float浮动除外),个别可作为其余容器应用,可包容块级元素和行内元素。
块级元素有以下特点:

  • 每个块级元素都是独占一行。
  • 元素的高度(height)、宽度(width)、行高(line-height)和边距(margin,padding)都是能够设置的。
  • 元素的宽度如果不设置,默认为父元素的宽度(父元素宽度100%)

常见的块元素:

                
//定义地址
//定义文档中的分页区或节
//定义列表
//定义列表中的我的项目 //创立html表单

-->

//定义题目
//水平线
  • //定义列表我的项目
      //定义有序列表