2023CSS面试题

已于 2023-02-09 21:01:33 修改
阅读量242 收藏 1
点赞数
文章标签： css
于 2022-10-08 21:17:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44852027/article/details/127216396
版权

css3有哪些新属性

•	边框：
	border-radius：圆角边框
	box-shadow：边框阴影，box-shadow: 10px 10px 5px #888888
	border-image：边框图片，border-image:url(border.png) 30 30 round;
•	背景：
	background-size：规定背景图片的尺寸，background-size:63px 100px
	background-origin：规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区，background-					 origin:content-box; CSS3 允许您为元素使用多个背景图像。
	background-image:url(bg_flower.gif),url(bg_flower_2.gif);
•	文本效果：
	text-shadow：向文本应用阴影，可以规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。text-shadow: 5px 5px 5px #FF0000;
	word-wrap：允许文本进行换行。word-wrap:break-word;
•	布局：
	弹性布局：flex
	网格布局：grid
•	动画：Animation
•	过渡：transition
•	变形：transfrom
•	颜色：rgba
•	渐变
•	媒体查询 就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！

css哪些属性可以继承

字体相关：font,  font-size, font-weight, font-family, font-style, font-variant, line-height
文本相关： letter-spacing, word-spacing, text-align, text-indent, text-transform,
列表相关：list-style-image, list-style-position, list-style-type, list-style
颜色：color

单行文本/多行文本省略号

单：
/* 不换行 */
white-space: nowrap;
/* 超出部分隐藏 */
overflow: hidden;
/* 文本超出时，显示省略标记 */
text-overflow: ellipsis;

多
/* 超出部分隐藏 */
overflow:hidden;
/* 文本超出时，显示省略标记 */
text-overflow:ellipsis;
/* 弹性伸缩盒子模型 */
display:-webkit-box;
/* 子元素呈现3行 */
-webkit-line-clamp:3;
/* 子元素排列方式为垂直 */
-webkit-box-orient:vertical;

1rem、1em、1vh、1px各自代表的含义

•	rem：rem是全部的长度都相对于根元素<html>元素。通常做法是给html元素设置一个字体大小，然后
其他元素的长度单位就为rem。
•	em：子元素字体大小，em是相对于父元素字体大小，元素的width/height/padding/margin用em的话是相对于该元素的font-size
•	vw/vh：全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的
1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。
•	px：px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。一般电脑的分辨率有{1920*1024}等不同的分辨率，1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

BFC规范

•	浮动元素：float 除 none 以外的值
•	绝对定位元素：position (absolute、fixed) 
•	display： 为 inline-block、table-cells、flex
•	overflow：除了 visible 以外的值 (hidden、auto、scroll)  浮动元素：float 除 none 以外的值

CSS Hack

CSS Hack用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。
Hack分类
	1. CSS属性前缀法
	2. 选择器前缀法
	3. IE条件注释法

css水平、垂直居中的写法

•	水平居中
	行内元素: text-align: center
	块级元素: margin: 0 auto
	position:absolute +left:50%+ transform:translateX(-50%)
	display:flex + justify-content: center
•	垂直居中
	设置line-height 等于height
	position：absolute +top:50%+ transform:translateY(-50%)
	display:flex + align-items: center
	display:table+display:table-cell + vertical-align: middle;

画一个三角形

 border-width: 100px;
 border-style: solid;
 border-color: transparent #0099CC transparent transparent;

0.5橡树

height: 1px;
transform: scale(0.5);

label标签的用法

label标签主要是方便鼠标点击使用，扩大可点击的范围，增强用户操作体验

盒模型

盒模型的组成，由里向外content,padding,border,margin.
在IE盒子模型中，width表示content+padding+border这三个部分的宽度
在标准的盒子模型中，width指content部分的宽度
box-sizing的使用
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
box-sizing的默认属性是content-box

选择器有哪些

ID选择器
CLASS选择器
标签选择器
通配选择器
群组选择器
层次选择器
属性选择器
伪类选择器
CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
:link、:visited、:hover、:active
1. link visited 只能给a标签加，hover和active 可以给所有的标签加。
2. 如果四个伪类都生效，一定要注意顺序 : L V H A。
3. 一般网站只这样去设置：a{} a:hover{}。
:after、:before
:checked、:disabled	
:focus
:nth-of-type()、 :nth-child()
:first-of-type、 :first-child 
:last-of-type、  :last-child
:only-of-type、 :only-child

