web前端面试题及答案 css篇

我会带着你远行 2022-08-21 11:48 351阅读 0赞

**1.CSS3有哪些新特性？**

CSS3实现圆角（border-radius），

阴影（box-shadow），

对文字加特效（text-shadow、），

线性渐变（gradient），

旋转（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,\-30px) skew(\-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器 多背景 rgba

在CSS3中唯一引入的伪元素是::selection.

媒体查询，多栏布局，border-image；

**2.XML和JSON的区别？**

(1).数据体积方面。JSON相对于XML来讲，数据的体积小，传递的速度更快些。

(2).数据交互方面。JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。

(3).数据描述方面。JSON对数据的描述性比XML较差。

(4).传输速度方面。JSON的速度要远远快于XML。

**3.对BFC规范的理解？**

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。    （W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。）

**4.解释下 CSS sprites，以及你要如何在页面或网站中使用它。**

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确；

**5.position的值， relative和absolute分别是相对于谁进行定位的？**

absolute 生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。

fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。

relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

static 默认值。没有定位，元素出现在正常的流中。

**6.display:none和visibility:hidden的区别？**

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

**7.CSS中 link 和[@import][import] 的区别是？**

(1)  link属于HTML标签，而@import是CSS提供的;

(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

(4)  link方式的样式的权重 高于@import的权重.

**8.position:absolute和float属性的异同?**

A：共同点：对内联元素设置\`float\`和\`absolute\`属性，可以让元素脱离文档流，并且可以设置其宽高。

B：不同点：float仍会占据位置，position会覆盖文档流中的其他元素。

**9.介绍一下box-sizing属性？**

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

**10.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？**

1.id选择器（ \#  myid）

2.类选择器（.myclassname）

3.标签选择器（div,  h1,  p）

4.相邻选择器（h1 \+  p）

5.子选择器（ul >  li）

6.后代选择器（li  a）

7.通配符选择器（ \* ）

8.属性选择器（a\[rel = "external"\]）

9.伪类选择器（a:  hover,  li:nth-child）

可继承的样式： font-size font-family color, text-indent;

不可继承的样式：border padding margin width height ;

优先级就近原则，同权重情况下样式定义最近者为准;

载入样式以最后载入的定位为准;

!important > id > class >  tag

css3新增伪类：

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个  <p> 元素。

p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

[import]: https://www.talkingcoder.com/u/import

发表评论取消回复

表情：

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

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

相关阅读

相关前端面试题及答案

1.http 请求 http协议使用tcp协议进行传送，首先是tcp 三次握手，完成之后，客户端会向服务器发出请求 2、http 请求方式 Get (get提交方式会

电玩女神/ 2023年07月10日 00:54/ 0 赞/ 103 阅读

相关 html5css3面试题及答案,前端面试题及答案 - CSS篇

这篇文章并不是最全的前端面试题(没有最全，只有更全)，只是针对自己面试过程中遇到的一些难题、容易忽略的题做一个简单的笔记，方便后面有面试需要的小伙伴们借鉴，后续内容会不定时更新

女爷i/ 2022年10月06日 11:46/ 0 赞/ 276 阅读

相关 web前端面试题及答案 JavaScript篇

1.null和undefined的区别？ 1，null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。 2，nul

谁践踏了优雅/ 2022年08月21日 13:40/ 0 赞/ 245 阅读

相关 web前端面试题及答案 html篇下

11.iframe的优缺点？ > 1.`<iframe>`优点： > ① 解决加载缓慢的第三方内容如图标和广告等的加载问题； > ② Security sandbox

绝地灬酷狼/ 2022年08月21日 13:39/ 0 赞/ 229 阅读

相关 web前端面试题及答案 html篇上

1.说说你对语义化的理解？ 1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构 2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签

秒速五厘米/ 2022年08月21日 11:53/ 0 赞/ 272 阅读

相关 web前端面试题及答案 css篇

1.CSS3有哪些新特性？ CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow、），线性渐变（gr

我会带着你远行/ 2022年08月21日 11:48/ 0 赞/ 352 阅读

相关 Web前端面试题及答案--JavaScript

Web前端面试题及答案–JavaScript篇随着互联网行业蓬勃兴起，Web前端开发已经成为互联网行业必不可缺的一个岗位，进入公司从事Web前端开发前首先要通过

雨点打透心脏的1/2处/ 2022年06月10日 13:26/ 0 赞/ 236 阅读

相关前端面试题（CSS篇）

CSS篇 1、介绍一下标准CSS的盒模型？低版本IE的盒子模型有什么不同的？ IE盒子模型、W3C盒子模型盒模型：内容（`content`）、填充（`paddi

ゞ浴缸里的玫瑰/ 2022年02月01日 11:57/ 0 赞/ 378 阅读

相关前端面试题及答案 - CSS篇

1、CSS3的新特性实现圆角（border-radius）阴影（box-shadow）文字加特效（text-shadow）线性渐变（gr

太过爱你忘了你带给我的痛/ 2021年09月20日 04:52/ 0 赞/ 472 阅读

相关前端面试题及答案

http 请求 http协议使用tcp协议进行传送，首先是tcp 三次握手，完成之后，客户端会向服务器发出请求 http 请求方式 Get (get提交方式会在url上...

小灰灰/ 2021年05月03日 05:38/ 0 赞/ 549 阅读