1 高度塌陷：
父元素设置了高度，子元素设置了float
解决方式：
- 1 外墙法：在塌陷的父元素后边添加一个空div，设置clear：both 可以解决塌陷问题，但是父元素的高度依然没有
- 2 内墙法：在浮动的元素后边添加一个空div,设置clear:both 可以解决塌陷，同时让父元素存在高度
- 3 给父元素添加overflow属性，hidden、scroll、auto，必须要保证内容不存在溢出
- 4 伪元素选择器
- 父元素：after {
- content： " ";
- display: block;
- clear:both;
- height:0;
- overflow:hidden;
- }
- 5 将伪元素选择器封装成一个类，每次遇到塌陷就引入对应的类就可以
- 6 给父元素添加高度
2 隐藏的区别
display : none 元素彻底隐藏，不占据空间
visibility:hidden 元素隐藏，占据空间
3 reset样式表
清空浏览器的默认设置 所有
- {
margin: 0;
padding: 0;
}
块级元素除了div以外都存在默认值，行内元素input、img、select、textarea存在，其他都不存在
html、body、h1、h2 h3 h4 h5 h6 p ul ol li dl dt dd table form input img select textarea {
margin: 0;
padding: 0;
}
超链接去掉下划线
a {
text-decoration: none;
}
列表标签都需要去掉列表符号
list {
list-style:none;
}
图片向下撑大3px，ie默认边框
img {
vertical-align: middle;
border: none;
}
解决高度塌陷
.clearfix:after {
content: "";
display: block;
clear: both;
heught: 0;
overflow: hidden;
visibility:hidden;
}
安全区
.safe {
width: ;
margin: 0;
}
4 继承性：子元素可以继承父元素的属性和属性值
- 可以继承的属性：
- font-size font-family font-weight font-style font-variant line-height color(超链接)
- text-align text-indent text-transform word-spacing letter-spacing list-style-type list-style-img list-style-position list-style
- 盒子模型的属性都不能继承：border padding margin width height
- 背景相关属性不能继承 background一系列
- 定位属性不能继承
