CSS面试题整理(一)

最新推荐文章于 2024-04-19 10:49:05 发布

wangheng0325

最新推荐文章于 2024-04-19 10:49:05 发布

阅读量206

点赞数

分类专栏： CSS 文章标签：前端 CSS 面试

本文链接：https://blog.csdn.net/wh4437121/article/details/103048955

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 什么是盒子模型？

盒子模型包括content+padding+border+margin
标准盒子模型：宽度=内容的宽度（content）
低版本IE盒子模型：宽度=content+border+padding
怪异盒模型：怪异盒模型下盒子的大小=width（content + border + padding） + margin

2、绝对定位和相对定位？

绝对定位：absolute，脱离文档流、生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
相对定位：relative，元素相对于它自己原来的位置进行移动。注意，相对定位使元素仍然占据原来的位置。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。脱离文档流。

3、清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法？

如果想要实现三个块级元素并排显示，通过float控制，那么就会出现高度塌陷问题，此时就需要清除浮动。

方法1：脚底插入clear:both; 即在父元素内最后一个位置添加一个元素并设置 clear:both; 属性。
方法2（推荐）：采用伪元素，这里我们使用:after。添加一个类clearfix：

.clearfix:after { 
     content:""; 
     display:table; /*采用此方法可以有效避免浏览器兼容问题*/
     clear:both;
}

只需要给父级设置clearfix样式即可。

4、如何保持浮层水平垂直居中？

方法1：

{
    position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
 }

方法2：

 {
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
 }

方法3：

// 旧盒子模型, 需要做兼容。
// 父盒：
{
	display:box;
	display:-webkit-box;
	box-align:center;//垂直居中;
	-webkit-box-align:center;
	box-pack:center;//水平居中
	-webkit-box-pack:center;
}

方法4：

// 弹性盒
// 父：
{
	display:flex;
	justify-content:center;//水平居中
	align-items:center;//垂直居中
}

方法5：

// 弹性盒
// 父：
{
	display:flex;
	//justify-content:flex-start flex-end center space-between space-around;	
	justify-content:center;//水平居中
	// 子：
	align-self:center;
}

5、display 的取值和各自的意思和用法？

display: 规定元素应该生成的框的类型，文档内任何元素都是框。
(1) display:none和visiability: hidden 都可以隐藏div，前者不占据文档的空间，后者占据文档的位置。
(2) inline: 行内元素，以水平方式布局，垂直方向的margin和padding都是无效的，大小和内容一样，且无法设置宽高。
(3) block: 块元素，独占一行，可以使用margin来控制元素之间间距
(4) inline-block: 既具有block的宽度高度特性又具有inline的同行特性。

6、w3c标准？

网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。
对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C
DOM）、ECMAScript等。

标准规范：

需要声明（DOCTYPE）
DOCTYPE（document type）文档类型的简写，用来说明你用的XHTML或者HTML是什么版本。其中DTD叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分。
、需要定义语言编码
注：如果忘记了定义语言编码，可能会出现页面乱码现象。
JavaScript定义
Js必须要用<script language="javascript" type="text/javascript">来开头定义，以保证在不支持js的浏览器上直接显示出来。
CSS定义
CSS必须要用<style type=“text/css”>开头来定义，为保证各浏览器的兼容性，在写CSS时请都写上数量单位.
例如：错误：.space_10{ padding-left:10 } 正确：.space_10 { padding-left:10px }
正确的应用等号或者空格替换内部的虚线。
例如：
所有标签的元素和属性名字都必须使用小写
与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。
所有属性值必须用引号括起来，双引号或单引号
把所有特殊符号用编码表示
空格为、小于号（<）&lt、大于号（>）&gt、和号（&）&amp等。
所有属性必须有属性值
XHTML规定所有属性都必须有个值，没有值就是重复本身。
所有的标记都必须有相应的结束标记
双标记：<div></div> 单标记：<img />
所有的标记都必须合理嵌套
<p><b></p></b>必须修改为：<p><b></b></p>
图片添加有意义的alt属性
图片加载失败时可以用alt属性表明图片内容。同理添加文字链接的title属性，帮助显示不完整的内容显示完整
在form表单中增加label，以增加用户友好度

7、选择器优先级及权重？

(!important>）id选择器(100)>class选择器（属性选择器/伪类选择器）(10)>标签选择器（伪元素选择器）(1)。同类选择符条件下层级越多的优先级越高。优先级就近原则，同权重情况下样式定义最近者为准。载入样式以最后载入的定位为准。

8、样式冲突，以及抽离样式模块怎么写？

9、css3动画效果属性？

10、canvas、svg的区别？

Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

11、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(n)	选择属于其父元素的第n个子元素的每个p元素
p:nth-last-child(n)	选择属于其父元素的倒数第n个子元素的每个p元素
p:last-child	选择属于其父元素最后一个子元素的每个p元素
p:empty	选择没有子元素的每个p元素（包括文本节点）
p:target	选择当前活动的p元素
:not§	选择非p元素的每个元素
:enabled	控制表单控件的可用状态
:disabled	控制表单控件的禁用状态
:checked	单选框或复选框被选中

12、px和em和rem的区别？

px: 像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的(引自CSS2.0手册)
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
单位换算：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。为了简化font-size的换算，常需要在css中的body选择器中声明 Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
rem是CSS3新增的一个相对单位（root em，根em），区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。

13、CSS中link 和@import的区别是?

1、属性不同
link是html提供的标签，不仅可以加载css文件，还能定义 RSS、rel 连接属性等。而
@import是css中的语法规则
2、加载顺序不同
页面打开时，link引用的css文件被加载。而@import引用的CSS等页面加载完后最后加载。
3、兼容性
@import是css2.1后提出的，而link是不存在兼容问题。
4、DOM控制性
当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的（不支持）。
注意事项：
1、css中避免过多使用@import
如果了解了@import原理，你就会明白它的性能并不高，过多使用它会延长浏览器渲染页面的时间。
2、@import可以在css中引入其他样式表利于修改和扩展。但是会增加文件请求次数。