html css常见面试题

1、对标签语义化的理解？

a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

2、src与href的区别

src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。
src指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置.
href指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接.

3、行内元素有哪些？块级元素有哪些，举例说明。

行内：a span img input select
块级：div ul ol li dl dt dd h1
空元素：

---

行内元素特征：

(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间　
(3)不会自动进行换行

块状元素特征：

(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下

行内块状元素特征：

(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右

那head是什么元素？

head是非可视化节点，而块标签，行内标签只是对可视化节点的区分。

4、页面导入样式时，使用link和@import有什么区别？

1、link除了可以加载css之外，还可以加载别的文件(例如.icon图标);
2、link引入css的时候，页面载入时会同时加载，@import需要在页面完全加载以后加载，
而且@import被引用的css会等到引用它的css文件被加载完才会加载
3、link是xhtml标签，没有兼容问题；@import低版本的浏览器不支持
4、link支持使用js去改变样式，而@import低版本的浏览器不支持
5、link方式的样式的权重高于@import的权重
6、@import在html中使用的时候需要包含在

5、position的值有几种，分别是什么，是怎样进行定位的？

static、absolute、relative、fixed、inherit、
sticky:某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；
position:sticky这时的效果相当于fixed定位，固定到适当位置。

6、两栏布局的方法

7、三栏布局的方法

8、圣杯、双飞翼的区别

为了使中间部分的内容完全显示出来圣杯布局采用了左右相对定位，最外层设置内边距的方法
双飞翼布局采用了外层宽度100%，内层使用margin来调整位置

9、浮动会带来什么问题

1、多个浮动的元素无法撑开父元素的宽度，父元素的高度可能会编程0
2、若浮动元素后面跟非浮动元素，非浮动元素会紧随其后浮动起来。
3、若浮动元素前面还有同级元素没有浮动则会影响页面结构。

10、怎样清除浮动

1、在最后一个浮动标签后，新加一个标签，给其设置clear:both
（不推荐）如果清除了浮动，父元素会自动检测子盒子最高的高度，然后与其同高 缺点：添加了无意义标签，语义化差
2、父级添加overflow属性(overflow:hidden) ，通过触发BFC实现清除浮动
（不推荐）内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
3、使用after为元素清除浮动
（推荐）
4、使用before和after双为元素清除浮动

11、标准盒子模型和IE盒子模型的差别

标准盒子模型：boxing-size:content-box padding和border不算入宽高
IE盒模型：boxing-size:border-box padding和border算入宽高

12、css权重

!important 无穷
行内样式 1000
id 100
class/属性选择器/伪类：hover 10
标签选择器/伪元素:after 1
通配符 0

13、什么是BFC，怎样触发BFC？

标准流：
1、块级元素独立占据一行，自上而下排列
2、行内元素从左至右排列，直到填满一行才进行换行
非标准流：
浮动，绝对定位会使元素脱离文档流

BFC可以理解为一个区域，在这个区域内的元素无论如何排版布局，都不影响区域外的元素

触发BFC的条件：

浮动元素：float除none以外的值
绝对定位元素：position(absolute,fixed)
display为inline-block、table-cells、flex
overflow：除了visble以外的值(hidden,auto,scroll)