四，HTML和CSS中常见的面试题（重点）
一，长度单位
1.px 像素，一个像素就相当于屏幕中一个小点，屏幕是由这些像素点构成的。对于不同的显示器来说一个像素的大小也不相同，显示效果越好越清晰，像素就越小，反之像素越大（手机屏幕像素最小，默认把像素乘以4）。
2.百分比：浏览器会根据其父元素的样式计算该值，使用百分比，当父元素的属性值发生变化时，子元素也会按照比例发生变化，在创建自适应页面时，经常使用百分比。
3.em：相对于当前元素的字体大小来计算的，1em = 1 font-size;跟随字体大小改变，使用em 时当字体大小改变时，em也会随之改变，
4.rem 相对根元素进行计算，只要在html中指定了font-size大小，后面的元素都将使用这个大小作为基准进行计算，IE8不支持。
二，颜色单位
1.在CSS中可以使用颜色的单词来表示不同的颜色
2.通过RGB指来表示不同的颜色，通过三种颜色不同的浓度，来表示不同的颜色，
可以使用0-255之间的值表示，255表示浓度最大，也可使用百分比
3.也可使用十六进制的RGB值来表示，使用三组十六进制
三，字体
1.字体样式
color:red；前景色
font-size：20px；字体大小，浏览器中一般默认的文字大小是16px ,font-size设置的并不是文字本身的大小。在页面中，每个文字都是在一个看不见的框中（小时候的拼音本子，或者是音谱格），一般情况下文字都要小于格子的大小，也有时会大（根据字体的不同，显示效果不同）
font-family:指定文字的字体，微软雅黑，arial，当采用某种字体时如果浏览器支持则使用该字体，如果浏览器不支持则使用默认字体，可以设置多种字体供选择，先尝试用给出的字体（按顺序）。浏览器默认使用的字体就是计算机中使用的字体，在开发中尽量不要使用奇怪的字体
用户电脑中可能没有这样的特殊字体。
2.字体分类
在网页中将字体分为5大类，将字体设置为大的分类，浏览器会自动选择指定字体应用
对于单行文本，可以使行高设置和父元素的高度一致可以使单行文本垂直居中。
3、文本样式
对齐文本：
四、display 和visibility属性 、 overflow属性
1）display 可以修改元素的属性，块元素--->内联元素，内联元素--->块元素，行内块元素
可选值：
inline 可以将元素作为内联元素显示
block 可以将元素作为块元素显示
inline-block: 可以将元素作为行内块元素显示，既可以设置宽高，又不会独占一行Img
none:不显示元素，并且元素不会 在页面中占据位置
2）visibility：可以用来设置元素的隐藏和显示
visible默认值元素会默认显示在网页中
hidden使用该方式隐藏元素不会在页面中显示，但是依然会占据位置
3）overflow：设置父元素如何处理溢出的内容
子元素的宽高超过父元素的宽高就会溢出，
可选值：
visible:默认值，不会对溢出的内容做任何处理,，溢出内容会咋父元素的外部显示
hidden:溢出内容会被修剪，不再显示
scroll：会为父元素添加滚动条，通过滚动条来查看完整内容
auto：会根据需求自动添加滚动条
五、文档流
文档就是指的网页，文档流处在网页的最底层，表示一个网页中的位置，我们所创建的元素默认都处在文档流。
元素在文档流中的特点
块元素：
1）块元素在文档流中会独占一行，默认自上向下排列
2）块元素在文档流中，默认宽度是父元素的100%，宽度值是auto （当元素的高度或宽度是auto时，指定内边距不会影响可见框的大小，而是会自动修改宽以适应内边距）；默认高度被子元素（内容）撑开
内联元素：
1）内联元素在文档流中只占自身的大小，会默认从左向右排列
2）在文档流中，内联元素的宽度和高度默认被内容撑开
脱离文档流的两种方式：浮动、定位
六、垂直外边距问题：
1.上下两个DIV盒子，垂直方向的外边距，外边距重叠。
兄弟元素之间的相邻外边距会取最大值，而不是取和。下面的例子在网页中上下两个盒子的外边距为100px，当把其中一个改成150px，则垂直外边距为150px。
解决兄弟垂直外边距相邻带来问题的方法：
1）由于它们是相邻的外边距，我们可以使它不相邻，在两个DIV之间放一个字符串，使其不垂直，放超链接不行
2.父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素，
给子元素设置上外边距，会传递给父元素，父子元素一起移动且两个还是紧紧相邻
解决父子垂直外边距相邻带来问题的方法
1）由于它们是相邻的外边距，我们可以使它不相邻，在两个DIV之间放一个字符串，使其不垂直，放超链接不行
2）为父元素设置上内边距：padding-top: 1px;使子元素的与父元素不相邻
对于上面六中解决方法有不好的影响，第一种方法在网页中添加了多余的元素；第二种方法会影响可见框的大小（但是可以减小盒子的height来弥补）。
七、高度塌陷问题：
在文档流中父元素的高度默认被子元素撑开（父元素没有设置高度），当给子元素设置浮动后，子元素脱离文档流，子元素无法撑起父元素的高度，父元素的高度就没有了，也就是父元素高度塌陷了。由于父元素高度塌陷了，则父元素下的所有元素都会向上移动，导致页面布局混乱。
解决高度塌陷：
1）可以将父元素的高度写死，以避免高度塌陷问题，但是一旦高度写死，父元素的高度不能自动适应子元素的高度，不推荐使用。
根据W3C的标准，在页面中都有一个隐含的属性BFC，默认是关闭的。当开启BFC以后：
1）父元素的垂直外边距不会和子元素重叠（解决父子元素垂直外边距问题），
2）开启BFC的元素不会被浮动元素所覆盖
3）开启BFC的父元素可以包含浮动的子元素（浮动子元素可以撑开父元素）
4）将元素的overflow设置为一个非visible的值，
如何开启BFC：
2）开启ＢＦＣ
1）设置父元素浮动，可以解决当前父子元素的塌陷问题，但是父子元素都浮动就会使父元素下面的元素向上移动，父元素的宽度没了
2）设置父元素的绝对定位（position: absolute;）也会导致上面的问题，下面的元素向上移动，父元素的宽度没了
3）设置父元素为inline-block（;display: inline-block;）可以解决问题，但是父元素与下面的元素之间会有一个空隙，父元素的宽度没了
以上三种方式开启BFC都会导致宽度没了，都是子元素的宽度。
4）设置父元素的overfloe属性：overflow: scroll;会出现滚动条，overflow: hidden/auto可以解决，推荐使用，是开启BFC代价最小的方式
但是IE6及以下浏览器并不支持BFC，但是具有另一个隐含的属性叫做has Layout，该属性的作用和BFC作用类似，所以在IE6浏览器中，通过开启hasLayout来解决问题。直接将父元素的zoom 设置为1即可。zoom放大，放大几倍。zoom只在IE中支持。
清除浮动。
3）.清除浮动
clear可以用来清除其他浮动元素对当前元素的影响，可选值：
none：默认值，，不清楚浮动
left：清除左侧浮动元素对当前元素的影响
right:
both:清除两侧浮动元素对当前元素的影响，清除对它影响最大的元素的浮动。
在高度塌陷的父元素最后添加一个空白的块元素，这个块元素没有浮动可以撑开父元素，但是它受浮动元素影响，需要对它清除浮动，不存在兼容性问题。
使用这种方式可以解决问题，但是会在页面中添加多余的结构，
4）不添加多余的结构解决塌陷问题
通过HTML添加的块元素会添加多余的结构，我们也可以通过ＣＳＳ来向父元素最后添加一个块元素，通过after伪类向父元素最后添加一个空白的块元素，然后对其清楚浮动，这个和添加一个空白的块元素div原理是一样的，可以达到相同的效果，切不会在页面添加多余的ＤＩＶ
此时这样写的话只能给box1使用，我们可以设置成一个类名让其通用。在IE6中不支持after伪类，还需要zoom:1来兼容。
3钟方案，6种解决方法：
第5种：在父元素后加空ＤＩＶ然后对其清除浮动
第６种：：after伪类
需要注意的是在使用overflow::hidden .zoom:1时存在一点问题，在父元素中还存在相对定位的元素，而又对父元素使用hidden,那么当相对定位元素移动到父元素以外就看不见了。