css面试常问的知识点整理

Myth丶恋晨 2023-06-28 04:59 54阅读 0赞

# 特殊的属性 #

1、link和import的区别

兼容性（低/无）  |  权重高/低  | 运行时间（页面加载时/页面加载后）

2、transition和animation的区别

Transition: property duration time-function delay；配合：hover等伪元素

Animation: name duration timing-function delay iteration-count direction; 配合@keysframs name使用

同：随着时间改变属性值

异：触发条件（动作事件/自动）

3、relative和absolute的区别

参照对象不同（本身/最近的父级元素）

4、block和inline的区别

可支配的属性不同（宽高内外边距都可以/宽高不可以+上下内外边距不可以）

block标签：div、p、h1-h6、ul、ol、li、dl、dt

inline标签：span、a、I、img、input、select、strong

5、:first-child :last-child :nth-child(n)

6、选择器模块

盒子 display:flex;

边框和背景

2d和3d特效 transform：translate（x，y）rotate（deg）scale（x\_num，y\_num）skew（x\_deg, y\_deg）

Matrix:translate \\ scale \\ rotate \\ skew

# 某种效果的实现 #

1、实现一个三角形

原理：边框分布

代码：width/height = 0； border-top:6px solid red; border-right/bottom/left: 6px solid transparent;

2、块居中显示

条件：父级有指定宽高  margin：0 auto；

条件：父级高不确定子高确定  父级relative、子absolute + 宽高 + left:50%;top:50%;transform：transition（-w/2，-h/2）

条件：父级高子高都不确定  父display:flex; +align-items:center; justify-content:center;

3、清浮动

clear：both； overflow：hidden/auto；:after\{clear: both;content: ‘’;\}

4、弹性布局

核心：display：flex；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzUxMDYxMg_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzUxMDYxMg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200107161320175.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzUxMDYxMg==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，54人围观）

还没有评论，来说两句吧...

相关阅读

相关阿里大神整理的Java核心知识点和面试官常问到的知识点，压压惊

疫情当下、裁员浪潮，焦虑和不安充斥着这个金三银四。这个时候外部的各种变化愈发证明一个重要的一点：不断提升个人价值的重要性。不是薪资层面的数字简单累积，而是一个人在职场里

拼搏现实的明天。/ 2024年04月07日 13:12/ 0 赞/ 67 阅读

相关阿里内部整理的Java核心知识点和面试官常问到的知识点，压压惊

疫情当下、裁员浪潮，焦虑和不安充斥着这个金三银四。这个时候外部的各种变化愈发证明一个重要的一点：不断提升个人价值的重要性。不是薪资层面的数字简单累积，而是一个人在职场里

迷南。/ 2024年03月23日 14:03/ 0 赞/ 86 阅读

相关 css面试常问的知识点整理

特殊的属性 1、link和import的区别兼容性（低/无） | 权重高/低 | 运行时间（页面加载时/页面加载后） 2、transition和ani

Myth丶恋晨/ 2023年06月28日 04:59/ 0 赞/ 55 阅读

相关 CSS 知识碎片 [一] 面试常问

> 业精于勤荒于嬉 1、css水平、垂直居中的写法，请至少写出4种？水平居中行内元素 text-align : center 块元素：margin

- 日理万妓/ 2022年12月21日 00:59/ 0 赞/ 216 阅读

相关 HTML面试常问知识点总结（持续更新~）

HTML面试总结 1、DOCTYPE 的作用是什么？ 2、 DTD 介绍 3、HTML5 为什么只需要写，而不需要引入 DTD？ 4、标准模式(

我不是女神ヾ/ 2022年11月01日 15:56/ 0 赞/ 295 阅读

相关安卓面试常问知识点

1.Android四大组件 ①activity 提供用户界面用于与用户交互的组件，（活动窗体）它需要为保持各界面的状态，做很多持久化的事情，妥善管理生命周期以及一些跳转逻

电玩女神/ 2022年07月16日 13:46/ 0 赞/ 541 阅读

相关 JVM面试知识点整理

1. 运行时数据区域 ![70][] 程序计数器（Program Counter Register） -------------------- 这和计算机操作系

柔情只为你懂/ 2022年05月19日 11:55/ 0 赞/ 308 阅读

相关 java面试常问知识点

面试经常问的知识点，可以随时充电。 [https://blog.csdn.net/shuryuu/article/details/80596603][https_blog.c

蔚落/ 2022年02月26日 02:39/ 0 赞/ 304 阅读

相关面试常被问的25个Spring知识点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZvbGxv

小咪咪/ 2022年02月14日 02:17/ 0 赞/ 311 阅读

相关整理面试知识点

熟悉主流开源框架，如Spring、SpringMVC、MyBatis、Activity、SpringBoot等；熟悉Spring原理；注重利用合理的设计模式和模块化的组织

妖狐艹你老母/ 2022年02月13日 18:31/ 0 赞/ 378 阅读