css优先级

第一优先级：无条件优先的属性只需要在属性后面使用**！important**。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}
第六优先级：通配选择器，如*{marigin:6px;}

4个等级的定义如下：
第一等级：代表内联样式，如style=""，权值为 1000
第二等级：代表id选择器，如#content，权值为100
第三等级：代表类，伪类和属性选择器，如.content，权值为10
第四等级：代表标签选择器和伪元素选择器，如div p，权值为1
注意：通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0。

calc, support, media各自的含义及用法？

@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。

calc() 函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算；

@media 查询，你可以针对不同的媒体类型定义不同的样式。

min-width/max-width和min-height/max-height属性间多的覆盖规则

max-width会覆盖width,即使width是行内样式或者设置了！important 
min-width会覆盖max-width,此规则发生在min-width和max-width冲突的时候

块元素，行内元素，行内块元素的区别

•	行内元素： display: inline
	行内元素：a、b、span、i、em、img、u、br、
	*可以和别的行内元素放在一起
	*不能设置宽高、由内容撑开
•	块元素：display: block;
	块元素：div、p、h1-h6、dl、hr、pre、table、ul、li、form
	* 所有的块级元素独占一行显示
	*可以设置宽高
•	行内块： display: inline-block;
	行内块：input、img、button、value、label、select、option
	*可以设置宽高、并且在一行上显示
	*默认对齐的是基线

伪类与伪元素区别

伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息。
通常表示获取不存在与DOM树中的信息，或获取不能被常规CSS选择器获取的信息。
: hover
: focus
: empty
伪元素本质上是创建了一个有内容的虚拟容器。这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。
:: selection
:: first-line   /    first-letter
:: before     /     after

link 标签和 import 标签的区别

link 属于 html 标签，而@import 是 css 提供的
页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加 载。
link 是 html 标签，因此没有兼容性，而@import 只有 IE5 以上才能识别。
link 方式样式的权重高于@import 的。

animation与transition区别

transition需要触发一个事件才会随着时间改变其CSS属性；
animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果
css过渡与动画区别总结：
1、动画不需要事件触发，过渡需要。
2、过渡只有一组（两个：开始-结束） 关键帧，动画可以设置多个。

display与visibility区别

•	display:none;隐藏相应的元素。元素在文档布局中不再给它分配空间，它的各边会合拢，就当它不存在。
•	visibility:hidden;隐藏相应元素。元素在文档布局中仍保留原来的空间。

canvas和svg的区别

