首页 > 其他分享 >前端面试题(CSS篇一)

前端面试题(CSS篇一)

时间:2024-07-04 09:27:53浏览次数:22  
标签:面试题 伪类 模型 元素 content border 前端 CSS 属性

一、介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?

相关知识点:

(1)有两种盒模型:IE盒模型(border-box)、W3C标准盒模型(content-box)

(2)盒模型:分为内容(content)、填充(padding)、边界(margin)、边框(border)四个部分

IE盒模型和W3C标准盒模型的区别:

(1)W3C标准盒模型:属性width,height只包含内容content,不包含border和padding
(2)IE盒模型:属性width,height包含content、border和padding,指的是content+padding+border。

在ie8+浏览器中使用哪个盒模型可以由box-sizing(CSS新增的属性)控制,默认值为content-box,即标准盒模型;
如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6,7,8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型,所有的浏览器都会把盒模型解释为W3C盒模型。

回答:

盒模型都是有四个部分组成的,分别为content(内容)、padding(填充)、border(边框)、margin(外边距)
标准盒模型和IE盒模型的区别在于设置width和height时,所对应的范围不同。标准盒模型的width和height属性的范围只包含了content,而IE盒模型的width和height属性的范围包含了border、padding和content。

一般来说,我们可以通过修改元素的box-sizing属性来改变元素的盒模型。

二、伪元素与伪类的区别

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句
话中的第一个字母,或者是列表中的第一个元素。

伪类用于当已有的元素处于某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素,并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说,我们可以通过::be
fore来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。

有时你会发现伪元素使用了两个冒号(::)而不是一个冒号(:)。这是CSS3的一部分,并尝试区分伪类和伪元素。大多数浏览
器都支持这两个值。按照规则应该使用(::)而不是(:),从而区分伪类和伪元素。但是,由于在旧版本的W3C规范并未对此进行
特别区分,因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

资料参考:

《总结伪类与伪元素》icon-default.png?t=N7T8http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/

三、CSS中的属性继承

每一个属性在定义中都给出了这个属性是否具有继承性,一个具有继承性的属性会在没有指定值的时候,会使用父元素的同属性的值
来作为自己的值。

一般具有继承性的属性有,字体相关的属性,font-size和font-weight等。文本相关的属性,color和text-align等。表格的一些布局属性、列表属性如list-style等。还有光标属性cursor、元素可见性visibility。

当一个属性不是继承属性的时候,我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。

资料参考:

《继承属性》icon-default.png?t=N7T8https://developer.mozilla.org/zh-CN/docs/Web/CSS/inheritance

《CSS 有哪些属性可以继承?》icon-default.png?t=N7T8https://www.jianshu.com/p/34044e3c9317

四、关于伪类 LVHA 的解释?

a标签有四种状态:链接访问前、链接访问后、鼠标滑过、激活,分别对应四种伪类:link、:visited、:hover、:active;

当链接未访问过时:

(1)当鼠标滑过a链接时,满足:link和:hover两种状态,要改变a标签的颜色,就必须将:hover伪类在:link伪类后面声明;
(2)当鼠标点击激活a链接时,同时满足:link、:hover、:active三种状态,要显示a标签激活时的样式(:active),
必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。

当链接访问过时,情况基本同上,只不过需要将:link换成:visited。

这个顺序能不能变?可以,但也只有:link和:visited可以交换位置,因为一个链接要么访问过要么没访问过,不可能同时满足,
也就不存在覆盖的问题。

五、display 有哪些值?说明他们的作用。

block    块类型。默认宽度为父元素宽度,可设置宽高,换行显示。
none    元素不显示,并从文档流中移除。
inline    行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。
inline-block 默认宽度为内容宽度,可以设置宽高,同行显示。
list-item    像块类型元素一样显示,并添加样式列表标记。
table    此元素会作为块级表格来显示。
inherit    规定应该从父元素继承display属性的值。

