面试汇总html&&css

关于BFC？参考

盒模型？

W3C标准盒子模型和IE盒子模型,这两者的关键差别就在于：标准 w3c 盒子模型的范围包括 margin、border、padding、content，其中内容content的宽度不包括padding、margin、border等部分，也就是说这个盒模型实际占用页面的宽高是内容宽高加上其他部分的宽高，即：总宽度 = margin-left border-left padding-left width padding-right border-right margin-right。

而在IE盒子模型中，内容content的宽度包含了 border 和 pading，这个盒模型实际占用页面的宽高是内容宽高加上外边距的宽高，即总宽度 = margin-left width margin-right。使用CSS3 的属性 box-sizing来设置两种模型
box-sizing:content-box; //标准模型 box-sizing:border-box; /IE模型
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

清楚浮动的方法，并说明优缺点？

在浮动元素后添加样式含有clear：both的元素
利用这种方式清除浮动的优点在于通俗易懂，容易掌握，缺点也很明显，增加了很多无意义的标签，这个在后期维护中是很痛苦的。
为父元素添加样式overflow:hidden
利用这种方式不存在结构和语义化问题而且代码量极少，然而在内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

利用：after伪元素

doctype的作用？

声明必须是 HTML 文档的第一行，位于标签之前。
声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。

如何理解 HTML 语义化？

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

css3新增伪元素和伪类？

伪元素
first-line:为某个元素的第一行文字使用样式；
first-letter:为某个元素中的文字的首字母或第一个字使用样式；
before:在某个元素之前插入一些内容；
after: 在某个元素之后插入一些内容；
伪类
p:last-of-type 选择其父元素的最后的一个P元素
p:last-child 选择其父元素的最后子元素(一定是P才行)
p:first-of-type 选择其父元素的首个P元素
p:first-child 选择其父元素的首个p元素(一定是p才行)
p:only-child　　　　选择其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素)
p:only-of-type　　　选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有)

sass和less的优缺点？.scss文件是什么？

支持嵌套
支持变量定义
支持“模板函数”（自己定义的名称。。。），比如有些CSS需要做兼容前缀的话，你可以这样使用一个模板函数定义一下，调用的时候传入正常值就可以了。会自动生成前缀的CSS
缺点我觉得是浏览器不能识别需要编译成.css文件

css的currentcolor应用？

currentColor表示“当前的标签所继承的文字颜色”，换种方式表示就是：currentColor = color的值。

display:none之后能获取或者设置值吗？

可以

html和XHTML有什么区别

XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。所有的 XHTML 元素必须被嵌套于根元素中

position 有几种，详细说明

positon.jpg

简述物理像素和设备像素

https://segmentfault.com/a/1190000008281250

如何让一个div在未知容器高度的情况下垂直居中

方法一
.parent {
width:800px;
height:500px;
border:2px solid #000;
position:relative;
}
.child {
width:200px;
height:200px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-color: red;
}
方法二
.parent {
width:800px;
height:500px;
border:2px solid #000;
display:table-cell;
vertical-align:middle;
text-align: center;
}
.child {
width:200px;
height:200px;
display:inline-block;
background-color: red;
}
方法三
.parent {
width:800px;
height:500px;
border:2px solid #000;
display:flex;
justify-content:center;
align-items:center;
}
.child {
width:200px;
height:200px;
background-color: red;
}
方法四
.parent {
width:800px;
height:500px;
border:2px solid #000;
position:relative;
}
.child {
width:300px;
height:200px;
margin:auto;
position:absolute;/设定水平和垂直偏移父元素的50%，
再根据实际长度将子元素上左挪回一半大小/
left:50%;
top:50%;
margin-left: -150px;
margin-top:-100px;
background-color: red;
}

说说rem与em的区别，rem的缺点

rem的特点
1、rem的大小是根据html根目录下的字体大小进行计算的。
2、当我们改变根目录下的字体大小的时候，下面字体都改变。
3、rem不仅可以设置字体的大小，也可以设置元素宽、高等属性。
em的特点
1、字体大小是根据父元素字体大小设置的。
例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。
例如，如果一个 div 有 18px 字体大小，10em 将等同于 180px，即 10 × 18 = 180

iframe实现原理

参考-传送门！

经常遇到的浏览器的兼容性有哪些？解决方法是什么？常用hack的技巧？