CSS

2019-06-27

1. 盒模型

页面渲染时，dom 元素所采用的 布局模型。可通过box-sizing进行设置。根据计算宽高的区域可分为：

  • content-box (W3C 标准盒模型)
  • border-box (IE 盒模型)
  • padding-box
  • margin-box (浏览器未实现)

box-sizing: content-box（W3C盒子模型）：元素的宽高大小表现为内容的大小。
box-sizing: border-box（IE盒子模型）：元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。
IE5.x和IE6在怪异模式中使用非标准的盒子模型，这些浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

2. BFC

块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

  • IE下为 Layout，可通过 zoom:1 触发

触发条件:

  • 根元素
  • position: absolute/fixed
  • display: inline-block / table
  • float 元素
  • ovevflow !== visible

规则:

  • 属于同一个 BFC 的两个相邻 Box 垂直排列
  • 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
  • BFC 中子元素的 margin box 的左边， 与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
  • BFC 的区域不会与 float 的元素区域重叠
  • 计算 BFC 的高度时，浮动子元素也参与计算
  • 文字层不会被浮动层覆盖，环绕于周围

应用:

  • 阻止margin重叠
  • 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
  • 自适应两栏布局
  • 可以阻止元素被浮动元素覆盖

3.层叠上下文

元素提升为一个比较特殊的图层，在三维空间中 (z轴) 高出普通元素一等。
触发条件

  • 根层叠上下文(html)
  • position
  • css3属性
        flex
        transform
        opacity
        filter
        will-change
        -webkit-overflow-scrolling

层叠等级：层叠上下文在z轴上的排序

  • 在同一层叠上下文中，层叠等级才有意义
  • z-index的优先级最高

background/border
z-index为负值
块级元素
浮动元素
行内元素
z-index:0/auto
z-index为正值

4. 居中布局

  • 水平居中
  • 行内元素: text-align: center
  • 块级元素: margin: 0 auto
  • absolute + transform
  • flex + justify-content: center

垂直居中

  • line-height: height
  • absolute + transform
  • flex + align-items: center
  • table

水平垂直居中

  • absolute + transform
  • flex + justify-content + align-items

5. 选择器优先级

  • !important > 行内样式 > #id > .class > tag > * > 继承 > 默认
  • 选择器 从右往左 解析

6.去除浮动影响，防止父级高度塌陷

  • 通过增加尾元素清除浮动
  • :after / br标签 : clear: both
  • 创建父级 BFC
  • 父级设置高度
  • link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css
  • 当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载
  • @import需要 IE5 以上才能使用
  • link可以使用 js 动态引入，@import不行

8. CSS预处理器(Sass/Less/Postcss)

CSS预处理器的原理: 是将类 CSS 语言通过 Webpack 编译 转成浏览器可读的真正 CSS。在这层编译之上，便可以赋予 CSS 更多更强大的功能，常用功能:

  • 嵌套
  • 变量
  • 循环语句
  • 条件语句
  • 自动前缀
  • 单位转换
  • mixin复用

面试中一般不会重点考察该点，一般介绍下自己在实战项目中的经验即可

9.CSS动画

transition: 过渡动画

  • transition-property: 属性
  • transition-duration: 间隔
  • transition-timing-function: 曲线
  • transition-delay: 延迟
  • 常用钩子: transitionend

animation / keyframes

  • animation-name: 动画名称，对应@keyframes
  • animation-duration: 间隔
  • animation-timing-function: 曲线
  • animation-delay: 延迟
  • animation-iteration-count: 次数
        infinite: 循环动画
  • animation-direction: 方向
        alternate: 反向播放
  • animation-fill-mode: 静止模式
        forwards: 停止时，保留最后一帧
        backwards: 停止时，回到第一帧
        both: 同时运用 forwards / backwards
  • 常用钩子: animationend

动画属性: 尽量使用动画属性进行动画，能拥有较好的性能表现

  • translate
    • scale
  • rotate
  • skew
  • opacity
  • color

10.的title和alt有什么区别

1.title是global attributes之一，用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。
2.alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

11.CSS选择器有哪些？

由于太多，这边列举几个
:link，：visited，：focus，：hover，：active链接状态： 选择特定状态的链接元素，顺序LoVe HAte，兼容性: IE4+
[attr]：选择所有设置了attr属性的元素，兼容性IE7+
[attr=value]：选择属性值刚好为value的元素
[:checked]：选择单选框，复选框，下拉框中选中状态下的元素，兼容性：IE9+
:hover：鼠标移入状态的元素，兼容性a标签IE4+， 所有元素IE7+
:not(selector)：选择不符合selector的元素。不参与计算优先级，兼容性：IE9+
::first-letter：伪元素，选择块元素第一行的第一个字母，兼容性IE5.5+
::first-line：伪元素，选择块元素的第一行，兼容性IE5.5+
:nth-child(an + b)：伪类，选择前面有an + b - 1个兄弟节点的元素，其中n >= 0， 兼容性IE9+
:nth-last-child(an + b)：伪类，选择后面有an + b - 1个兄弟节点的元素 其中n >= 0，兼容性IE9+

12.css sprite是什么,有什么优缺点

概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
优点：
1.减少HTTP请求数，极大地提高页面加载速度
2.增加图片信息重复度，提高压缩比，减少图片大小
3.更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

缺点：
1.图片合并麻烦
2.维护麻烦，修改一个图片可能需要从新布局整个图片，样式

13.display: none;与visibility: hidden;的区别

联系：它们都能让元素不可见
区别：
1.display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
2.display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
3.修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
4.读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容

14.display,float,position的关系

1.如果display为none，那么position和float都不起作用，这种情况下元素不产生框
2.否则，如果position值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。
3.否则，如果float不是none，框是浮动的，display根据下表进行调整
4.否则，如果元素是根元素，display根据下表进行调整
5.其他情况下display的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整display

15.position的static、relative、absolute、fixed它们的区别？

1.absolute：绝对定位，元素会相对于值不为 static 的第一个父元素进行定位(会一直往父级节点查找)，且它是脱离正常文档流、不占位的;
2.fixed:同样是绝对定位，但元素会相对于浏览器窗口进行定位，而不是父节点的position (IE9以下不支持);
3.relative:相对定位，元素相对于自身正常位置进行定位,属于正常文档流;static: position的默认值，也就是没有定位，当元素设置该属性后（ top、bottom、left、right、z-index ）等属性将失效;
4.inherit:貌似没用过，查了一下文档“规定从父元素继承 position 属性的值”;

16.简单讲述一下块元素、内联元素、空元素有哪些，它们之间的区别？

1.行内元素有：a、b、span、img、input、select、textarea、em、img、strong（强调的语气）;
2.块级元素有：ul、ol、li、dl、dt、dd、h1、h2、h3、h4…p、section、div、form等;
3.空元素： input type=”hidden”/>、br>、hr>、link>、meta>;
块元素总是独占一行，margin对内联元素上下不起作用;

17.开发中为什么要初始化css样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

18.CSS优化、提高性能的方法有哪些

尽量将样式写在单独的css文件里面，在head元素中引用 将代码写成单独的css文件有几点好处：
1.内容和样式分离，易于管理和维护
2.减少页面体积
3.css文件可以被缓存、重用，维护成本降低
不使用@import
避免使用复杂的选择器，层级越少越好 建议选择器的嵌套最好不要超过三层，比如：
精简页面的样式文件，去掉不用的样式
利用CSS继承减少代码量
避免！important，可以选择其他选择器

© 2022 一个爱听歌的搬砖工 - Powered by Hexo - Theme Chan