css效果小计

在工作学习中总能发现一些新鲜的页面效果可以用不同的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布局规则：

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算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>

posted @ 2018-04-12 16:22 link_xjxj 阅读(173) 评论(0) 编辑收藏举报

刷新页面返回顶部

link_xjxj

css效果小计

哪些元素会生成BFC?

公告

　　哪些元素会生成BFC?