CSS面试题三千问

一时失言乱红尘 2022-11-27 10:11 200阅读 0赞

**1.display:none与visibility:hidden的区别**  
相同：他们都能让元素不可见  
区别：

*  display:none会让元素完全消失，不再占据任何空间；visibility:hidden会让元素不可见但元素本来的空间继续占据，只是内容不可见。
 *  display:none是非继承属性，子孙节点会跟随父节点一起消失，即使修改子孙节点属性也无法显示；visibility:hidden是继承属性，子孙节点继承父节点消失，但通过设置visibility属性可以让子孙节点显示。

**2.link与@import的区别**

*  link是HTML方式，@import是CSS方式
 *  link最大限度支持并行下载，@import过多嵌套导致串行下载
 *  link可以通过rel="alternate stylesheet"指定候选样式
 *  @import必须在样式规则之前，可以在css文件中引用其他文件
 *  总体来说：link优于@import

**3.CSS有哪些继承属性**

*  关于文字排版的属性：  
    font  
    word-break  
    letter-spacing  
    text-align  
    text-rendering  
    word-spacing  
    white-space  
    text-indent  
    text-transform  
    text-shadow
 *  line-height
 *  color
 *  visibility
 *  cursor

**4.外边距折叠**  
外边距折叠就是margin-collapse

*  两个相邻的外边距都是正数时，折叠结果是他们两者之间较大的值
 *  两个相邻的外边距都是负数时，折叠结果是他们两者绝对值的较大值
 *  两个外边距一正一负时，折叠结果是两者相加的和

**5.标准CSS盒子模型和低版本IE的盒子模型**

*  css盒模型也称标准(W3C)盒模型，ie盒模型也称怪异盒模型
 *  标准盒模型：元素宽度 = width + padding + border + margin
 *  怪异盒模型：元素宽度 = width + margin

**6.CSS的选择器**

*  id选择器（"\#id"）
 *  类选择器（".class"）
 *  标签选择器（“div,h1,p”）
 *  相邻选择器（“p1 + p2”）
 *  子选择器（“ul > li”）
 *  后代选择器（“ul li”）
 *  通配符选择器（"\*“”）
 *  属性选择器（“a\[rel = ‘external’\]”）
 *  伪类选择器（“a:hover”）

**7.CSS3新增伪类**

*  li:first-of-type 选择属于其父元素的首个元素的每个元素
 *  li:last-of-type 选择属于其父元素的最后一个元素的每个元素
 *  li:only-of-type 选择属于其父元素唯一的元素的每个元素
 *  li:only-child 选择属于其父元素的唯一子元素的每个元素
 *  li:nth-child(n) 选择属于其父元素的第n个子元素的每个元素
 *  :after 在元素之前添加内容，常用来清除浮动
 *  :before 在元素之后添加内容
 *  :enabled 选择器匹配每个已启用的元素，常用在表单元素上
 *  :disabled 控制表单按钮的禁用状态
 *  :checked 单选框或者复选框的选中状态

**8.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中**  
如果需要居中的元素为常规流中的lnline元素，为父元素设置text-align:center即可实现元素居中

如果需要居中的元素为block元素：1.为元素设置宽高 2.设置左右maigin为auto

<body>
        <div class="content">
        </div>
    </body>
    
    <style>
        body {
            background-color: #000;
            text-align: center; 
        }
        .content {
            width: 500px;
            text-align: left;
            margin: 0 auto; 
            background: gold;
        }
    </style>

如果需要居中的元素为浮动元素：1.为元素设置宽高 2.position:relative 3.浮动方向偏移量设置为50% 4.浮动方向上的margin设置为元素宽高的一半乘以-1

<body>
        <div class="content">
        </div>
    </body>
    
    <style>
        body {
            background: #000;
        }
        .content {
            width: 500px;   
            float: left;
            position: relative; 
            left: 50%;  
            margin-left: -250px;  
            background-color: gold;
        }
    </style>

