跳到主要内容

Css

2024年03月05日
柏拉文
越努力,越幸运

一、BFC


1.1 BFC 及其应用?

1.2 什么是 margin 重叠问题?如何解决?

二、单位


2.1 布局单位

2.2 Px 和 Rem 的区别?

三、布局


3.1 九宫格布局

3.2 自适应布局?

3.3 垂直居中布局

3.4 定宽、自适应布局

3.5 请写出多种等高布局

3.6 如何垂直居中一个浮动元素?

3.7 列出你所知道可以改变页面布局的属性

3.8 div+css的布局较table布局有什么优点?

3.9 vertical-align:middle 什么情况下不会绝对居中?如何解决?

3.10 如何居中 DIV ?如何居中一个浮动元素?如何让绝对定位的div居中

3.11 什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE

3.12 一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度?

四、动画


4.1 动画的实现方式

4.2 说一说 Css3 的 animation?

4.3 如何使用CSS实现硬件加速?

4.4 JS 动画 与 Css3 动画的差异性?

4.5 transition 与 animation 的区别?

4.6 请用CSS写一个简单的幻灯片效果页面

4.7 CSS3 动画(简单动画的实现,如旋转等)?

4.8 为什么有时候⽤ translate 来改变位置⽽不是定位?

4.9 Css 中,为什么要用 transform、animation 属性呢?

4.10 使用 translateX 和 top 、left 做动画的区别是什么?

4.11 如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)

4.12 css实现动画,怎么让它执行完这个去执行另外一个keyFrame,你怎么知道这个动画什么时候结束?

五、版本


5.1 Css3 新增的特性?

六、绘制


6.1 如何画一个梯形

6.2 如何画一个扇形

6.3 如何画一个三角形

6.4 画一条 0.5px 的线

6.5 用纯CSS创建一个三角形的原理是什么?

七、浮动


7.1 浮动元素引起的问题?

7.2 display、float、position的关系?

7.3 为什么需要清除浮动?清除浮动的方式?

7.4 行内元素 float:left 后是否变为块级元素?

7.5 设置元素浮动后,该元素的 display 值会如何变化?

八、像素


8.1 在网页中的应该使用奇数还是偶数的字体?为什么呢?

九、定位


9.1 元素的层叠规则?

9.2 定位的属性值有何区别?

9.3 z-index属性在什么情况下会失效?

9.4 display、float、position的关系?

9.5 position的值, relative和absolute定位原点是?

9.6 父元素相对定位,那绝对定位下的子元素宽高若设为百分比,是相对谁而言的?

十、消失


10.1 元素消失的方式有哪些?

十一、继承


11.1 Css 继承属性有哪些呢?

11.2 CSS哪些属性可以继承?哪些属性不可以继承?

十二、属性


12.1 overflow 原理?

12.2 你对 line-height 是如何理解的?

12.3 display有哪些值?说明他们的作用?

12.4 font-style 属性 oblique 是什么意思?

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

12.6 margin 和 padding分别适合什么场景使用?

12.7 display:inline-block 什么时候会显示间隙?

12.8 元素竖向的百分比设定是相对于容器的高度吗?

12.9 display 的 block、inline 和 inline-block 的区别?

12.10 css中可以让文字在垂直和水平方向上重叠的两个属性是什么?

12.11 line-height 三种赋值方式有何区别?(带单位、纯数字、百分比)

十三、场景


13.2 单行、多行文本溢出隐藏?

13.3 Retina 屏下 1px 的解决方案?

13.4 如何让 Chrome 支持小于 12px 的文字?

13.5 全屏滚动的原理是什么? 用到了 CSS 的哪些属性?

十四、Flex


14.1 Flex 有哪些属性呢?

14.2 Flex 属性中 flex-grow 应用问题?

14.3 请解释一下 CSS3 的 Flexbox(弹性盒布局模型)以及适用场景?

十五、Fouc


15.1 什么是 Fouc? 如何避免?

十六、Grid


16.1 Grid 有哪些属性呢?

16.2 Flex 属性中 flex-grow 应用问题?

十七、盒模型


17.1 CSS 盒模型

17.2 box-sizing 常用的属性有哪些?分别有什么作用?

十八、选择器


十九、伪元素


19.1 伪类和伪元素有什么区别?

19.2 知道 css 有个 content 属性吗?有什么作用?有什么应用?

19.3 ::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用

二十、@media


20.1 对媒体查询的理解?

二十一、预处理器


21.1 stylus/sass/less区别?

21.2 Sass、LESS是什么?大家为什么要使用他们?

21.3 CSS预处理器/后处理器是什么?为什么要使用它们?

二十二、Background


22.1 background-image 是怎么加载图片的? 与 img 标签相比, 哪种方式先加载? 哪种方式性能更好?

二十三、幽灵空白节点


23.1 display:inline-block 什么时候不会显示间隙?

23.2 什么是幽灵空白节点? 如何消除“幽灵空白节点”的影响?

23.3 li 与 li 之间有看不见的空白间隔是什么原因引起的?如何解决?

23.4 两个 display: inline-block 元素放到一起会产生一段空白间隙,解决方法?