标签:面试题,伪类,模型,元素,content,border,前端,CSS,属性
From: https://blog.csdn.net/weixin_74068942/article/details/140137178

相关文章

  • 常见的sql面试题
    1.sql优化(1)避免使用*(2)合理创建索引(3)尽量避免where子句中对字段进行null值判断,否则全表扫描。(4)尽量避免在where子句中使用or来连接条件,也会进行全表扫描。用IN替换OR(5)like时,不以%开头,否则全表扫描(6)尽量避免在where子句中对字段进行表达式操作,否则全表扫描(7)尽量避免在wher......
  • 编译elementUI主题scss
    elementVue2工程1. 安装包"gulp":"^4.0.2","gulp-autoprefixer":"^8.0.0","gulp-minify-css":"^1.2.4","gulp-sass":"^4.0.2","gulp-uglify":"^3.0.2",2.......
  • Vuex 核心揭秘:打造高效前端状态库
    引言Vue.js是一个流行的JavaScript框架,以其简洁的设计和易用的特性赢得了开发者的青睐。它允许开发者通过声明式的方式编写前端代码,从而提高开发效率。Vuex是Vue.js的官方状态管理库,它为Vue应用提供了一个中心化存储,使得所有组件都能够访问和更新共享状态。这对于大......
  • 【Java基础】--线程(包含面试题)
    本章主要了解什么是进程?进程和线程有什么关系?有什么区别?以及创建线程的方式有哪些?1.什么是进程?简单的来说,进程是指在系统中正在运行的一个应用程序,每个进程之间是独立的,每个进程均运行在其专用的且受保护的内存。2.什么是线程?线程,又称轻量级进程(LightWeightProcess)。......
  • html+JavaScript+css 24点计算器
    源代码    采用穷举计算方法讲人话:根据四个数随机列算式,算出来是24就显示在列表里。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">&l......
  • 大数据面试题之数仓(1)
    目录介绍下数据仓库数仓的基本原理数仓架构数据仓库分层(层级划分),每层做什么?分层的好处?数据分层是根据什么?数仓分层的原则与思路知道数仓建模常用模型吗?区别、优缺点?星型模型和雪花模型的区别?应用场景?优劣对比数仓建模有哪些方式?数仓建模的流程?维度建模的......
  • 大数据面试题之数仓(2)
    目录维度表和事实表的区别? 什么是ER模型? OLAP、OLTP解释(区别)三范式是什么,举些例子 维度设计过程,事实设计过程 维度设计中有整合和拆分,有哪些方法,并详细说明 事实表设计分几种,每一种都是如何在业务中使用 单事务事实表、多事务事实表区别与作用 说下一致性维......
  • web前端应用性能指标测量工具有哪些?
    接上一篇介绍前端性能指标的内容,本文主要总结下一般使用的性能测量工具。1、可以借助Gooogle开源的web-vitals库来测量一些性能指标:import{onCLS,onINP,onLCP,onFCP,onFID,onTTFB}from'web-vitals';onCLS(console.log);onINP(console.log);onLCP(console.log);o......
  • web前端应用性能指标优化方案有哪些?
    接上一篇介绍前端性能指标的内容,本文主要总结下一般使用的指标优化方案加载相关:FCP优化:降低服务器响应时间:确保服务器能迅速响应请求,这样浏览器就能更快地开始处理并渲染页面内容。可以通过优化服务端代码、改善静态资源的提供方式(如将图片部署到CDN)来实现。延迟加载非关......
  • web前端应用应该关注哪些性能指标?
    作为一个有经验的前端开发工程师来说,关注性能是必不可少的一项日常工作,那么应该重点关注一些什么样的性能指标呢?其实主要还是从用户体验的角度来看,一般我们会从页面加载相关、交互相关方面入手。原文:前端性能指标,一网打尽FCP:首次内容绘制LCP:最大内容绘制TTFB:首字节时间TBT:总......