1.居中五环
根据前面所学内容写一个始终居中的奥运五环
五环源代码
五环运行结果
2.两栏布局
两栏布局代码（其中right必须写到left前面）
3.两个经典BUG
1.（margin塌陷）父子嵌套的元素垂直方向的margin会取父子中较大的值移动
解决方法：触发BFC
2.(margin合并) 两个div竖直方向的margin会合并
margin合并问题
解决方法：可以触发BFC解决，但是一般不解决，因为会改html，html在开发中比较基层，所以不解决。
4.BFC
四个触发条件(将属性加入到父元素中即可)：
1.position:absolute
2.display:inline-bock
3.float:left/right
4.overflow:hidden(一般用于处理溢出部分隐藏，解决塌陷时将该熟悉加到父元素中)
5.浮动模型
float:参数为left、right (将每行元素改为float布局)
clear:both(清除周围浮动流)
1.加入float的元素为浮动元素
2.浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素看不到他们，产生了bfc的元素和文本类属性的元素（带inline的）以及文本都能看到浮动元素。
3.问题：一个块级父元素不能看到浮动元素，怎么获得父元素边框？
方法1：取一个不显示的标签，清除其周围浮动流，将边框撑开
clear:both(只对块级元素生效)
解决办法
伪元素：可以用css来操作，但是没有写到html里面（::before::after）
方法2：.父元素::after{content:"";clear:both;display:block;}
方法3：将父级元素设为可见浮动流的元素（例如设为bfc）
知识点：设置position：absolute以及float：left/right打内部把元素变为inline-block
应用：实现文字图片顶对齐
使用float:left之前
使用该属性后
6.写一个简单实例
目标实现
7.溢出容器，要打点展示
1.单行文本溢出处理：
解决方法：white-space:nowrap(成为一行);overflow:hidden(溢出部分隐藏);text-overflow:ellipsis(隐藏部分用点代替);
2.多行文本溢出处理：
解决方法：直接写...(百度就是这么实现的)
8.背景图片处理
属性：background-image:url();background-size: px px;background-repeat:no-repeat;background-position: px px(left top left bottom left center);
9.图片代替文字问题
当不加载css时希望出现文本”淘宝网“的超链接
解决办法1：
text-indent: px(容器缩进容器宽度)；white-space:nowrap(强制不换行);overflow:hidden(容器外隐藏);
解决办法2：
将容器高度设为0；将内边框上部设为图片高度；因为背景会在padding中扩展，而文字不会，所以文字会被挤出容器，将容器外设为隐藏即可。
10.标签嵌套标准
行级元素只能嵌套行级元素，
块级元素可以嵌套任何元素，
p标签不能嵌套块级元素，
a标签不能嵌套a标签
11.css要点补充说明：
1.
实现随着界面改变大小内层容器不变并始终居中（只对块元素适用）
2.带inline的元素有文本的特点，例如将空白或者换行展示为一个文本分隔符（例如img）
代码1
代码1展示结果
代码2
代码2展示结果
3.position:absulute以及float:left/right会将元素从内部改为display:inline-block
4.一旦一个行级块元素中有文字时，后面的文字会和该文字底对齐；不过可以通过vertical-align：来调整对其像素。
閱讀更多 前端嫣然呀呀呀 的文章
