标题高度塌陷解决方法
根据w3c的标准 在页面中元素都有一个隐含的属性叫Block Formatting Context
简称BFC,该属性可以设置打开和关闭，默认是关闭的
BFC的定义： 是设置元素的一种特性(功能)
1，使 BFC内部浮动元素不会到处乱跑；
2，和浮动元素产生边界。
当开启元素的BFC以后，元素将会有如下的属性
1.父元素的垂直外边距不会和子元素重叠，
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
如何开启元素的BFC?
1.设置元素浮动
使用这种可以开启BFC，虽然实现，但是父元素宽度消失，而且下面的元素会上移
2.设置元素绝对定位
3.设置元素display为incline-block 宽度也会消失不推荐
4.将元素的overflow设置为一个非visible的值
推荐方式：将overflow设置为hiddden，是副作用最小的开启方式。
在 ie6中没有bfc的概念，类似的是haslayout来解决该问题，开启方式是将元素的zoom设为1，为了兼容所有浏览器，应将overflow和zoom的属性都写上。
清除浮动
我们有时希望清除掉其他元素浮动的影响，
clear可以用来清除兄弟其他元素浮动的影响，
left（right both none）：清除左侧浮动元素对当前元素的影响
both:清除影响最大的侧浮动影响
通过添加一个浮动元素的空白div来设置它的清除浮动来解决塌陷问题。缺点是在页面里添加了多余结构
通过after伪类选中box1的div最后边,原理同上面的添加空白div一样，最推荐使用来解决高度塌陷问题，几乎没有副作用。ie6不支持！！！
解决高度塌陷的几种方法总结：
1开启元素的BFC,开启BFC的几种方法 2将父元素的高度写死 3使用clear 4添加空白兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>布局练习</title>
<style type="text/css">
.box1 {
border: 10px red solid;
overflow: hidden;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/* 在文档流中父元素的高度默认被父元素撑开的，子元素多高，父元素多高
当为子元素设置浮动，子元素会完全脱离文档流，这使得子元素无法撑起父元素，导致父元素塌陷
父元素塌陷后，会导致页面混乱
所以我们可以将父元素的高度写死，以避免塌陷的问题，但是一旦高度写死，
父元素的高度将不能自动适应，但不推荐使用。
*/
.box3 {
width: 100px;
height: 100px;
background-color: green;
}
/* .clear{
clear: both;
} */
.clearfix：after{
content："hi";
display:block;
clear:both;
}
*/
</style>
</head>
<body>
<div class="box1 claerfix">
<div class="box2">2</div>
<div class="clear"></div>
</div>
<div class="box3">3</div>
</body>
</html>
定位
指的是将指定元素摆放到页面的任意位置
可以通过定位任意的摆放元素
通过position属性设置为元素的定位
可选值：
static 默认值，元素没有开启定位
relative：开启元素的相对定位
absolute:开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）
当开启了元素的相对定位，不设置偏移量时，元素不发生任何变化，当position不是static是
即开启了元素的定位，开启元素的定位后可以通过left right top bottom四个属性来设置元素的位置（一般只需要两个属性，类似坐标）
left：元素相对于其定位位置的左侧偏移量
相对定位是相对于原来的位置（自身位置）进行移动，且不会脱离文档流。原来位置还在（不像浮动，下面的元素会提上来），相对定位移动后的元素
会提升一个层级,相对定位不会改变元素，块元素依然是块元素，内联元素依然是内联元素，高宽不发生变化。
绝对定位 会使元素脱离文档流，像浮动一样，如果不设置偏移量，位置不发生变化，设置偏移量后,绝对定位，是相对于
离他最近的开启了定位（只要position不是static）的祖先元素定位，如果都没开启，就相对于浏览器左上角定位。
一般开启子元素的绝对定位都会开启父元素的相对定位。
绝对定位会使元素提升一个层级
开启绝对定位，会改变元素性质，块元素的宽度和高度默认被内容撑开
当元素属性position设置为fixed，则开启元素的固定定位
固定定位也是一种绝对定位，大部分特点和绝对定位一样 ie6不支持
不同的是：
固定定位永远相对于浏览器窗口定位
层级
如果定位元素的层级一样的，则在代码结构 下面的会覆盖代码中结构上面的
通过z-index属性指定一个正整数可以来设置元素的层级，层级越高，越优先显示
父元素的层级再高，也不会盖住子元素。
设置元素背景的透明度opacity
opacity：0-1；
background-image设置背景图片:url（图片地址相对路径）相对路径写在哪，就相对于哪
如果背景图片大于元素，默认会显示左上角。要将两者设置一样大
可以同时设置背景颜色和背景图片，背景图片可以通过background-position来调整背景图片的位置
背景的属性：通过该属性可以同时设置background的所有相关属性background：等等
csshack 实际上指的是一种特殊的代码， 只需要在特殊的浏览器中执行，而在其他的浏览器
中不需要执行，这是就可以使用css hack来解决问题，来为一些浏览器设置特殊的代码
条件hack 只对IE浏览器有效其他浏览器认为它为注释，尽量不要使用！！！
[if IE 6]等功能ie10以上不支持
属性hack
选择器hack 和以上的csshack类似
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>布局练习</title>
<style type="text/css">
.p1 {
height: 100px;
width: 100px;
background-color: blanchedalmond;
}
.p2 {
height: 200px;
width: 200px;
background-color: red;
}
.p3 {
height: 100px;
width: 100px;
background-color: green;
}
/* .p2 {
position: relative;
left: 100px;
bottom: 100px;
} */
.p2 {
position: absolute;
left: 100px;
bottom: 100px;
}
.p {
height: 100px;
width: 100px;
background-color: green;
/* position: absolute; 有这个和没这个不一样，元素的性质会发生变化 */
}
</style>
</head>
<body>
<div class="p1"></div>
<div class="p2">
<div class="p3"></div>
</div>
<div class="p3"></div>
<span class="p">我是p标签</span>
</body>
</html>
雪碧图优缺点
CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分
1.优点
1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
2.缺点
1、在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
2、至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。
3、由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。
4、前面我们也提到了，必须限制盒子的大小才能使用CSS Sprites，否则可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。
提高访问网页速度
1，将css中所有注释删除，空格，缩进，换行删除，可以提高网页的加载速度，手动压缩不显示，
借助工具压缩，比如jscsszip软件。网页中的图片加载速度，一些宽高固定的背景图片，可以采用雪碧图的
方法增加网页加载速度。
更多前端资料获取
请关注微信公众号：前端从入门到SP
来源：CSDN
作者：gisercug
链接：https://blog.csdn.net/gisercug/article/details/94458986