选择器类型：
id选择器 （ https://segmentfault.com/a/1190000015860892# myid）
类选择器 （.myclassname）
标签选择器 （div, h1, p）
相邻选择器 （h1 + p）
子选择器 （ul > li）
后代选择器 （li a）
通配符选择器 （ * ）
属性选择器 （a[rel = "external"]）
伪类选择器 （a:hover, li:nth-child）
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
3、写出一个两列等高，左列固定宽度为200px，右列自适应浏览器的布局 浮动
IE-Trident，Firefox-Gecko，Opera-Blink，Chrome-Webkit，Safari-Webkit，360-兼容模式Trident+极速模式Webkit
5、不定宽高的img在固定宽高的容器内水平垂直居中，写出html和css
.box{
width:200px;
height:200px;
border:1px solid https://segmentfault.com/a/1190000015860892#06C;
display:table-cell;
text-align:center;
vertical-align:middle;
*font-family:simsun;
*font-size:200px;
}
.box img{
vertical-align:middle;
} overflow：hidden
.parent{
overflow:hidden;
}clearfix
.clearfix:after{
content:"";
display:table;
clear:both;
}https://segmentfault.com/a/1190000015860892#lamp{
width: 400px;
height: 40px;
background: https://segmentfault.com/a/1190000015860892#ff0000;
}
https://segmentfault.com/a/1190000015860892#lamp:hover{
animation: rotate 2s;
-webkit-animation: rotate 2s; /* Safari and Chrome */
}
@keyframes rotate
{
from {transform: rotate(0deg);}
to {transform: rotate(180deg);}
}
@-webkit-keyframes rotate /* Safari and Chrome */
{
from {transform: rotate(0deg);}
to {transform: rotate(180deg);}
}content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。 10、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 行内元素：
a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
11、CSS实现垂直水平居中
实现方法有很多种，以下是其中一种实现：
//HTML结构：
//CSS：
.wrapper {
position: relative;
width: 500px;
height: 500px;
border: 1px solid red;
}
.content{
position: absolute;
width: 200px;
height: 200px;
/*top、bottom、left和right 均设置为0*/
top: 0;
bottom: 0;
left: 0;
right: 0;
/*margin设置为auto*/
margin:auto;
border: 1px solid green;
} 补充：link和@import的区别
两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
13、什么叫优雅降级和渐进增强？ 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
14、html中title属性和alt属性的区别？
当图片不输出信息的时候，会显示alt信息，鼠标放上去没有信息，当图片正常读取，不会出现alt信息
当图片不输出信息的时候，会显示alt信息 鼠标放上去会出现title信息
当图片正常输出的时候，不会出现alt信息，鼠标放上去会出现title信息 title属性可以用在除了
base，basefont，head，html，meta，param，script和title之外的所有标签
title属性的功能是提示。额外的说明信息和非本质的信息请使用title属性。title属性值可以比alt属性值设置的更长
title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。
15、标准盒子模型与IE怪异盒子模型
当不对doctype进行定义时，会触发怪异模式。
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）CSS3的
box-sizing当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算； 16、CSS3有哪些新增的属性？ 分为边框、背景，渐变，阴影、2D转换 3D转换、过渡、动画、弹性盒子等。 比如：边框(
border-radius、border-shadow、border-image)之类的 。
17、什么是CSS Hack?
一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：
// 1、条件Hack
// 2、属性Hack
.test{
color:https://segmentfault.com/a/1190000015860892#0909; /* For IE8+ */
*color:https://segmentfault.com/a/1190000015860892#f00; /* For IE7 and earlier */
_color:https://segmentfault.com/a/1190000015860892#ff0; /* For IE6 and earlier */
}
// 3、选择符Hack
* html .test{color:https://segmentfault.com/a/1190000015860892#090;} /* For IE6 and earlier */
* + html .test{color:https://segmentfault.com/a/1190000015860892#ff0;} /* For IE7 */在最外层的div中加入overflow:hidden;zoom:1
在最外层加入padding:1px;属性
在最外层加入：border:1px solid https://segmentfault.com/a/1190000015860892#cacbcc;
异向重叠问题：float:left（只能解决IE6浏览器中的异向重叠问题，可以解决IE8以上、chorme、firefox、opera下的同向重叠问题）
absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 left位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。
21、浏览器是如何渲染页面的？
渲染的流程如下：1.解析HTML文件，创建DOM树。自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式
4.布局和绘制，重绘（repaint）和重排（reflow）; 22、对标签有什么理解 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。
可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
还有一个用途是可以添加服务器发送到浏览器的http头部内容 23、h5新特性 新的语义标签和属性 表单新特性 视频和音频 Canvas绘图 SVG绘图 地理定位 拖放API 25、display none visibility hidden区别？
display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
使用visibility:hidden性能要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
原文地址:https://segmentfault.com/a/1190000015860892，作者:牧心
以上就是对html&css面试笔记的相关介绍，希望对您学习有所帮助，感谢您关注懒咪IT学习网!
本文地址：https://c.lanmit.com/Webqianduan/HTML5/85942.html