面试题:HTML+CSS

5,273 阅读4分钟

持续更新中...

面试传送门:

关于HTML+CSS不是重点,所以只需简单的了解下就好了,不必深入研究

001.Flex布局

 Flex(Flexible Box)布局 称为 "弹性布局",可以为网页的布局提供最大的灵活性,取代了往常的 浮动(float) 布局,并且任何一个容器都可以设置 Flex 布局。
注:设置 Flex 布局后,子元素的 Float 布局将失效
Flex 布局教程

002.HTML5+CSS3新特性

HTML5

CSS3

003.盒子模型

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

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

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

006.如何清除浮动?

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

.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可以一帧一帧的。

010.CSS优先级?

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

011.使元素消失的方法?

visibility:hidden、display:none、z-index=-1、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 更易维护和扩展。

015.简单说一下网页的层叠等级(z-index)?

其实一个网页是分为好多层的,具体层次和层叠等级如下图: