HTML+CSS面试题

什么是语义化的HTML？
使用正确的标签做正确的事情。语义化的html能够是页面结构更加简单易懂。有利于搜索引擎解析，便于阅读维护和理解。

Doctype的作用？浏览器标准模式和怪异模式之间的区别是什么？
Doctype是位于文档最顶部的文档声明，用于告知浏览器用标准模式还是怪异模式解析页面。Doctype不存在或者格式错误都会导致浏览器以怪异模式展示页面。
标准模式下页面排版和JS运作模式都是以浏览器支持的最高标准，而怪异模式会向后兼容，模仿老浏览器模式行为，防止页面无法正常工作。

行内元素有哪些？块级元素有哪些？CSS的盒模型？
行内元素：span/a/i/em/strong/b/img/input…
块级元素：div/p/ul/ol/li/table/h1-h6…
CSS的盒模型分为两种：标准盒模型（W3C盒模型）和怪异盒模型（IE浏览器盒模型）
标准盒模型：宽度/高度=内容+padding+border+margin（如果给盒子设置了宽度/高度，最终的宽度/高度会等于设置的宽度+新增加的margin/padding/border）
怪异盒模型：宽度/高度=所设置的宽度高度（新增加的margin/padding/border不会改变原盒子的大小，而是直接在原有基础上进行设置，但是content的区域将会相对应的减小）

CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
选择器：
通配符 *
标签选择器 div
ID选择器 #
类选择器 .
伪类选择器 :
子级选择器 div>span
包含选择器 div span
相邻兄弟选择器 div+span
多个选择器 div,a,span,ul
属性选择器 li[class] 选择所有有class属性的li标签
可继承属性：font-size/font-family/color
CSS优先级三条准则：
（1）就近原则，后加样式优于前面的样式
（2）内联>内嵌>外联
（3）！important大于一切样式
权重：
标签选择器和伪元素选择器：1
类/伪类/属性选择器：10
ID选择器：100
内联样式：1000
继承样式无权重

清除浮动的几种方式，各自在的优缺点是什么？
（1）在做了浮动的元素的最后面添加一个兄弟级新元素，并为这个新添加的元素设置clear：both属性
优点：通俗易懂，容易掌握
缺点：可能会添加很多这样的无意义空标签，不方便后期维护
（2）给父级元素添加overflow：hidden
优点：代码量少，简单方便
缺点：不能配合定位使用
（3）::after伪元素，在css中写以下样式，再给浮动元素的父元素clearfix这个类名，css代码如下：
.clearfix::after{content:’’;display:block;clear:both;}
优点：结构和语义化完全正确
缺点：服用方式不当会造成代码量增加
(4) 江湖救急法不到万不得已不用：给浮动元素的父元素设置和最高子元素一样的高度

解释CSS sprites，如何使用？说说它的优缺点
精灵图，将多个小图片拼接到一个图片中，通过background-image设置成背景图片，再使用background-position和元素尺寸刁姐需要显示的图案位置
优点：
（1）减少http请求次数，极大的提高页面加载速度
（2）增加图片信息重复度，提高压缩比，减少图片大小
（3）更换风格方便，只需要在一张或几张图片上修改颜色即可实现
缺点：
（1）图片合并麻烦
（2）不方便维护

position有哪些值，分别代表什么意思？如何使用
主要有三个：
（1）relative 相对定位，相对于元素本来的位置定位，不会脱离文本流
（2）absolute 绝对定位，相对于最近的添加定位的父级元素进行定位，脱离文本流
（3）fixed 固定定位：相对于浏览器窗口进行定位，脱离文本流
默认值为static，不进行定位，在文本流中
inherit：继承父元素的position的值

display：none和visibility：hidden的区别？
都有隐藏元素的效果，但是display：none隐藏元素可以脱离文档流，而visibilty：hidden不会脱离，会依然占有原来的位置。

margin和padding分别适用于什么场景？
margin适用于元素与元素之间产生间距（兄弟与兄弟之间）
padding适用于元素与内容之间产生间距 （包含关系）

说一下method有几种方式，分别有什么特点？
get和post两种。
get方式请求快速、简单、但是危险系数相对于post较高。