网络直播|web前端入门教程(非常详细)( 二 )


性能差 , 使用 resst.css 文件 , 会把使用到和使用不到的样式文件都加载进来 , 出现代码冗余 , 所以被一起企业已经抛弃了 。
normalize 与 reset.css 一样 , 是一个样式的重置库 。 主要是为了增强跨浏览器渲染的一致性 。
四、网页中应该使用奇数还是偶数的字体?为什么呢?
答案是:偶数 。
原因:

  • 偶数让文字在浏览器上更好看 。
  • ui 给前端的设计图一般都是偶数 , 这样不管布局也好 , 转换 px 也好 , 会方便一些 。
感兴趣了 , 大家找一个左右对称的文字 , 比如\"中\"、“十”设置一个偶数一个奇数 , 观察下 。
五、css 优先级算法 , 如何计算?
总结性地回答:
选中且设置 !important 的 > 权重高的 > 权重相同位置靠后的 > 来自继承的 。
如果两组选择器都定位到同一元素 , 且对同一属性设置不同的样式 , 则需要分别计算两组选择器的权重来确定优先级 。
一个选择器的优先级可以由四部分计算得分:
  • 千位:如果声明在 style 的属性里 , 则该部分得一分 。
  • 百位:选择器包含 id 选择器 , 则该位得一分 。
  • 十位:选择器包含类、属性选择器和伪类 , 则该位得一分 。
  • 个位:选择器包含标签、伪元素选择器 , 则该位得一分 。

  • 六、css 盒模型是啥?
    网页中每个元素都占有一定的空间 , 可以看成盒子 , 这个盒子的组成有:外边距、元素的边框、元素的内边距、元素的内容 , 这四个部分一起构成了盒子模型 。
    css 的盒子模型分为两种:标准盒子模型和 IE盒子模型 。
    6.1、两种盒子模型的区别:
    标准盒子模型的内容有:margin、border、padding、content 。
    它的 width 一般只包含内容 , 不包含 padding border 和 margin。 盒子的大小会以内容优先 , 自动扩展 , 子元素可以撑开父元素 。
    (标准)盒子总宽度 = margin + border + padding + width
    IE盒子模型的内容有:margin、content (padding + border + content )
    IE 盒子中子元素无法撑开父元素的盒模型 , 元素的宽度实际上包含了 content 、padding 和 border。 所以:
    (IE)盒子总宽度 = margin + width
    6.2、通过 css 如何转换呢?
    使用 box-sizing 属性可以任意转换盒子模型 。 具体的属性值有:
    1、content-box :定义盒子为标准盒子模型 , 也是默认值 。
    2、border-box :定义盒子为 IE 盒子模型 。
    3、inherit :规定从父元素继承 box-sizing 属性的值 。
    通过 box-sizing 属性 , 可以将标准盒子模型和 IE 盒子模型之间进行任意转换 。
    七、一个盒子不给宽高 , 水平垂直居中方式有几种?
    共有 6 种方式 , 分别为:

  1. flex 布局 。 实现方式为 display:flex 、align-item:center 和 justify-content:center。
  2. flex 布局的另外一种实现方式是 display:flex 和 margin:auto 。
  3. grid 布局其中一种实现方式为 display:grid 、align-item:center 和 justify-content:center。
  4. grid 布局另外一种实现方式是 display:grid 和 margin:auto 。
  5. table-cell 。 实现方式为 display:table-cell 、vertical-align:middle 和 text-align:center。
  6. translate + 绝对定位。 实现方式为相对和绝对定位相结合 , 绝对定位的元素添加 left:50%、 top:50% 和 transform:translate(-50%-50%) 。
八、css 中的单位有哪些?以及它们之间的区别 。
css 中的单位共有 15 种 。 它们可分为两大类:
绝对长度:cm、mm、in、px、pt、pc 。
相对长度:ex、ch、em、rpx、rem、vw、vh、vmin、vmax、%。