在工作学习中总能发现一些新鲜的页面效果可以用不同的css完成，在这里将遇到的一些css做下记录，以便日后翻阅，如果其中的写法不对，或者有更优写法欢迎留言，不胜感激
1.关于用一个div做出双边框(由于outline-offset在ie下不被支持，所以该方法不支持IE)
html/css 部分
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <style type="text/css"> 6 #outline { 7 width: 84px; 8 height: 84px; 9 border: 1px solid blue; 10 outline: 1px solid brown; 11 outline-offset: 5px;
12 } 13 </style> 14 </head> 15 <body> 16 <div id="outline">outlie实现多重边框</div> 17 </body> 18 19 </html>
效果图：
其中：outline: 宽 样式 颜色 ；有这三个属性 （想了解ouline具体属性建议查看：http://www.runoob.com/cssref/pr-outline.html）
使用outline制作外层边框之后记得使用margin将外层轮廓覆盖，因为轮廓是不占空间布局的，也就不会影响到元素的尺寸，
outline-offset: 2px ； 是相对于border的偏移量 值为正数则向外便宜如图，反之内偏移
2.清除浮动的方法集
1.第一种最为直接明了（但只能兼容IE8开始）在ie7以下需要利用 zoom 来达到清除浮动的目的，zoom该方法为IE的专有属性（可设置缩放），最重要的是可触发ie的haslayout属性，用于清除浮动造成的高度塌陷，margin重叠问题，（该属性在火狐下不被支持，webkit内核浏览器下也是可以适用的）
1 <!doctype html> 2 <!--[if IE 7]><html class="ie7"><![endif]--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style> 8 ul{ 9 list-style: none ; 10 } 11 .fbc li{ 12 float: left ; 13 } 14 /* 用于清除浮动带来的塌陷影响 在ie8开始兼容*/ 15 .clearboth:after{ 16 content: '' ; 17 display: block ; 18 visibility: hidden ; 19 clear: both ; 20 } 21 /*为兼容IE7以下 我们需利用一下zoom*/ 22 .ie7 .zoom{ 23 zoom:1; 24 } 25 </style> 26 </head> 27 28 <body> 29 <ul class="fbc clearboth zoom"> 30 <li>1</li> 31 <li>2</li> 32 <li>3</li> 33 <li>4</li> 34 <li>5</li> 35 <li>6</li> 36 <li>7</li> 37 <li>8</li> 38 </ul> 39 <span>应该换行</span> 40 </body> 41 </html>
2.第二种利用css的BFC规则来清除浮动（该方法兼容性最好，若要兼容ie7以下建议使用符合规则的css2属性即可）
BFC顾名思义（块级格式上下文），其规定内部核模型如何布局，且这个区域不会影响到外部
BFC布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
哪些元素会生成BFC?
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul{ list-style: none ; } .fbc{ /* display: table-cell ; */ overflow: hidden ; } .fbc li{ float: left ; } </style> </head> <body> <ul class="fbc "> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <span>应该换行</span> </body> </html>