canvas通过javascript绘制图形（2D），canvas无法对已绘制的图像进行操作、修改
SVG是一种使用XML描述2D图形的语言，canvas需要在js中绘制，而SVG只需要在html里面通过标签绘制即可
比老马还六
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端CSS高频面试题附答案（2023）
weixin_43558117的博客
05-05 370
前端高频面试题及答案CSS篇（2023）
2023年CSS面试题集合
LQlove1的博客
03-05 4151
一、H5的新特性有哪些? 二、CSS3的新特性有哪些? 三、如何实现一个盒子水平垂直居中? 方法一：利用定位（常用方法,推荐） 方法二：利用 margin:auto; 方法三：利用 display:table-cell 方法四：利用 display：flex;设置垂直水平都居中 方法五：计算父盒子与子盒子的空间距离(这跟方法一是一个道理) 方法六：利用 transform 四、CSS的盒模型 五、CSS选择器的优先级及CSS权重如何计算? 六、列举 5 个以上的 H5input 元素 type 属性值？
2023春招CSS面试题（更新中...）
weixin_45784511的博客
03-16 571
盒模型、CSS选择器的优先级、隐藏元素的方法有哪些、px和rem的区别是什么、重绘重排有什么区别、让一个元素水平垂直居中的方法有哪些、CSS的哪些属性可以继承，哪些不可以继承、有没有用过预处理器、说一说BFC
CSS2023年面试题汇总~~~~持续更新中！！！！
weixin_46369590的博客
04-08 406
css面试题总结
2023前端面试题------HTML5 CSS 面试题
每天都要努力学习哦~~
03-30 1108
CSS3属性中关于制作动画的三个属性：Transform,Transition,Animation。1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进⾏ 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。div {} transition和animation两者都能实现动画效果transform常常配合transition和animation使⽤2、transition样式过渡，从⼀种效果逐渐改变为另⼀种效果。
2023前端HTML+CSS最全面试题和答案汇总
02-09
内容概要：2023前端HTML+CSS最全面试题汇总，前端知识点全部覆盖，保你面试无忧。在手写Spring 源码的过程中会摘取整体框架中的核心逻辑，简化代码实现过程，保留核心功能，例如：IOC、AOP、Bean生命周期、上下文、...
css面试题.docx
10-06
CSS面试题大全 CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页样式的语言，广泛应用于Web开发领域。本文总结了常见的CSS面试题，涵盖了CSS基础知识、布局相关、样式控制、选择器、css引入方式、动画...
2023最新前端面试题总结
05-30
"前端面试题总结" 以下是根据给定文件信息生成的相关知识点： 浏览器兼容性 在前端开发中，浏览器兼容性是一个非常重要的问题。不同的浏览器对 HTML、CSS、JavaScript 的解析和执行方式不同，这导致了同一个页面...
经典的CSS面试题（含答案）
11-04
以下是一些经典的CSS面试题及其详细解答： 1. **什么是CSS？** CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括SVG、MathML等）文档呈现的样式语言。它定义了元素的布局、颜色、字体和其他视觉属性。...
2023前端面试题——CSS篇
HanXiaoXi_yeal的博客
02-06 3294
一般情况下 text-align:center,marin:0 auto;足矣④ flex⑤ 盒模型⑦ ⑧ 两种不同的绝对定位方法。
2023前端面试题及答案整理（CSS）
suli77的博客
02-07 962
2023前端面试题及答案整理（css）
面试题2023
qq_39175450的博客
05-31 227
核心是提供对View和ViewModel的双向数据绑定，当数据改变的时候，ViewModel能监听到数据的变化，自动更新视图，当用户操作视图的时候，ViewModel也可以监听到视图的变化，然后通知数据进行改动，这就实现了双向数据绑定。ViewModel通过双向绑定把View和Model连接起来，他们之间的同步是自动的，不需要认为干涉，所以我们只需要关注业务逻辑即可，不需要操作DOM，同时也不需要关注数据的状态问题，因为她是由MVVM统一管理。特点：可以重复利用变量，并且这个变量不会污染全局的一种机制；
2023前端面试题及答案整理（CSS布局）
suli77的博客
02-09 714
2023前端面试题及答案整理（CSS布局）
2023前端面试题总结（html，css，js）
qq_67481783的博客
04-30 2474
BFC - Block Formatting Context 块级格式化上下文， BFC是一块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素。特点：1,每一个BFC区域只包括其子元素，不包括其子元素的子元素。2,每一个BFC区域都是独立隔绝的,互不影响怎样使一个元素变成BFC区域1、body根元素2、float属性不为none3、position为absolute或fixed4、行内块显示模式，inline-block。
2023年03月 其他-Web前端基础面试题（CSS_42道）
热门推荐
微软MVP Eleven
03-06 3万+
CSS 是层叠样式表（Cascading Style Sheets）的简写，它是一种用于定义网页和网页应用程序外观的标准格式语言。
2023高薪前端面试题（一、前端基础——css）
iaz999的博客
04-28 1419
Flex如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，css动画是优选方案。如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画，这样你的动画可以保持高效，并且你的工作流也更可控。js动画与css3动画的区别_js逐帧动画_Sco_Jing1031的博客-CSDN博客。
2023大厂高频面试题之CSS篇
zag666的博客
05-18 1707
css的position属性取值 css选择器优先级和权重 box-sizing属性 CSS 盒子模型 CSS实现三角形 CSS布局 弹性布局display:flex 实现一个垂直水平居中 隐藏页面元素的方法 style-components HTML脱离文档流的方法 block，inline和inlinke-block transition与animation区别...
2023年超全前端面试问答（CSS）
suli77的博客
02-18 1333
2023年超全前端面试问答（CSS），一共105道
2023css面试题
最新发布
08-26
很高兴回答你关于2023 CSS面试题的问题！以下是一些常见的CSS面试题，供你参考： 1. 请解释CSS中的盒模型（Box Model）是什么，并解释其组成部分。 2. 请解释CSS选择器的优先级是如何工作的，以及如何计算优先级。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值