2018前端最新 CSS 面试题

CSS（Cascading Style Sheets）
一、css盒模型

css中的盒子模型包括IE怪异盒子模型和W3C标准盒子模型。
- border-sizing: border-box； // width = contentWidth+左右padding+左右border；height = contentHeight+上下padding+上下border；
- border-sizing: inherit； // 子元素用来继承父元素的属性（border-sizing）
- border-sizing: content-box； // 元素本身的宽高（content）
- W3C标准盒子模型：盒子总宽度/高度 = width/height + padding + border + margin；
- IE怪异盒子模型：盒子总宽度/高度 = width/height + margin；

二、前端一像素问题（画一条0.5px的线）

transform: scaleY（0.5）；使用伪元素设置1px的边框，然后对边框进行缩放(scaleY)
- 实现思路：
  1、设定目标元素的参考位置
  2、给目标元素添加一个伪元素before或者after，并设置绝对定位
  3、给伪元素添加1px的边框
  4、用box-sizing: border-box 属性把边框都包进宽和高里面
  5、宽和高设置为 200%
  6、整个盒子模型缩小为0.5
  7、调整盒子模型的位置，以左上角为基准 transform-origin: 0 0;

<head>
	.border3{
     	position: relative;         
 	}
 
	.border3:before{
		content: '';
        position: absolute;
        width: 200%;
        height: 200%;
        border: 1px solid red;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scale(0.5, 0.5);
        -ms-transform: scale(0.5, 0.5);
        -o-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
	}
</head>
<body>
	<div class="border3">
    	<div class="content">伪类设置的边框</div>
	</div>   
</body>

border-image 将图片设置为一个元素的边框。

三、transition和animation的区别

Animation/transition的区别：他们都是随时间改变元素的属性值，他们的主要区别是 transition 需要触发一个事件才能改变属性，然而animation不需要触发任何事件的情况下就会随时间改变属性值，并且transition为2帧，从from … to，而animation可以一帧一帧的。
- transition 规定动画的名字规定完成过渡效果需要多少秒或毫秒规定速度效果定义过渡效果何时开始
- animation 指定要绑定到选择器的关键帧的名称

四、不定宽高的DIV居中

1.使用 flex 在父盒子设置

	display: flex; 
	justify-content: center;
	align-items: center;

2.使用 css 的 transform 定位居中

	父盒子设置:position: relative;
	Div 设置: transform: translate(-50%，-50%);
			  position: absolute;
			  top: 50%;
			  left: 50%;

3.display：table-cell

	父盒子设置:display: table; 
	          text-align: center;
	Div设置:display:table-cell;
	        vertical-align:middle;

五、浮动(float)

特性：浮动元素影响的不仅是自己，他会影响周围元素对其进行环绕
为什么要清除浮动？（解决父元素高度坍陷问题）
- 一个块级元素如果没有设置 height,其 height 由子元素撑开，对子元素使用了浮动之后，子元素就会脱离文档流。也就是说，父级元素中没有内容可以撑开其高度，这样父级元素height就会被忽略。这就是所谓的高度坍塌
  - 如何清除浮动？：
    1.给父级元素定义高度
    2.让父级元素也浮动
    3.父级定义display:table
    4.父元素设置overflow:hidden
    5.clearfix:使用内容生成的方式清除浮动

	clearfix:after {  // :after选择器向选定的元素之后插入内容
    	content:""; // 生成内容为空
   		display: block; // 块级元素显示
   		clear:both; // 清除前面元素
	}
	不破坏文档流，没有副作用

七、定位(position)

属性值：absolute，fixed，relative，static（默认值），sticky
- absolute :生成绝对定位的元素，会根据上一级 position 的值 relative 进行定位，如果向上一直没有找到 position，则相对整个 body 进行定位。
- fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或者frame框架（setFram的子框架，一种html标签）进行定位。
- relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
- static 默认值。没有定位，元素出现在正常的流中
- sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

八、css选择器分类：