如果需要居中的元素为绝对定位元素：1.为元素设置宽高 2.设置左右偏移量都为0 3.设置左右外边距都为auto

<body>
        <div class="content">
        </div>
    </body>
    
    <style>
        body {
            background: #000;
            position: relative;
        }
        .content {
            width: 800px;
            position: absolute;
            margin: 0 auto;
            left: 0;
            right: 0;
            background-color: gold;
        }
    </style>

**9.如何竖直居中一个元素**

*  绝对定位居中
 *  如果居中元素为行内元素，可以设置父级height与line-height相等
 *  设置margin/padding居中
 *  相对位置偏移居中
 *  flex居中设置align-item:center

**10.display有哪些值以及他们的作用**

*  block 块级元素，独占一行，可以设置宽高
 *  inline-block 内联块元素，并排显示，可以设置宽高
 *  inline 内联元素，并排显示，不可以设置宽高
 *  none 此元素必会被显示
 *  list-item 此元素会作为列表显示
 *  table 此元素会作为块级表格来显示
 *  inherit 规定应该从父元素继承display属性的值

**11.position及relative和absolute定位原点**

*  absolute 绝对定位，相对于上一个定位的父元素进行定位
 *  fixed 固定定位，相对于浏览器窗口进行定位
 *  relative 相对定位，相对于其正常位置进行定位
 *  static 默认值，没有定位，元素出行在正常文档流中
 *  inherit 规定从父元素继承position属性的值

**12.CSS3有哪些新特性**

*  新增选择器 li:nth-child(n)
 *  弹性盒模型 display:flex
 *  多列布局 column-count:num
 *  媒体查询 @media(max-width:520px)\{.box:\{column-count:1\}\}
 *  个性化字体 @font-face\{font-family:BorderWeb;src:url(BORDERW0.eot)\}
 *  颜色透明度 color:rgba(255,0,0,0.5)
 *  圆角 border-radius:50%/20px
 *  渐变 background:linear-gradient(red,gold,blue)
 *  阴影 box-shadow:2px 2px 2px rgba(0,64,128,0.5)
 *  倒影 box-reflect:below 2px
 *  文字装饰 text-stroke-color:red
 *  文字溢出 text-overflow:ellipsis
 *  背景效果 background-size: 100px 100px
 *  边框效果 border-image:url(ak.png) 0 10
 *  平滑过渡 transition:all 0,3s ease-in 0.1s
 *  动画 @keyframes anim-1 \{50%\{border-radius:50%\}\} animation:anim-1 1s
 *  转换  
    1.旋转 transform:rotate(90deg)  
    2.倾斜 transform:skew(90deg,-10deg)  
    3.位移 transform:translate(20px,20px)  
    4.缩放 transform:scale(0.5)

**12.用css创建一个三角形的原理**  
把上左右三边的边框隐藏掉

#demo {
      width: 0;
      height: 0;
      border-width: 20px;
      border-style: solid;
      border-color: transparent transparent red transparent;
    }

**13.一个满屏品字布局如何设计**

*  上面的div宽度100%
 *  下面的两个div分别宽50%
 *  然后用float或者inline使其不换行即可

**14.li与li之间有空白间隙是什么原因引起的，如何解决**  
行框的排列会受到中间空白(回车/空格)等的影响，因为空格也属于字符，这些空白也会被应用样式占据空间，所以会有间隔，把字体大小设置为0就可以解决了

**15.display:inline-block 什么时候会显示间隙？**

*  相邻的inline-block元素之间有换行或者空格的情况下
 *  非inline-block水平元素设置为inline-block也会有水平间距
 *  可以借助vertical-align:top消除垂直间隙
 *  可以在父级加font-size:0消除垂直间隙
 *  把li标签写到同一行可以消除垂直间隙

**16.display:inline-block间隙怎么解决**  
移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

