腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

综合排序丨最热优先丨最新优先

100道CSS面试题及答案

100道CSS面试题及答案一、基础概念 1. 什么是CSS？ @import规则：在CSS文件中使用@import规则导入其他CSS文件。例如：@import url('another-styles.css');。例如： .box { width: 200px; height: 100px; padding: 10px; border: 5px solid black; margin: 20px ; } 该.box元素实际占据的宽度为200 + 10*2 + 5*2 + 20*2 = 270px，高度为100 + 10*2 + 5*2 + 20*2 = 170px。例如同样的代码在低版本IE中，.box元素实际占据的宽度为200 + 20*2 = 240px，高度为100 + 20*2 = 140px。

2025-09-03

3200

标签:

前端基础：100道CSS面试题总结

在前端基础面试中，CSS 是不会缺席的，下面就给大家分享下 CSS 的常见面试题。 CSS面试题：介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ width:auto 和 width:100%的区别绝对定位元素与非绝对定位元素的百分比计算的区别简单介绍使用图片 base64 编码的优点和缺点。有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。 png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？为什么 height:100%会无效？ min-width/max-width 和 min-height/max-height 属性间的覆盖规则？内联盒模型基本概念什么是替换元素？ css 实现上下固定中间自适应布局？ css 两栏布局的实现？ css 三栏布局的实现？

全栈程序员站长

2022-09-01

3.4K0

标签:

Docker 面试题 100 道

下面是一些样例面试题及其答案：基础概念什么是Docker？

2024-12-07

1.3K0

标签:

2025 年最新 CSS 面试题 100 道及详细答案解析

我将从基础概念、选择器与特性、布局、动画与过渡、响应式设计等方面，为你呈现100道CSS面试题及答案，助你系统掌握CSS知识。100道CSS面试题及答案一、基础概念1. 什么是CSS？元素实际占据的宽度为200 + 10*2 + 5*2 + 20*2 = 270px，高度为100 + 10*2 + 5*2 + 20*2 = 170px。例如同样的代码在低版本IE中，.box元素实际占据的宽度为200 + 20*2 = 240px，高度为100 + 20*2 = 140px。例如：/* 使用content-box */.box1 { width: 200px; height: 100px; padding: 10px; border: 5px solid black , 面试题，答案解析，盒模型，选择器优先级，Flexbox, 居中元素，浮动，媒体查询，响应式设计，Grid 布局，伪类，伪元素，动画

2025-06-15

1.1K0

标签:

2025 年最新 100 道 CSS 面试题及详细答案解析

100道CSS面试题及答案（续）二、使用方法示例1. CSS引入方式的使用以下是一个完整示例，展示三种CSS引入方式的使用：<!DOCTYPE html><html><head> <! DOCTYPE html><html><head><style>.box { width: 200px; height: 100px; padding: 20px; border: 10px solid 按钮组件封装下面是一个使用CSS和HTML封装的按钮组件，支持不同状态和样式：<! 响应式导航栏组件下面是一个使用CSS Flexbox实现的响应式导航栏组件：<! 2025 年，CSS, 面试题，答案解析，盒模型，选择器优先级，Flexbox, 居中元素，浮动，媒体查询，响应式设计，Grid 布局，伪类，伪元素，动画

2025-06-15

4680

标签:

50道CSS基础面试题

23 0 0 50道CSS基础面试题 1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ important 比内联优先级高 4 CSS优先级算法如何计算？元素选择符： 1 class选择符： 10 id选择符：100 元素标签：1000 ! ; width: 200px; height: 100px; margin: 0 auto; left: 0; right: 0; 还有更加优雅的居中方式就是用flexbox，我以后会做整理。第二种全屏的品字布局: 上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。 13 常见的兼容性问题？ --下面是css代码--> .aside { margin-bottom: 100px; width: 100px; height: 150px; background: #f66; }

2018-07-06

2.3K0

标签:

59道CSS面试题(附答案)

CSS部分的面试题主要考察应试者对CSS基础概念模型的理解，例如文档流、盒模型、浮动、定位、选择器权重、样式继承等。（4）外墙法是指在父元素外面，添加“一道墙”，设置属性 clear:both （5）内墙法是指在父元素内部，浮动元素的最后面，添加“一道墙”，设置属性 clear:both （6）伪元素是指为了少创建元素 8、CSS优先级如何排序？优先级如下: ！important>style（内联）>ld（权重100）> class（权重10）>标签（权重1）。同类别的样式中，后面的会覆盖前面的。 .min-height{ min-height：100px； _height：100px； background：red； } 31、已知高度的容器如何在页面中水平垂直居中？具体代码如下。； top:50%; margin：-100px 0 0-100px； /*或者 marion：-100px*/ } </style> <div id="box“></div> 32、px和em的区别是什么

2021-03-25

7.1K0

标签:

50道CSS面试题（附答案）

important 比内联优先级高 4 CSS优先级算法如何计算？元素选择符： 1 class选择符： 10 id选择符：100 元素标签：1000 ! ;left: 50%;top: 50%;margin: -50px 0 0 -100px; 绝对定位的左右居中： border: 1px solid black;position: absolute; width: 200px;height: 100px;margin: 0 auto;left: 0;right: 0; 还有更加优雅的居中方式就是用flexbox，我以后会做整理。第二种全屏的品字布局: 上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。 13 常见的兼容性问题？ --下面是css代码--> .aside { margin-bottom: 100px; width: 100px; height

2018-08-03

2.2K0

标签:

【收藏】 100 道 Linux 面试题 附答案

不可中断的睡眠状态 R=运行 S=睡眠 T=跟踪/停止 Z=僵尸进程 %CPU — 上次更新到现在的CPU时间占用百分比 %MEM — 进程使用的物理内存百分比 TIME+ — 进程使用的CPU时间总计，单位1/100 参考：x7poe.cn/eOQD0 好了，今天的分享就到此结束，希望以这100到Linux面试题能帮你周哥offer。

2022-10-27

3.9K0

标签:

来5道css面试题

很显然二者没有区别 <style> html, body { width: 100%; height: 100%; margin:0px

2023-01-12

5960

标签:

面向对象编程