css面试题

常见的解决方案有： Zoom 非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排 -webkit-transform:scale() 大部分现代浏览器支持，并且对英文、数字、中文也能够生效

css实现性能的方式可以从选择器嵌套、属性特性、减少http这三面考虑，同时还要注意css代码的加载顺序 实现方式 内联首屏关键CSS 异步加载CSS 资源压缩 合理使用选择器 选择器优化嵌套，尽量避

响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整 响应式网站常见特

在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘： 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器

实现动画的方式，有如下几种： transition：定义了元素在变化过程中是怎么样的，包含transition-property、transition-duration、transition-timi

边框 border-radius圆角边框 box-shadow边框阴影 border-image边框图片 背景 background-clip：确定背景画区，背景从border-box（默认）\pad

是什么 Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列 擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系 Gr

是什么 Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局 采用Flex布局的元素，称为flex容器container 它的所有子元素自动成为容器成员

rem em px rpx vw vh vm 原理 相对于根html的font-size大小计算。如：font-size: 10px，那么1em=10px 相对于父元素的font-size 相对于显示

根据元素标签的性质，可以分为： 内联元素居中布局 块级元素居中布局 内联元素居中布局 水平居中 行内元素可设置：text-align: center flex布局设置父元素：display: flex

双栏布局 双栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在 实现思路也非常的简单： 使用 float 左浮左边栏 右边模块使用 margin-left 撑出内容块做内容展示 为父级元素

css选择器 常用的有： id选择器（#box），选择id为box的元素 类选择器（.one），选择类名为one的所有元素 标签选择器（div），选择标签为div的所有元素 后代选择器（#box di

伪类 用来添加一些选择器的特殊效果，如 :hover :active :visited :link :first-child 等。 元素达到一个特定状态时，可能得到一个伪类的样式；当状态改变时，又会失

一、是什么 BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则： 内部的盒子会在垂直方向上一个接一个的放置 对于同一

是什么 当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box） 一个盒