HTML、CSS面试
jimczj opened this issue · comments
1.清楚浮动
1.采用一个HTML标签，以及css的clear属性，来手工清理浮动；
2.采用伪类:after，动态建立一个块元素，设定 clear属性，清理之前的浮动元素；
3.采用CSS overflow 非 visible 值(overflow:auto/overflow:hidden)设定使父容器包含浮动元素；
4.采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素；
5.使用 TABLE 以及 TD 标签作为浮动元素容器；
6.采用 float:left/float:right 方式将父元素同样浮动，就可以包含浮动内容；
7.在 IE 6/7 的标准文档模式中设置 “width/height/zoom” 等样式来自动清理浮动。
2.px,em,rem
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册),1em=16px
EM特点
- em的值并不是固定的；
- em会继承父级元素的字体大小。
为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%
写CSS的时候，需要注意两点：
-
body选择器中声明Font-size=62.5%；
-
将你的原来的px数值除以10，然后换上em作为单位；
-
重新计算那些被放大的字体的em数值。避免字体大小的重复声明
rem:
通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应
3.BFC原理
Block Formatting Context，中文直译为块级格式上下文。BFC就是一种布局方式，在这种布局方式下，盒子们自所在的containing block顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己建立了新的BFC）。两个相邻的BFC之间的距离由margin决定。在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷”。
文档这里也间接指出了垂直相邻盒子margin合并的解决办法：就是给这两个盒子也创建BFC。
创建BFC：
float属性不为none
overflow不为visible(可以是hidden、scroll、auto)
position为absolute或fixed
display为inline-block、table-cell、table-caption
BFC的作用
- 清除内部浮动
我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。 - 垂直margin合并
在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠的结果：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
这个同样可以利用BFC解决。关于原理在前文已经讲过了。
3. 创建自适应两栏布局