面试题：HTML+CSS

时间 2019-12-02

原文原文链接

持续更新中...css

面试传送门:html

面试题：HTTP

面试重点：webpack

面试题：JS

面试题：Vue

面试问题：接招人事(非技术性问题)

001.Flex布局

Flex（Flexible Box）布局称为 "弹性布局"，能够为网页的布局提供最大的灵活性，取代了往常的浮动（float）布局，而且任何一个容器均可以设置 Flex 布局。
注：设置 Flex 布局后，子元素的 Float 布局将失效
Flex 布局教程html5

002.HTML5+CSS3新特性

HTML5node

CSS3webpack

003.盒子模型

标准盒子模型、IE盒子模型
CSS 盒子模型css3

004.如何让一个div水平居中？

005.如何让一个div水平垂直居中？

006.如何清除浮动？

一般在公共的css样式中定义一个清除浮动的类。web

.clearfix{
	clear:both;
	content:'';
	display:block;
	width: 0;
	height: 0;
	visibility:hidden;
}
复制代码

CSS 浮动(Float) 清除浮动面试

007.css3实现三栏布局，左右固定，中间自适应？

圣杯布局/双飞翼布局浏览器

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .middle,
        .left,
        .right {
            position: relative;
            float: left;
            min-height: 130px;
        }
        .container {
            padding: 0 220px 0 200px;
            overflow: hidden;
        }
        .left {
            margin-left: -100%;
            left: -200px;
            width: 200px;
            background: red;
        }
        .right {
            margin-left: -220px;
            right: -220px;
            width: 220px;
            background: green;
        }
        .middle {
            width: 100%;
            background: blue;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div class='container'>
        <div class='middle'></div>
        <div class='left'></div>
        <div class='right'></div>
    </div>
</body>
复制代码

008.CSS中 link 和@import 的区别是什么？

link属于HTML标签，而@import是CSS提供的页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
import只在IE5以上才能识别，而link是HTML标签，无兼容问题
link方式的样式的权重高于@import的权重.

009.transition和animation的区别？

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition须要触发一个事件才能改变属性，而animation不须要触发任何事件的状况下才会随时间改变属性值，而且transition为2帧，从from .... to，而animation能够一帧一帧的。sass

010.CSS优先级？

不一样级别：总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
	1.属性后面加!import 会覆盖页面内任何位置定义的元素样式
	2.做为style属性写在元素内的样式
	3.id选择器
	4.类选择器
	5.标签选择器
	6.通配符选择器（*）
	7.浏览器自定义或继承
**同一级别：后写的会覆盖先写的**
复制代码

011.使元素消失的方法?

visibility:hidden、display:none、z-index=-一、opacity：0

1.opacity：0,该元素隐藏起来了，但不会改变页面布局，而且，若是该元素已经绑定了一些事件，如click事件也能触发
2.visibility:hidden,该元素隐藏起来了，但不会改变页面布局，可是不会触发该元素已经绑定的事件
3.display:node, 把元素隐藏起来，而且会改变页面布局，能够理解成在页面中把该元素删掉

012.为何css放在顶部而js写在后面？

1.浏览器预先加载css后，能够没必要等待HTML加载完毕就能够渲染页面了
2.其实HTML渲染并不会等到彻底加载完在渲染页面，而是一边解析DOM一边渲染。
3.js写在尾部，主要是由于js主要扮演事件处理的功能，一方面不少操做是在页面渲染后才执行的。另外一方面能够节省加载时间，使页面可以更加的加载，提升用户的良好体验

可是随着JS技术的发展，JS也开始承担页面渲染的工做。好比咱们的UI其实能够分被对待，把渲染页面的js放在前面，时间处理的js放在后面

013.理解BFC吗？

BFC 即 Block Formatting Contexts (块级格式化上下文)。
具备 BFC 特性的元素能够看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，而且 BFC 具备普通容器所没有的一些特性。
通俗一点来说，能够把 BFC 理解为一个封闭的大箱子，箱子内部的元素不管如何翻江倒海，都不会影响到外部。

理解CSS中的BFC

014.Less、sass等的使用方法

Less和sass等是 CSS 预处理语言，它扩展了 CSS 语言，增长了变量、Mixin、函数等特性和嵌套写法，使 CSS 更易维护和扩展。