基本的：
1.id选择器（id=“name”）
2.类选择器（class=“head”）
3.标签选择器（body, div, ul, li）
4.通配符（全局）选择器（*）
复杂的：
1.组合选择器（.head .head_logo）
2.后代选择器（#head .nav ul li 从父集到子孙集）
3.群组选择器 (div, span, img {color:Red} 具有相同样式的标签分组显示)
4.继承选择器
5.伪类选择器（链接样式，a元素的伪类）
6.子选择器（div>p, 带大于号>）
7.CSS相邻相邻兄弟选择器（h1+p, 带加号+）

九、CSS优先级

不同级别：总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
1.属性后面加 !import 会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素内的样式
3.id选择器
4.类选择器
5.标签选择器
6.通配符选择器（*）
7.浏览器自定义或继承
同一级别：后写的会覆盖先写的
css选择器的解析原则：选择器定位DOM元素是从右往左的方向，这样会提高查找选择器所对应的元素的效率。

十、对于行内元素，font-size（字体的高度）指定他们的 content area（内容区域）的高度。

由于 inline box = 上下的helf-leading（边框的大小设置），如果leading为0，在这种情况下（），font-size（字体的高度）指定了 inline box（边框的大小）的高度
font-size 指的是字体的高度，但是不能指定每个字形给定字体高度下的实际高度，导致了span的高度大于line-height

十一、z-index属性

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
基本原理是：z-index的值可以控制定位元素在垂直于显示屏幕方向（z轴）上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。
z-index 只能在 position 属性值为 relative 或 absolute 或 fixed 的元素上有效。
position 的值的属性大于z-index
元素可拥有负的 z-index 属性值（该元素消失）

十二、块元素和行内元素

1.块级元素： div p forn ul li h1-h6
- 块元素会独占一行，默认情况下，其宽度自动填满父元素宽度
2.行内元素：span img input a i
- 行元素不会占据一行，会一直排在一行，直到一行排不下
- 行元素没有宽度和高度属性，块级元素即使设置了宽度，还是会独占一行

十三、如何画一个三角形？

画一个三角形：设置宽高，然后用border去画

	width: 0;
	height: 0;
	border-bottom: 100px solid cyan;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;

十四、CSS中伪类及伪元素用法详解

伪类
:link 用这个可以设置未被访问的链接的样式
:visited 用这个设置已经被访问的链接的样式
:hover 用于设置将鼠标悬浮在链接上的样式
:active 用于设置鼠标点击链接时到鼠标松开时的样式
:focus 用于设置用键盘将焦点放在链接上时的样式（如用tab键或者上下键来移动页面焦点时）
伪元素
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。

十五、雪碧图

简介：雪碧图也叫CSS精灵，是一种CSS图像合成技术；
优缺点：
- 优点：使用雪碧图可以减少网络请求的次数，加快允许的速度，维护方便；
- 缺点：请求文件过多、引发性能问题；
通俗来说：将小图标合并在一起之后的图片称作雪碧图。每个小图标的使用配合background-position（设置背景图像的起始位置）来获取，去定位图片在屏幕的哪个位置.

十六、使元素消失的方法（visibility:hidden、display:none、z-index:-1、opacity：0）

1.opacity：0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发
2.visibility:hidden,该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3.display:node, 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉
4.z-index:-1，延z轴把元素隐藏在 body 下面。

十七、为什么css放在顶部而js写在后面？

1.浏览器预先加载css后，可以不必等待HTML加载完毕就可以渲染页面了（防止出现一些没有样式的HTML，页面比较尴尬）
2.其实HTML渲染并不会等到完全加载完在渲染页面，而是一边解析DOM一边渲染。
3.js写在尾部，主要是因为js主要扮演事件处理的功能，一方面很多操作是在页面渲染后才执行的。另一方面可以节省加载时间，使页面能够更加的加载，提高用户的良好体验
但是随着JS技术的发展，JS也开始承担页面渲染的工作。比如我们的UI其实可以分被对待，把渲染页面的js放在前面，时间处理的js放在后面

2018前端最新 CSS 面试题

猜你喜欢