**17.css定义的权重**  
1.如果一个声明来自style属性而不是选择器，记做1或者a=1（在一个html文档中，元素"style"的值是样式表规则，这个规则中没有选择器，所以a=1,b=0,c=0,d=0）  
2.选择器中id属性的个数记做b  
3.选择器中其他属性以及伪类的个数记做c  
4.选择器中元素以及伪元素的个数记做d

* {}     /* a=0 b=0 c=0 d=0 -> 优先级= 0,0,0,0 */
    li {}     /* a=0 b=0 c=0 d=1 -> 优先级 = 0,0,0,1 */
    li:first-line {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */
    ul li {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */
    ul ol+li {}     /* a=0 b=0 c=0 d=3 -> 优先级 = 0,0,0,3 */
    h1 + *[rel=up]{}     /* a=0 b=0 c=1 d=1 -> 优先级 = 0,0,1,1 */
    ul ol li.red {}     /* a=0 b=0 c=1 d=3 -> 优先级 = 0,0,1,3 */
    li.red.level {}     /* a=0 b=0 c=2 d=1 -> 优先级 = 0,0,2,1 */
    #x34y {}     /* a=0 b=1 c=0 d=0 -> 优先级 = 0,1,0,0 */
    style=""     /* a=1 b=0 c=0 d=0 -> 优先级 = 1,0,0,0 */

a,b,c,d只是在各自位置里数字的累加，而不会越级  
权重最高的是!imporant，会覆盖以上所有，行内样式也高不过他

**18.CSS优先级算法如何计算**

*  优先级就近原则，同权重情况下样式定义最近者为准
 *  载入样式以最后载入的为准
 *  优先级为：!important > id > class > tag

**19.浮动与清除浮动**  
浮动的元素可以向左或者向右移动，直到他的外边缘碰到包含框或者另一个浮动元素的边框为止。由于浮动元素脱离了标准文档流，所以文档的标准文档流的块框表现的就像浮动元素不存在一样。浮动的元素就会漂浮在标准文档流的元素上  
解决办法：  
1.父级元素定义伪类:after和zoom

.clearfloat:after{
           display:block;
           clear:both;
           content:"";
           visibility:hidden;
           height:0
    }
    .clearfloat{zoom:1}

2.在结尾处添加空div clear:both

<div class="parent">
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="clearfloat"></div>
    </div>
    
    <style>
        .left {float:left}
        .clearfloat{clear:both}
    </style>

3.父元素设置height  
4.父元素设置overflow:hidden  
5.父元素设置overflow:auto  
6.父元素也一起浮动  
7.父元素定义display:table  
8.结尾处添加 br 标签 clear:both

**20.box-sizing常用的属性有哪些，分别有什么作用**

*  box-sizing:content-box 默认的标准盒模型元素效果
 *  box-sizing:border-box 触发怪异盒模型元素的效果
 *  box-sizing:inherit 继承父元素 box-sizing 属性的值

**21.列举几种隐藏元素的方法**

*  visibility:hidden 这个属性只是简单的隐藏某个元素，但元素占用的空间仍然存在
 *  opacity:0 CSS3属性，设置0可以使一个元素完全透明
 *  position:absolute 设置一个很大的left负值定位，使元素定位在可见区域之外
 *  display:none 元素会变得不可见，并且不再占用文档空间
 *  transform:scale(0) 将一个元素无限缩小，元素将不可见，元素原来的位置将被保留
 *  HTML5属性，效果和display:none相同，但这个属性用于记录一个元素的状态
 *  height:0 将元素高度设为0，并消除边框
 *  filter:blur(0) CSS3属性，将一个元素的模糊度设置为0，从而使元素不可见

**22.rgba() 和 opacity 的透明效果有什么不同**

*  opacity 作用于元素以及元素内的所有内容的透明度
 *  rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

**23.css 属性 content 有什么作用**  
content 属性专门应用在 before / after伪元素上，用于插入额外内容或样式

**24.请解释一下 CSS3 的 Flexbox(弹性盒模型)以及适用场景**  
Flexbox 用于 不同尺寸屏幕中创建可自动扩展和收缩布局

**25.请列出多种高等布局**

*  在列的父元素上使用这个背景图进行Y轴铺放，从而实现一种高等列的假象
 *  模仿表格布局等高列效果：兼容性不好，在IE6-7无法正常运行
 *  css3 flexbox 布局：.container\{display:flex;align-items:stretch\}

**26.圣杯布局的实现原理**  
要求：三列布局，中间主体内容前置且宽度自适应，两边内容定宽  
好处：重要的内容放在文档流前面可以优先渲染  
原理：利用相对定位、浮动、负边距布局，而不添加额外标签

.container {
          padding-left: 150px;
          padding-right: 190px;
      }
      .main {
          float: left;
          width: 100%;
          height: 100vh;
      }
      .left {
          float: left;
          width: 190px;
          height: 100vh;
          margin-left: -100%;
          position: relative;
          left: -150px;
      }
      .right {
          float: left;
          width: 190px;
          height: 100vh;
          margin-left: -190px;
          position: relative;
          right: -190px;
      }

**27.什么是双飞翼布局？实现原理**  
双飞翼布局：对圣杯布局的改进，消除其相对定位布局的局限性  
原理：主体元素设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位

.container {
        /*padding-left:150px;*/
        /*padding-right:190px;*/
    }
    .main-wrap {
        width: 100%;
        float: left;
    }
    .main {
    	height: 100vh;
        margin-left: 150px;
        margin-right: 190px;
    }
    .left {
        float: left;
        width: 150px;
        height: 100vh;
        margin-left: -100%;
        /*position: relative;*/
        /*left:-150px;*/
    }
    .right {
        float: left;
        width: 190px;
        height: 100vh;
        margin-left: -190px;
        /*position:relative;*/
        /*right:-190px;*/
    }

**28.在 CSS 样式中常使用 px、em 在表现上有什么区别**

*  px 相对于显示器屏幕分辨率，无法使用浏览器字体放大功能
 *  em 值并不是固定的，会继承父级的字体大小：em = 像素值 / 父级 font-size

**29.为什么要初始化 CSS 样式**

*  不同浏览器对有些标签样式的默认值解析不同
 *  不初始化 CSS 会造成各种浏览器之间的页面显示差异
 *  可以使用 reset.css 或 Normalize.css 做 CSS 初始化

**25.reset.css 和 Normalize.css 理解**  
reset.css 意为重置默认样式。HTML 中大部分标签元素在网页显示中都有一个默认属性值，通常为了避免重复定义元素样式，需要进行重置默认样式

Eric Meyer(CSS Reset)推荐

html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    /* remember to define focus styles! */
    :focus {
        outline: 0;
    }
    /* remember to highlight inserts somehow! */
    ins {
        text-decoration: none;
    }
    del {
        text-decoration: line-through;
    }
    /* tables still need ‘cellspacing=”0″‘ in the markup */
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

Normalize.css 只是一个很小的 css 文件，但他在默认的 HTML 元素样式上提供了跨浏览器的高度一致性。相比于传统的 css reset，Normalize.css 是一种现代化的，为 HTML5 准备的优质替代方案。  
Normalize.css 的作用：

*  保护有用的浏览器默认样式而不是完全去掉他们
 *  一般化的样式：为大部分 HTML 元素提供
 *  修复浏览器自身的 bug 并保证各浏览器的一致性
 *  优化 CSS 可用性
 *  解释代码：用注释和详细的文档

**26.什么是 FOUC(Flash of Unstyled Content)？如何避免 FOUC**

*  当使用 @import 导入 CSS 时，会导致某些页面在 IE 出现奇怪的现象：没有样式的页面内容显示瞬间闪烁，这种现象称为“文档样式短暂失效“，简称为 FOUC
 *  产生原因：当样式晚于结构性 html 加载时，加载到样式变时，页面将停止之前的渲染
 *  等待此样式表被下载和解析后，再重新渲染页面时，期间导致短暂的花屏现象
 *  解决办法：使用 link 标签将样式表放在文档 head 里

**27.介绍使用过的 CSS 预处理器**

*  CSS 预处理器基本思想：为 CSS 增加了一些编程的特性(变量、逻辑判断、函数等)
 *  开发者使用这些语言进行 Web 页面样式设计，再编译成正常的 CSS 文件使用
 *  使用 CSS 预处理器可以使 CSS 更加简洁、适应性更强、可读性更强，无需考虑兼容性
 *  最常用的 CSS 预处理器语言包括：Sass(SCSS) 和 LESS

**28.CSS 优化、提高性能的方法**

*  多个 css 合并，尽量减少 HTTP 请求
 *  将 css 文件放在页面最上面
 *  移除空的 css 规则
 *  避免使用 CSS 表达式
 *  选择器优化嵌套，尽量避免层级过深
 *  充分利用 css 继承属性，减少代码量
 *  抽象提取公共样式，减少代码量
 *  属性值为0时，不加单位
 *  属性值为小于1的小数时，省略小数点前面的0
 *  css 雪碧图

**29.浏览器是怎样解析 CSS 选择器的**

浏览器解析 CSS 选择器的方式是从右到左

**30.在网页中的应该使用奇数还是偶数的字体**

在网页中应该使用 偶数 字体

*  偶数字体相对更容易和 web 设计的其他部分构成比例关系
 *  使用奇数字体时文本段落无法对齐
 *  宋体的中文网页排布中使用最多的就是 12 和 14

**30.margin 和 padding 分别适合什么场景使用**

*  需要在 border 外侧添加空白，且空白处不需要背景色时使用 margin
 *  需要在 border 内侧添加空白，且空白处需要背景色时使用 padding

**31.抽离样式模块怎么写**

CSS可以拆分为 2 部分：公共 CSS 和 业务 CSS

*  网站的配色，字体，交互提取出为公共 CSS。这部分 CSS 命名不应涉及具体的业务
 *  对于业务 CSS，需要有统一的命名，使用公用的前缀。可以参考面对对象的 CSS

**32.元素竖向的百分比设定是相对于容器的高度嘛**

*  如果是 height 的话，是相对于容器高度
 *  如果是 padding-height,margin-height 则是相对于容器的宽度

**33.全屏滚动的原理是什么，用到了 CSS 的哪些属性**

*  原理类似图片轮播原理，超出隐藏部分，滚动时显示
 *  可能用到的 CSS 属性：overflow:hidden;transform:translate(100%,100%);display:none;

**34.什么是响应式设计，响应式设计的基本原理是什么，如何兼容低版本的 IE**

*  响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本
 *  基本原理就是利用 CSS3 媒体查询，为不同尺寸的设备适配不同样式
 *  对于低版本的 IE ，可采用 JS 获取屏幕宽度，然后通过 resize 方法实现兼容

$(window).resize(function () {
        screenRespond();
    });
    
    screenRespond();
    
    function screenRespond(){
    
        var screenWidth = $(window).width();
    
        if(screenWidth <= 1800){
            $("body").attr("class", "w1800");
        }
    
        if(screenWidth <= 1400){
            $("body").attr("class", "w1400");
        }
    
        if(screenWidth > 1800){
            $("body").attr("class", "");
        }
    }

**35.什么是视差滚动效果，如何给每页做不同的动画**

*  视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，具有非常出色的视觉体验
 *  一般把网页解剖为：背景色、内容层和悬浮层。当滚动鼠标滚轮时，各图层以不同速度移动，形成视差

实现原理

*  以"页面滚动条"作为"视差动画进度条"
 *  以"滚轮刻度"当作"动画帧度"去播放动画
 *  监听 mousewheel 事件，事件被触发即播放动画，实现"翻页"效果

**36.a 标签上四个伪类的执行顺序是怎样的**

LoVe HAte => “爱恨原则”  
link > visited > hover > active

**37.伪元素和伪类的区别和作用**

伪元素：在内容的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成，他们只在外部显示可见，但不会在文档的源代码中找到他们，因此，称为 “伪” 元素。  
eg：

p::before {content:"第一章：";}
    p::after {content:"Hot!";}
    p::first-line {background:red;}
    p::first-letter {font-size:30px;}

伪类：将特殊的效果添加到特定选择器上。他是已有元素上添加类别的，不会产生新的元素。  
eg：

a:hover {color: #FF00FF}
    p:first-child {color: red}

**38. ::before 和 :after 中双冒号和单冒号的区别**

*  在 CSS 中伪类一直用 : 表示，如 :hover,:active等
 *  伪元素在 CSS1 中已存在，当时语法是用 : 表示，如 :before 和 :after
 *  后来在 CSS3 中修订，伪元素用 :: 表示，如 ::before 和 ::after ，以此区别伪元素和伪类
 *  由于低版本 IE 对双冒号不兼容，开发者为了兼容各浏览器，继续使用 :after 这种老语法表示伪元素
 *  综上所述： ::before 是 CSS3 中伪元素的新语法，:after 是 CSS1 中存在的、兼容 IE 的老语法

**39.如何修改 Chrome 记住密码后自动填充表达的黄色背景**

*  产生原因：由于 Chrome 默认会给自动填充的 input 表单加上 input:-webkit-autofill 私有属性造成的
 *  解决方案1：在 form 标签上直接关闭表单的自动填充：autocomplete = “off”
 *  解决方案2：input:-webkit-autofill \{background-color:transparent;\}

input\[type = search\] 搜索框右侧小图标如何美化

input[type="search"]::-webkit-search-cancel-button{
      -webkit-appearance: none;
      height: 15px;
      width: 15px;
      border-radius: 8px;
      background:url("images/searchicon.png") no-repeat 0 0;
      background-size: 15px 15px;
    }

**40.网站图片文件，如何点击下载，而非点击预览**

**41.iOS safari 如何阻止"橡皮筋效果"**

$(document).ready(function(){
          var stopScrolling = function(event) {
              event.preventDefault();
          }
          document.addEventListener('touchstart', stopScrolling, false);
          document.addEventListener('touchmove', stopScrolling, false);
      });

**42.你对 line-height 是如何理解的**

*  line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
 *  如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的
 *  一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容
 *  把 line-height 设置为 height 一样的值可以实现单行文字的垂直居中
 *  line-height 和 height 都能撑开一个高度，height 会触发 haslayout，而 line-height 不会

**43.line-height 三种赋值方式有何区别(带单位、纯数字、百分比)**

*  带单位：px 是固定值，而 em 会参考父元素 font-size 值自行计算自身的行高
 *  纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素的行高为 1.5 \* 18 = 27px
 *  百分比：将计算的值传递给后代

**44.设置元素浮动后，该元素的 display 值会如何变化**

设置元素浮动后，该元素的 display 值自动变成 block

**45.怎么让 Chrome 支持小于 12px 的文字**

.shrink{
       -webkit-transform:scale(0.8);
       -o-transform:scale(1);
       display:inline-block;
     }

**46.让页面里的字体变清晰，变细用 CSS 怎么做(IOS手机浏览器字体齿轮设置)**

-webkit-font-smoothing: antialiased;

**47.font-size 属性 oblique 是什么意思**

font-size:oblique; 使没有 italic 属性的文字实现倾斜

**48.如果需要手写动画，你认为最小时间间隔是多久**

16.7ms  
多数显示器默认频率是 60Hz，即 1秒刷新 60 次，所以理论上最小间隔：1s / 60 \* 1000 = 16.7ms

**49.overflow:scroll 时不能平滑滚动的问题怎么处理**

监听滚轮事件，然后滚动到一定距离时用 jquery 的 animate 实现平滑效果

**50.一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度**

*  方案1：.sub \{ height : calc \{ 100% - 100px \};\}
 *  方案2：.container \{ position : relative;\} .sub \{ position : absolute; top : 100px; bottom : 0;\}
 *  方案3：.container \{ display : flex; flex-drection : column;\} .sub \{ flex : 1\}

**51.CSS 中类 class 和 id 的区别**

对于 CSS 而言，id 和 class 都是选择器，唯一不同的地方在于权重不同。  
对于 html 而言，id 和 class 都是 dom 元素的属性值。不同的地方在于 id 属性的值是唯一的，而 class 属性可以重复。  
id 还有一个特性是锚点功能，当浏览器地址栏有一个 \#xxx，页面会自动滚到 id = xxx 的元素上面

**52.如何优化网页的打印样式**

其中 media 指定的属性就是设备，显示器上就是 screen，打印机则是 print，电视是 tv，投影仪是 projection。

打印样式注意事项：

*  打印样式表中最好不要用背景图片，因为打印机不能打印 CSS 中的背景。如要显示图片，请用 html 插入到页面中
 *  最好不要使用像素最为单位，因为打印样式表要打印出来的会是实物，所以建议使用 pt 和 cm
 *  隐藏掉不必要的内容
 *  打印样式表中最好少用浮动属性，因为他们会消失

**53.请问为何要使用 transform 而非 absolute positioning**

*  使用 transform 或 position 实现动画效果时是有很大差异
 *  使用 transform 时，可以让 GPU 参与运算，动画的 FPS 更高
 *  使用 position 时，最小的动画变化单位是 1px，而使用 transform 参与时，可以做到更小
 *  功能都一样，但是 transform 不会引起浏览器的重绘和重排

反之

*  transform 改变 fixed 子元素的定位对象
 *  transform 改变元素层叠顺序

**54.请解释 CSS sprites，以及你要如何在页面或者网站中实现它**

*  CSS Sprites 其实就是把网页中的一些背景图片整合到一张图片文件中，再利用 CSS 的 “background-image”,“background-repeat”,“background-position” 的组合进行背景定位，background-position 可以用数字能精准的定位出背景图片的位置
 *  CSS Sprites 为一些大型的网站节约了带宽，提高了用户的加载速度和用户体验，不需要加载更多的图片

**55.SVG 样式的书写**

<table> 
 <thead> 
  <tr> 
   <th>SVG</th> 
   <th>等效的 CSS</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>fill</td> 
   <td>background-color 或 color</td> 
  </tr> 
  <tr> 
   <td>fill-opacity</td> 
   <td>background-color 或 color 设置 rgba/hsla</td> 
  </tr> 
  <tr> 
   <td>opacity</td> 
   <td>opacity</td> 
  </tr> 
  <tr> 
   <td>stroke</td> 
   <td>border-color</td> 
  </tr> 
  <tr> 
   <td>stroke-width</td> 
   <td>border-thickness</td> 
  </tr> 
  <tr> 
   <td>stroke-opacity</td> 
   <td>border-color 设置 rgba</td> 
  </tr> 
  <tr> 
   <td>rx,ry</td> 
   <td>border-radius</td> 
  </tr> 
 </tbody> 
</table>

下面的属性在 SVG 和 CSS 中是一样的，只是在 SVG 的 transformations 和 dimensions 中稍有区别：

*  font-family，font-size，font-style，font-variant 和 font-weight
 *  width 和 height
 *  scale，rotate，skew

**56.如果设计中使用了非标准的字体，该如何去实现**

*  用图片代替
 *  web fonts 在线字库
 *  @font-face