css前端面试题目总结

前端面试总结css

1、盒子模型的组成，以及box-sizing的作用

2、 使用css隐藏元素的方式

opacity：0(不透明性为0)

① opacity和rgba（）、display、visibility–显示隐藏的区别

② display：none 和visibility：hidden的区别是什么

③ rgba()和opacity的透明效果有什么不同

3、行内元素and块级元素、空元素

① 举例

• 行内元素有：a b span img input select strong（强调的语气）
  块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

• 行内元素注意：在行内元素中定义 width，height属性不起作用，还是只显示文字的内容，所以需要用display：block/inline-block，
  inline-block：是块元素但是可以在一行
  

② 特点 （元素位置、width、padding属性）

1、

③ 互相转换（and 如何让两个块级元素展示在一行）

4、display/position属性

5、不定高的DIV居中

table-cell：该元素会作为一个表格单元格显示
组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（内部div设置display:inline-block即可）
transform: 移动translate、缩放scale、旋转rotate

使一个元素垂直居中

7、flexbox（弹性布局）、Grid（网格布局）

① 弹性布局

如何设置

什么是弹性布局？看着这篇文章你就明白了(讲的很详细)
弹性布局（display:flex;）属性详解

灵活的盒子容器，是 CSS3 引入的新的布局模式。它动态的决定了盒子中的元素如何在页面上排列(方向、顺序、相对位置、动态大小、对齐方式),最大限度地填充可用空间,
有三个核心概念
– flex 项（注：也称 flex 子元素），需要布局的元素
– flex 容器，其包含 flex 项
– 排列方向（direction），这决定了 flex 项的布局方向

主轴和交叉轴

应用场景

② 网格布局

前端布局基础

• 前端布局方案主要有三种：
  ①传统布局方案（借助浮动、定位等手段）
  ②flex布局方案
  ③grid布局方案
• 传统布局方案，需要使用者熟练掌握元素的分类及布局特性、浮动原理和定位原理浏览器兼容性最好
• flex布局方案，它不再需要借助浮动和定位等布局手段，而是通过父元素（flexbox）单方面配置相关的CSS属性来决定子元素的布局规则，且在大多情况下无需子元素（flex item）参与，就能完成子元素间的布局问题。
• grid布局方案，是由微软提出，Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
  网格布局
  两栏布局
  

8、流式布局、响应式布局、自适应布局

流式布局详细介绍
静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

① 流式布局和响应式布局的区别

② 自适应布局和响应式布局的区别

响应式设计 要考虑的内容要比自适应设计复杂的多

③ 媒体查询(响应式布局)

媒体查询

媒体查询: 通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览

将不同的设备划分为不同的类型
all (所有的设备)
print (打印设备)
screen (电脑屏幕,平板电脑,智能手机)

④ 响应式布局与弹性布局的区别

9、BFC

10 分钟理解 BFC 原理
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素

BFC的应用场景

具体看这

10、浮动元素

父元素设置：display：flex
子元素：float:left

CSS之float浮动元素定位机制
CSS 元素定位的方式
CSS Overflow

overflow有哪些值

清除浮动（为什么要清除浮动、如何清除）

为什么要清除浮动以及清除浮动的方法

通过触发BFC方式，实现清除浮动

11、 css选择器

属性选择器

• 属性选择器：选择有某个属性的元素，进行样式的设计
  为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

• 伪类选择器：对一些不在文档树中的部分；比如，一句话中的第一个字母，或者是列表中的第一个元素，使用伪类来进行修饰
• 伪对象选择器（伪元素选择器，新建立一些不在文档树中的部分，用：before、：after）
• 通配符选择器 例子
  通配符选择器：* 作用描述：选择所有元素。
• 层次选择器：后代选择器、子选择器、相邻兄弟选择器

12 、css中的长度单位 px、em、rem

em的使用

13、CSS 引入的方式有哪些? link 和@import 的区别是?

css引入方式——行内css、内部css、外部css

14、描述 css reset 的作用和用途？/CSS样式初始化

15、伪元素伪类

伪元素、伪类

• 伪类（在文档树中。鼠标悬停时候的样式）
• 伪元素（不在文档树中。一段话的第一个单词）

:after伪类选择器

伪类选择器的种类以及用法
两个例子
CSS :after 选择器

16、图片懒加载

17 、less、scss、stylus

less学习指南

18、 css3新特性

19 、使用伪类实现一个上三角

20、精灵图CSS sprite

CSS精灵图（sprite）

可继承的属性

了解动画和过渡吗

过渡动画

关键帧动画

CSS性能优化

CSS性能优化
异步加载CSS

css经典布局——圣杯布局和双飞翼布局的实现和理解

原文参考