CSS面经(未完待续)

1. CSS选择器及其优先级

!important > 行内样式 > id选择器 > 类/伪类/属性选择器 > 标签/伪元素选择器 > 子/后台选择器 > *通配符

2. 重排和重绘是什么?浏览器的渲染机制是什么?

重排(回流):当增加或删除dom节点,或者给元素修改宽高时,会改变页面布局,那么就会重新构造dom树,然后再次渲染。

重绘:计算好盒模型的位置,大小和其他一些属性之后,浏览器就会根据每个盒模型的特性进行绘制。

浏览器的渲染机制:当dom的大小,位置发生改变时进行重排,当dom的样式color、background-color改变时进行重绘

3. display有哪些属性值

属性值 作用
none 元素不显示,并且会从文档流中移除
block 块类型,默认宽度为父元素宽度,可设置宽高,换行显示
inline 行内元素类型,默认宽度为内容宽度,不可设置宽高,同行显示
inline-block 默认宽度为内容宽度,可设置宽高,同行显示
table 此元素会作为块级表格来显示,子元素可设置display:table-row、table-cell
flex flex布局
grid 网格布局
inherit 规定应该从父元素继承display属性的值

网格布局笔记:网格布局

表格布局可以看下面代码:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .table {
            display: table;  /* 表格 */
            width: 800px;
            height: 500px;
            margin: 20px auto;
			border: 3px solid #000;
        }
        .row {
            display: table-row;  /* 表格行 */
        }
        .cell {
            display: table-cell;    /* 表格单元 */
            border: 1px solid #000;
        }
    style>
head>

<body>
    <div class="table">
        <div class="row">
            <div class="cell">1div>
            <div class="cell">2div>
            <div class="cell">3div>
        div>
        <div class="row">
            <div class="cell">4div>
            <div class="cell">5div>
            <div class="cell">6div>
        div>
    div>
body>

html>

结果如下:

CSS面经(未完待续)_第1张图片

4. display的block、inline和inline-block的区别

block:独占一行,宽度继承至父盒子,多个元素会另起一行,可设置宽高以及marginpadding属性。

inline:元素不会独占一行,宽度、高度由内容撑开,不可设置宽高,但可以设置水平方向的marginpadding

inline-block:行内块,将对象设置为inline对象,但对象的内容作为block对象呈现,也就是说内容排列在一行内显示,但是可以设置宽高。

5. 隐藏的元素的方法有哪些

  1. display: none
  2. visibility: hidden
  3. opacity: 0
  4. position: absolute 移到可视区之外
  5. z-index: 负值 定位的前提下,使其他元素盖住该元素,以此实现隐藏
  6. transform:scale(0, 0) 将元素缩放为0,来实现元素的隐藏,元素仍占据位置。

6. link和@import的区别

两者都是外部引用css的方式,他们的区别如下:

  • 功能上:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务,@import属于CSS范畴,只能加载CSS
  • 效果上:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载
  • 兼容性上:link是XHTML标签,没有兼容性问题;@import是CSS2.1提出的,低版本浏览器不支持
  • js支持上:link支持使用js控制dom去改变样式;而@import不支持

7. transition和animation的区别

  • transition是过渡属性,强调过渡,它的实现需要触发一个事件(比如鼠标移动上去,焦点,点击等)才执行动画,类似于flash的补间动画,设置一个开始关键帧,一个结束关键帧
  • animation是动画属性,它的实现不需要触发事件,设定好时间之后可以自己执行,且可以循环一个动画,它也类似于flash的补间动画,但是它可以设置多个关键帧(用@keyframe定义)完成动画。

8. display:none和visibility:hidden的区别

  • 渲染树上:display:none会让元素从渲染树中消失,渲染时不会占据任何空间,visibility:hidden会占据空间,只是不可见
  • 是否是继承属性:display是非继承属性,子孙节点会随父节点消失,修改显示子孙节点的属性也无法显示,而visibility是继承属性,子孙节点消失是因为子孙节点从父节点继承了hidden,通过设置子孙节点visibility:visible可以让子孙节点显示。
  • 重排与重绘:修改常规文档流的display通常会造成文档的重排,但是修改visibility只会造成重绘
  • 读屏器:如果使用读屏器,设置display:none的内容不会被读取,而visibility:hidden可以被读取

9. li与li之间有看不见的空白间隔是什么原因引起的?如何解决?

li原本是块级标签,如下图

CSS面经(未完待续)_第2张图片

但当li设置为行内块元素或行元素时,li标签与li标签之间会有看不见的空隙,如下图:

CSS面经(未完待续)_第3张图片

原因:当元素是行内元素/行内块元素排版时,浏览器会将元素之间的空白符,如空格,换行,tab等渲染成一个空格处理,上图的换行就被渲染成了空格,因此会有上面的结果。

解决方案:

  1. li设置为float:left,缺点:很多容器是不适合设置浮动,并且浮动会将display变为block。
  2. 将所有li写在一行,比较简单粗暴的方法,但是代码会不太美观
  3. ul内的字符尺寸设置为0,缺点:可能会影响到其他字符,其他字符需要额外重新设置font-size
  4. 设置ul的字符间隔letter-spacing: -8px,缺点跟上条一样

10. 什么是物理像素、逻辑像素、像素密度,为什么移动端开发要用到@2x、@3x的图片

你可能感兴趣的:(面试,css,前端,面试,开发,css3,笔记,面经)