前端面试题之HTML加CSS

1. 一个200*200的div在不同分辨率屏幕上下左右居中，用css实现

方法一
利用负值来实现居中。可以脑补画面离左右都是50%，刚好可以居中，但是DIV位置在哪里，距左右外边框各负50%宽度。

div{
    
    
	position:absolute;
	width:200px;
	height:200px;
	top:50%;
	left:50%;
	margin-left:-100px;
	height:-100px;
}

div{
    
    
 	position:absolute; 
    width:200px; 
    height:200px; 
    top:50%; 
    left:50%;
    transform: translatey(-50%) translateX(-50%) 
}

2. 写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式：

HTML部分

	 <body>  

        <h3>实现三列宽度自适应布局</h3>  

        <div id = "left">我是左边</div>  

        <div id = "right">我是右边</div>  

        <div id = "center">我是中间</div>  

	</body>

CSS部分

html,body{
    
     
	margin: 0px;
	width: 100%; 
}  

h3{
    
    
	height: 100px;
	margin:20px 0 0;
}  

#left,#right{
    
    
	width: 200px;
	height: 200px; 
	background-color: #ffe6b8;
	position: absolute;
	top:120px;
}  

#left{
    
    
	left:0px;
}  

#right{
    
    
	right: 0px;
}  

#center{
    
    
	margin:2px 210px ;
	background-color: #eee;
	height: 200px; 
}

3.阐述清除浮动的几种方式（常见问题）

1.父级div定义height

原理：父级div手动定义height，就能解决父级div无法自动获取到高度问题。

优点：简单，代码少，容易理解。

缺点：只适合高度固定的布局，要给出精确高度，如果高度和父级div不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局使用

2.父级div定义overflow:hidden

原理：必须定义width或zoom:1,同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。

优点：简单，代码少，浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸会被隐藏

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用

3.父级div定义overflow:auto

原理：必须定义width或zoom:1,同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度。

优点：简单，代码少，浏览器支持好

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

4.父级div定义伪类：after和zoom

原理：IE8以上和非IE浏览器才支持:after，zoom(IE专有属性)可解决IE6，IE7浮动问题

优点：浏览器支持性好，不容易出现怪问题（目前：大型网站都有使用）

缺点：代码多，不少初学者不理解原理

5.在结尾处加空div标签clear:both

原理：添加一个空div，利用css提高clear:both清除浮动，让父级div自动获取高度。

优点：简单，代码少浏览器支持好，不容易出现问题

缺点：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

4.解释css sprites ，如何使用？

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

CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片

5.box-sizing常用的属性有哪些？分别有什么作用？

属性值

box-sizing：content-box

box-sizing：border-box

box-sizing：inherit

content-box
这是box-sizing的默认属性值

是CSS2.1中规定的宽度高度的显示行为

在CSS中定义的宽度和高度就对应到元素的内容框

在CSS中定义的宽度和高度之外绘制元素的内边距和边框

border-box

在CSS中微元素设定的宽度和高度就决定了元素的边框盒

即为元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制

CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度

(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

6.css选择器有哪些，选择器的权重的优先级

选择器类型

ID #id
class .class
标签 p
通用 *
属性 [type=“text”]
伪类 :hover
伪元素 ::first-line

权重计算规则

第一等：代表内联样式，如：style=""，权重1000.
第二等：代表ID选择器，如#id，权重0100，
第三等：代表类，伪类和属性，如.class,权重0010.
第四等：代表便签选择器和为元素选择器，如div，p权重0001.
通配符，如* 权重0000

7.px和em的区别

px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；

em表示相对于父元素的字体大小。em是相对单位，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。

8.请简要描述margin重合问题，及解决方式

两个相邻的盒子垂直方向上的margin会发生重叠，取较大的那个值，而不是相加。

解决：
　　父级设置padding代替margin
　　父级设置overflow:hidden
　　当前元素设置透明的边框
　　使用绝对定位
　　使用浮动或设置成行内块
　　给一个1像素的内边距
　　说了这么多，不这样干不行么，直接加一下写一个margin值多好

9.h5/c3新特性

h5和c3新特性

10.display none visibility hidden区别？

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。