HTML和CSS常见面试题

1.请描述一下cookies、sessionStorage和localStorage区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie数据大小不能超过4K。
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有效时间：
localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage：数据在当前浏览器窗口关闭后自动删除
cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

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

CSS 选择符：

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, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;

优先级：
!important > id > class > tag
important 比 内联优先级高,但内联比 id 要高

CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个 p 元素
p:last-of-type 选择属于其父元素的最后 p 元素
p:only-of-type 选择属于其父元素唯一的 p 元素
p:only-child 选择属于其父元素的唯一子元素的 p 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p 元素。
:enabled :disabled 控制表单控件的禁用状态。

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

3.行内元素有哪些？块级元素有哪些？css的盒模型？

块级元素：div ,p,h1,form,ul,li
行内元素：span,a,label,input,img,strong,em,button;
css盒模型：内容，padding,border,margin;

4.CSS3新特性有哪些？

1、颜色：新增RGBA、HSLA模式
2、文字阴影(text-shadow)
3、边框：圆角（border-radius）边框阴影：box-shadow
4、盒子模型：box-sizing
5、背景：background-size设置背景图片的尺寸，background-origin设置背景图片的原点，background-clip设置背景图片的裁剪区域，以“，”分隔可以设置多背景，用于自适应布局
6、渐变：linear-gradient、radial-gradient
7、过渡：transition可实现动画
8、自定义动画
9、在CSS3中唯一引入的伪元素是::selection
10、多媒体查询、多栏布局
11、border-image
12、2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
13、3D转换

5.为什么要使用css sprites

css 精灵图，把一堆小的图片整合到一张大的图片（png）上，减轻服务器对图片的请求数量。
css精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
css sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用css的"background-image","background-position"的组合进行背景定位，这样可以减少。
很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是如果请求太多会给服务器增加很大的压力。

6.a标签在新窗口打开链接怎么加属性？

<a target="_blank">链接</a>

7.合理的页面布局中常听过结构与表现分离，那么结构是什么？表现是什么？

结构是html,表现是css

8.简述对Web语义化的理解？

就是让浏览器更好的读懂你写的代码，在进行HTML结构、表现、行为设计时，尽量使用语义化的标签，使程序代码简洁明了，易于进行web操作和网站SEO，方便团队的一种标准，以图实现一种“无障碍”的web开发。

9.前端页面有哪三层构成，分别是什么？作用是什么？

结构层、表示层、行为层
结构层（structural layer）：由HTML或XHTML之类的标记语言负责创建。
表示层（presentation layer）:由css负责创建。
行为层（behaviorlayer）:负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

10.display:none;与visibility:hidden的区别是什么？

display:none;使用该属性后，HTML元素（对象）的宽高，高度等各种属性值都将“丢失”；
visibility:hidden;使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍然具有高度，宽度等属性值。

11.用纯css创建一个三角形的原理是什么？

首先，需要把元素的宽高设置为0，然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #00ff00;

12.常见的兼容性问题？为什么要初始化CSS样式？

不同浏览器的标签默认的margin和padding不一样。
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差

*{
	margin:0;
	padding:0;
} 

13.position的值？

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

14.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

div {
	background-color: skyblue;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

浮动元素的左右居中：

div {
	background-color: skyblue;
	float: left;
	position: relative;
	width: 200px;
	height: 100px;
	left: 50%;
	transform: translate(-50%);
}

浮动元素的上下左右居中：

div {
	background-color: skyblue;
	float: left;
	position: absolute;
	width: 200px;
	height: 100px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

固定定位只需要注意子绝父相，子元素设置absolute，父元素要设置relative

15.display有哪些值？说明他们的作用?

inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block–行内块

16.设置元素浮动后，该元素的display值是多少？

自动变成display:block

17.在网页中的应该使用奇数还是偶数的字体？为什么呢？

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。