级前端面试css必备题目

简介: 跟大家分享一些我准备的初级前端面试题,适用于初次找工作,找实习的朋友们,这一系列会一直连更,大家可以码住哦.

谈一谈 css 盒模型
CSS3 中的盒模型有以下两种:W3C标准盒模型、IE(替代)盒模型。
两种盒子模型都是由 content + padding + border + margin 构成,但是

IE 盒模型:属性 width,height 包含 content、border 和 padding.
W3C 标准盒模型:属性 width ,height 只包含内容 content,不包含 border 和 padding 。

切换盒模型:需要修改 css3 的 box-sizing 属性:

box-sizing: content-box :标准盒模型(默认值),一般浏览器也都默认为标准盒子模型。
box-sizing: border-box :IE(替代)盒模型,一般根据实际项目需要自行设置。

box-sizing:border-box的作用
①:没有设置box-sizing:border-box属性,宽高会加上padding和border的值, 需要我们手动去计算,减去padding和border的值,并调整content的值,以免超过给定的宽高    
 ②:加了box-sizing:border-box属性,padding和border的值就不会在影响元素的宽高, 相当于把padding和border的值都算在content里, 盒子模型会自动根据padding和border的值来调整content的值,就不需要手动调整
用过哪些css选择器
/ 类(class)选择器 /
.red {
color: red;
}
/ id选择器 /

box {

color: green;
}
/ 后代选择器 选择的范围比子选择器广 包括所有后代/**
.wrap .header {
font-size: 30px;
}
/ 子选择器 亲儿子选择器
.wrap>.header {
font-size: 50px;
}
/ 群组选择器 /

a ,

.b ,
p {
color: blue;
}
/ 通配符选择器 /

{

margin: 0;
padding: 0;
}
伪类选择器
静态伪类: 只能用于超链接的样式

:link 超链接点击之前
:visited 链接被访问过之后

动态伪类:针对所有标签都适用的样式

:hover “悬停”:鼠标放到标签上的时候
:active “激活”: 鼠标点击标签,但是不松手时。
:focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点)

目录
打赏
0
0
0
0
1
分享
相关文章
浏览器常见面试题目及详细答案解析
本文围绕浏览器常见面试题及答案展开,深入解析浏览器组成、内核、渲染机制与缓存等核心知识点。内容涵盖浏览器的主要组成部分(如用户界面、呈现引擎、JavaScript解释器等)、主流浏览器内核及其特点、从输入URL到页面呈现的全过程,以及CSS加载对渲染的影响等。结合实际应用场景,帮助读者全面掌握浏览器工作原理,为前端开发和面试提供扎实的知识储备。
104 4
|
25天前
|
Java Redis 面试题集锦 常见高频面试题目及解析
本文总结了Redis在Java中的核心面试题,包括数据类型操作、单线程高性能原理、键过期策略及分布式锁实现等关键内容。通过Jedis代码示例展示了String、List等数据类型的操作方法,讲解了惰性删除和定期删除相结合的过期策略,并提供了Spring Boot配置Redis过期时间的方案。文章还探讨了缓存穿透、雪崩等问题解决方案,以及基于Redis的分布式锁实现,帮助开发者全面掌握Redis在Java应用中的实践要点。
82 6
校招 Java 面试基础题目解析及学习指南含新技术实操要点
本指南聚焦校招Java面试,涵盖Java 8+新特性、多线程与并发、集合与泛型改进及实操项目。内容包括Lambda表达式、Stream API、Optional类、CompletableFuture异步编程、ReentrantLock与Condition、局部变量类型推断(var)、文本块、模块化系统等。通过在线书店系统项目,实践Java核心技术,如书籍管理、用户管理和订单管理,结合Lambda、Stream、CompletableFuture等特性。附带资源链接,助你掌握最新技术,应对面试挑战。
52 2
Java 校招面试题目合集及答案 120 道详解
这份资料汇总了120道Java校招面试题目及其详细答案,涵盖Java基础、JVM原理、多线程、数据类型、方法重载与覆盖等多个核心知识点。通过实例代码解析,帮助求职者深入理解Java编程精髓,为校招面试做好充分准备。无论是初学者还是进阶开发者,都能从中受益,提升技术实力和面试成功率。附带的资源链接提供了更多学习材料,助力高效备考。
67 3
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
校招 java 面试基础题目及解析
本文围绕Java校招面试基础题目展开,涵盖平台无关性、面向对象特性(封装、继承、多态)、数据类型、关键字(static、final)、方法相关(重载与覆盖)、流程控制语句、数组与集合、异常处理等核心知识点。通过概念阐述和代码示例,帮助求职者深入理解并掌握Java基础知识,为校招面试做好充分准备。文末还提供了专项练习建议及资源链接,助力提升实战能力。
96 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问