自用CSS面试题

Sass是基于Ruby，是在服务器处理的；Less是基于JavaScript，是在客户端处理的。 Sass声明的变量用$开头；Less声明的变量用@开头。

CSS预处理器的定义 CSS作为一门标记性语言，语法相对简单，对使用者的要求较低；但同时也带来一些问题：需要书写大量看似没有逻辑的代码，不利于复用，不方便扩展和维护，尤其对于非前端开发工程师来说，往往

BFC的定义 BFC是Block Formatting Context的缩写，即块级格式化上下文。它是一个独立的布局环境，容器里面的子元素不会影响到外面的元素，反之亦然。 BFC的作用 解决margi

不可继承的属性 布局定位属性：display、position、float、clear、overflow 自身属性：width、height、margin、padding、border、backgro

obj.offsetWidth/obj.offsetHeightobj.offsetWidth/obj.offsetHeightobj.offsetWidth/obj.offsetHeight

flex布局 容器display设置为flex，左右子元素设置为固定宽度，中间子元素flex设置为1。 grid布局 容器display设置为grid，grid-template-columns设置为

浮动指的是容器不设高度且子元素浮动时，容器不能被内容撑开，此时内容会溢出到容器外面而影响布局的现象。清除浮动的本质就是为了解决子级浮动而引起的容器高度为0的问题，即清除浮动造成的影响，达到不影响布局的

flex布局 父元素display设置为flex，左边子元素固定宽度，右边子元素flex设置为1。 grid网格布局 display设置为grid，grid-template-columns设置为固定

绝对定位 + margin: auto 父元素设置为相对定位；子元素设置为绝对定位并且四个定位属性的值都设置为0，再将margin设置为auto。 绝对定位 + margin: 负值 父元素设置为相对

display: none 这种方法使得元素不可见，不占据页面空间，无法响应点击事件。 visibility：hidden 这种方法使得元素不可见，占据页面空间，无法响应点击事件。 opacity:

选择器 属性选择器、结构伪类选择器、伪元素选择器。 属性 border-radius（设置圆角边框）、box-shadow（设置元素阴影）、text-shadow（设置文本阴影）。 转换（transf

1px问题的定义 在一些Retina屏幕的机型上，移动端页面的1px会变得很粗，呈现出不止1px的效果。 原因在于CSS中的1px并不能和移动设备上的1px划等号，它们之间的比例关系有一个专门的属性来

flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何元素都可以设置为flex布局。设置为flex布局的元素，称为flex容器（flex container），简

传统的项目开发中，我们只会用到px、%、em这几个单位，它们适用于大部分的项目开发，且拥有比较良好的兼容性；从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vw、vh等一些

三者的区别 px是固定的像素，一旦设置了就无法适应页面大小的改变而改变。 em和rem相对于px更具灵活性，都是相对长度单位，其长度不是固定的，更适用于响应式布局：em是相对于其父元素来设置字体大小，

none：元素不显示，并且会从文档流中移除，即不保留位置。 block：独占一行；可以设置width、height、margin、padding属性，宽度默认为父级宽度的100%；换行显示。 inli

优先级 !important：∞ 行内样式： 1，0，0，0 id选择器：0，1，0，0 类选择器或伪类选择器或属性选择器：0，0，1，0 标签选择器或伪元素选择器：0，0，0，1 通配符选择器或继承

block 独占一行；可以设置width、height、margin、padding属性，宽度默认为父级宽度的100%；换行显示。 inline 相邻元素在一行上，一行可以显示多个；width、hei

theme: Chinese-red --- temp > 背景： > 在日常开发展示页面时，如果一段文本的数量过长，由于页面宽度的影响，有可能不能完全显示。为了

--- theme: Chinese-red --- > 背景： > 在日常开发展示页面时，如果一段文本的数量过长，由于页面宽度的影响，有可能不能完全显示。为了提高用户的使用体验，这个时候就需要我们把