HTML和CSS重难点知识点总结

本文主要和大家分享HTML和CSS重难点知识点总结，希望能帮助到大家。

(.clear{clear:both})
原理：添加一对空的 p 标签，利用 css 的 clear:both 属性清除浮动，让父级 p 能够获取高度。
优点：浏览器支持好
缺点：多出了很多空的 p 标签，如果页面中浮动模块多的话，就会出现很多的空置 p 了，这样感觉视乎不是太令人满意。（不推荐使用）
方法三：让父级 p 也一并浮起来
这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。不推荐使用
方法四：父级 p 定义 display:table
原理：将 p 属性强制变成表格
优点：不解
缺点：会产生新的未知问题。（不推荐使用）
方法五：父元素设置 overflow：hidden、auto；
原理：这个方法的关键在于触发了 BFC。在 IE6 中还需要触发 hasLayout（zoom：1）
优点：代码简介，不存在结构和语义化问题
缺点：无法显示需要溢出的元素（亦不太推荐使用）
方法六：父级 p 定义伪类: after 和 zoom

.clearfix:after{ 
content:’.’; 
display:block; 
height:0; 
clear:both; 
visibility: hidden; 
}

.clearfix {zoom:1;}
原理：IE8 以上和非 IE 浏览器才支持: after，原理和方法 2 有点类似，zoom(IE 转有属性) 可解决 ie6,ie7 浮动问题
优点：结构和语义化完全正确, 代码量也适中，可重复利用率（建议定义公共类）
缺点：代码不是非常简洁（极力推荐使用）
经益求精写法

.clearfix:after { 
content:”\200B”; 
display:block; 
height:0; 
clear:both; 
} 
.clearfix {*zoom:1;} 照顾 IE6，IE7 就可以了

简单说就是将元素的 margin，border，padding，height 和 width 等影响元素盒模型的属性设置成 0，如果元素内有子元素或内容，还应该设置其 overflow:hidden 来隐藏其子元素，这算是一种奇技淫巧。
如果元素设置了 border，padding 等属性不为 0，很显然，页面上还是能看到这个元素的，触发元素的点击事件完全没有问题。如果全部属性都设置为 0，很显然，这个元素相当于消失了，即无法触发点击事件。
这种方式既不实用，也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的，比如 jquery 的 slideUp 动画，它就是设置元素的 overflow:hidden 后，接着通过定时器，不断地设置元素的 height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom 为 0，从而达到 slideUp 的效果。

其他脑洞方法

设置元素的 position 与 left，top，bottom，right 等，将元素移出至屏幕外
设置元素的 position 与 z-index，将 z-index 设置成尽量小的负数

简述一下 src 与 href 的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。

行内元素有哪些？块级元素有哪些？空 (void) 元素有那些？
这个问题面试偶尔被问到的时候有点懵逼~~~ 平时没在意。。。。
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：p、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的 HTML 元素，例如：br、meta、hr、link、input、img