js达成右下角可关闭最小化div,jQuery多级手风琴菜
分类:前端技术

详解CSS display:inline-block的应用

2015/11/03 · CSS · display

原文出处: 小灰狼的脑瓜   

本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解。

本文章给大家介绍一款不错的jQuery多级手风琴菜单实现代码,有需要了解的朋友可参考,手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验

本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:
效果图片:
图片 1 
完整源代码:

学习资料来源

基础知识

display:inline-block是什么呢?相信大家对这个属性并不陌生,根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身,简单的说:设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性,又保持了inline元素不换行的特性。

举例说明:以前我们做横向菜单列表的时候,我们可以通过li和float:left两者来实现,现在可以通过li和display:inline-block。

HTML代码:

XHTML

<ul> <li>首页</li> <li>关于</li> <li>热点</li> <li>联系我们</li> </ul>

1
2
3
4
5
6
<ul>
    <li>首页</li>
    <li>关于</li>
    <li>热点</li>
    <li>联系我们</li>
</ul>

CSS代码

CSS

ul, li { padding: 0; margin: 0; list-style-type: none; } li { display: inline-block; border: 1px solid #000; }

1
2
3
4
5
6
7
8
9
ul, li {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
li {
    display: inline-block;
    border: 1px solid #000;
}

效果图

图片 2

inline-block基本效果

可以看到li元素可以横向排列,并且可以设置width属性,大家可以复制代码自己查看效果或查看Demo

效果如下

复制代码 代码如下:

选项卡原理

规定: 选中代表激活,未选中代表失活

inline-block的问题

观察上面的例子,细心的同学肯定会发现,每个li之间有一个小空隙,而我们的代码中并没有设置margin等相关属性,这是为什么呢?

图片 3

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<title>js实现右下角可关闭最小化div--柯乐义</title>
<script src="" type="text/javascript"></script>
<style type="text/css" media="screen">
/* 右下角跳出的广告 */
#downmsg_emessage{POSITION: fixed;_position:absolute; z-index:100; bottom:0;right:0; backgroundnull:url() no-repeat left top;width:225px;}
#donwmsg_head{float:left; display:inline; font-size:12px;color:#FFFFFF;margin-left: 26px;margin-top: 6px;}
#downmsgBar .close{float:right;width:11px;height:11px;margin-top:6px;display:block;margin-right:5px;}
#downmsgBar{height:25px;}
#donwmsg_content{height:162px;overflow:hidden;}
#donwmsg_content ul{font-size:12px;color:#007cc1; top: 0px;padding:0px 2px 0 6px;left: 6px;line-height:180%; height:110px; overflow:hidden;}
#donwmsg_content ul li{backgroundnull:url() no-repeat -100px -245px;text-indent:13px;}
#donwmsg_content ul li a{color:#007cc1;}
#donwmsg_content ul .ll a{color:#a10000;font-weight:bold;}
#donwmsg_content p{position:absolute;left: 13px;top: 157px;}
#donwmsg_content .lb{padding:0px; text-align:center;}
#donwmsg_content .lb a{font-size:12px;color:Blue}
a.msg-hidden-btn-2{width:11px; height:11px;overflow:hidden;float:right;display:block;margin-right:5px;margin-top:6px;backgroundnull:url() no-repeat -0px -250px;}
a.msg-hidden-btn-1{ width:11px; height:11px;overflow:hidden;float:right;display:block;margin-right:5px;margin-top:6px;backgroundnull:url() no-repeat -50px -250px;}
</style>
</head>
<body>
<div id="downmsg_emessage" style="DISPLAY: block">
<div id="downmsgBar">
<div id="donwmsg_head">柯乐义推荐内容</div><a class="close" href="javascript:closeDiv()"></a><a class="msg-hidden-btn-1" id="msg_hidden_btn" href="javascript:showHideDiv()"> </a></div>
<div id="donwmsg_content" style="DISPLAY: block; HEIGHT: 162px">
<ul>
<li class="ll"><a href="" >单行文字间歇向上滚动</a></li>
<li><a href="" >jQuery UI修饰title气泡</a></li>
<li><a href="" >jquery清空textarea等输入框</a></li>
<li><a href="" >jquery关灯特效</a></li>
<li><a href="" >可改变大小DIV层</a></li>
</ul>
<div class="lb"><a href="" target="_blank">jQuery</a>   <a href="" target="_blank">Javascript</a>   <a href="" target="_blank">CMS</a> </div>
</div>
</div>
</body>
</html>

菜单栏目

先将所有需要切换元素的状态变为失活,然后将当前选中的元素状态设置为激活状态;

默认的inline元素

首先,我们观察一下默认的inline元素的表现:

HTML代码

XHTML

<a>首页</a> <a>热点</a>

1
2
<a>首页</a>
<a>热点</a>

CSS代码

CSS

a { margin: 0; padding: 0; border: 1px solid #000; }

1
2
3
4
5
a {
    margin: 0;
    padding: 0;
    border: 1px solid #000;
}

效果图

图片 4

inline默认情况

默认情况下,inline元素之间就有空隙出现,所以结合了inline和block属性的inline-block属性自然也有这个特点。
那这些空隙是什么呢,它们是空白符!

代码解析

效果图片: 完...

栏目的具体内容

先将所有的栏目内容项设置为隐藏状态,然后再将当前选择的菜单选项对应的具体内容的状态设置为显示。

消除空白符

在浏览器中,空白符是不会被浏览器忽略的,多个连续的空白符浏览器会自动将其合并成一个。我们编写代码时写的空格,换行都会产生空白符。所以自然而然的两个元素之间会有空白符,如果将上述例子中的a标签写成一行,空白符消失,菜单之间也就紧凑起来了。

空白符虽然是浏览器正常的表现行为,但是通常情况下,设计师同学的设计稿不会出现这些空隙,我们在还原设计稿的时候,怎么去除掉这些空隙呢。
要去除空白符产生的间隙,首先要理解空白符归根结底是个字符,通过设置font-size属性可以控制产生的间隙的大小。
首先我们将font-size设置成50px试试,修改CSS代码如下:

CSS

ul, li { padding: 0; margin: 0; list-style-type: none; font-size:50px } li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center; font-size:12px }

1
2
3
4
5
6
7
8
9
10
11
12
13
ul, li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-size:50px
}
li {
    display: inline-block;
    border: 1px solid #000;
    width: 100px;
    text-align: center;
    font-size:12px
}

我们修改ul的font-size为50px,而li的font-size为12px保持原来的字体大小,效果如下:

图片 5

font-size:50px的空隙

可以看到菜单之间的空隙变大了。
接着我们设置font-site属性为0px,代码如下

JavaScript

ul, li { padding: 0; margin: 0; list-style-type: none; font-size:0px } li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center; font-size:12px }

1
2
3
4
5
6
7
8
9
10
11
12
13
ul, li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-size:0px
}
li {
    display: inline-block;
    border: 1px solid #000;
    width: 100px;
    text-align: center;
    font-size:12px
}

效果如下:

图片 6

font-size:0的空隙

可以看到菜单之间的空隙没有了,大家可以自行查看Demo

HTML

方法1:实现思路(使用class来实现)

1.获取所有的菜单选项,及所有菜单选项对应的选项内容;

2.遍历菜单选项数组,给每一个菜单选项自定义一个索引,并将遍历变量(i)赋给该值;

  1. 给每一个选项绑定鼠标滑过事件;

4.在鼠标滑过事件中,再次遍历所有的菜单选项,将每一个菜单选项的状态设置为失活,每个菜单项的具体内容的状态设置为隐藏;

5.遍历完成后,再给当前选中的菜单项设置激活状态(active),以及当前选项对应的内容项的状态设置为显示;

兼容性问题

在IE8 ,FF和Chrome的浏览器,inline-block可以完美的兼容,考虑到IE6和IE7等低版本浏览器的占用率,虽然有办法可以兼容,但本文不再赘述,大家有兴趣的可以查找相关资料。

首先在head间引用jQuery和插件。

Demo代码实现--jquery写法

inline-block的应用

inline-block的应用什么场景有哪些呢?我们大家考虑一个技术的应用场景时,首先一定要思考的是技术的特性和需求是否符合。inline-block的特点是结合inline和block两种属性的特性,可以设置width和height,并且元素保持行内排列的特性,基于这一点,所有行内排列并且可以设置大小的场景都是我们可以考虑使用inline-block的应用场景。下面举例说明:

 代码如下

HTML

<div class="tab clearfix">

<div class="tab-wrap clearfix">

<ul class="tab-menu">

<li class="active"><a href="javascript:;">menu1</a></li>

<li><a href="javascript:;">menu2</a></li>

<li><a href="javascript:;">menu3</a></li>

<li><a href="javascript:;">menu4</a></li>

<li><a href="javascript:;">menu5</a></li>

</ul>

</div>

<div class="tab-content clearfix">

<div class="content show">content1</div>

<div class="content">content2</div>

<div class="content">content3</div>

<div class="content">content4</div>

<div class="content">content5</div>

</div>

</div>

网页头部菜单

网页头部的菜单就是典型的横向排列并且需要设置大小的应用,在inline-block之前,实现菜单基本都是用float属性来实现,float属性会造成高度塌陷,需要清除浮动等问题,使用inline-block实现就不需要在意这样的问题。代码如下:

HTML代码

XHTML

<div class="header"> <ul> <li> <a href="javascript:;" target="_blank">服装城</a> </li> <li> <a href="javascript:;" target="_blank">美妆馆</a> </li> <li> <a href="javascript:;" target="_blank">超市</a> </li> <li> <a href="javascript:;" target="_blank">全球购</a> </li> <li> <a href="javascript:;" target="_blank">闪购</a> </li> <li> <a href="javascript:;" target="_blank">团购</a> </li> <li> <a href="javascript:;" target="_blank">拍卖</a> </li> <li> <a href="javascript:;" target="_blank">金融</a> </li> <li> <a href="javascript:;" target="_blank">智能</a> </li> </ul> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="header">
    <ul>
        <li>
            <a href="javascript:;" target="_blank">服装城</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">美妆馆</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">超市</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">全球购</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">闪购</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">团购</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">拍卖</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">金融</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">智能</a>
        </li>
    </ul>
</div>

CSS代码:

JavaScript

a, ul, li { padding: 0; margin: 0; list-style-type: none; } a { text-decoration: none; color: #333; } .header ul { font-size: 0; text-align: center; } .header li { display: inline-block; font-size: 16px; width: 80px; text-align: center; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a, ul, li {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
a {
    text-decoration: none;
    color: #333;
}
.header ul {
    font-size: 0;
    text-align: center;
}
.header li {
    display: inline-block;
    font-size: 16px;
    width: 80px;
    text-align: center;
}

效果图

图片 7

京东首页导航菜单

这是模仿京东首页头部导航菜单的实现,使用inline-block可以很简单的实现横向菜单列表

复制代码

CSS

div,ul,li,a{margin:0;padding:0;list-style:none;text-decoration:none;}

.clearfix:after{content:'';display:block;clear:both;overflow:hidden;visibility:hidden;}

.clearfix{zoom:1;}

.tab{width:900px;margin:30px auto;}

.tab.tab-wrap{border-bottom:1px solid#f00;}

.tab-menu{float:right;}

.tab-menuli,.tab-menuli a{display:inline-block;*display:inline;float:left;height:34px;line-height:34px;font-size:14px;font-family:"Microsoft YaHei","微软雅黑";padding:0 14px;text-align:center;}

.active{position:relative;border:1px solid#f00;border-bottom:none;height:34px;line-height:34px;background-color:#fff;margin-bottom:-1px;margin-left:-1px;margin-right:-1px;}

.content{display:none;height:400px;width:900px;line-height:400px;background:olivedrab;float:left;}

.show{display:block;}

内联块元素

除了菜单之外,一切需要行内排列并且可设置大小的需求就可以用inline-block来实现。
例如使用a标签做按钮时,需要设置按钮的大小,我们就可以使用inline-block来实现。

HTML代码

XHTML

<div> 点击右边的按钮直接购买 <a href="javascript:;" class="button"> 购买 </a> </div>

1
2
3
4
5
6
<div>
    点击右边的按钮直接购买
    <a href="javascript:;" class="button">
        购买
    </a>
</div>

CSS代码

JavaScript

.button { display: inline-block; width: 150px; height: 45px; background: #b61d1d; color: #fff; text-align: center; line-height: 45px; font-size: 20px; }

1
2
3
4
5
6
7
8
9
10
.button {
    display: inline-block;
    width: 150px;
    height: 45px;
    background: #b61d1d;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 20px;
}

效果图

图片 8

a标签菜单

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/accordion.js"></script> 

JS

$(function() {

var aLi =$('.tab-menu').find('li');

var aDiv =$('.tab-content').find('div');

for(var i =0;i < aLi.length;i ) {

$(aLi[i])[0].index= i;

$(aLi[i]).mouseover(function() {

for(var j =0;j < aLi.length;j ) {

$(aLi[j]).removeClass('active');//JavaScript使用obj.className = "";

$(aDiv[j]).removeClass('show');//JavaScript使用obj.className = "";

}

$(this).addClass('active');//JavaScript使用obj.className = "active";

$(aDiv[$(this)[0].index]).addClass('show');//JavaScript使用obj.className = "show";

});

}

});

布局

inline-block也可以用于常见的布局,使用它就不需要去注意float属性布局带来的问题。
举例说明,创建一个常见的3列布局。

HTML代码

XHTML

<div class="wrap"> <div class="header"> 网页头部 </div> <div class="content"> <div class="left"> 左侧 </div> <div class="center"> 中间 </div> <div class="right"> 右侧 </div> </div> <div class="footer"> 网页底部 </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="wrap">
    <div class="header">
        网页头部
    </div>
    <div class="content">
        <div class="left">
            左侧
        </div>
        <div class="center">
            中间
        </div>
        <div class="right">
            右侧
        </div>
    </div>
    <div class="footer">
        网页底部
    </div>
</div>

CSS代码

CSS

body, div { margin: 0; padding: 0; } .header, .footer { width: 100%; background: #ccc; height: 120px; text-align: center; line-height: 120px; } .content { margin: 0 auto; background: #ff6a00; width: 1000px; font-size: 0; } .content .left, .content .center, .content .right { display: inline-block; font-size: 16px; height: 400px; } .content .left, .content .right { width: 200px; } .content .center { width: 600px; background: #00ffff; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
body, div {
    margin: 0;
    padding: 0;
}
.header, .footer {
    width: 100%;
    background: #ccc;
    height: 120px;
    text-align: center;
    line-height: 120px;
}
.content {
    margin: 0 auto;
    background: #ff6a00;
    width: 1000px;
    font-size: 0;
}
.content .left, .content .center, .content .right {
    display: inline-block;
    font-size: 16px;
    height: 400px;
}
.content .left, .content .right {
    width: 200px;
}
.content .center {
    width: 600px;
    background: #00ffff;
}

效果图

图片 9

inline-block的三列布局

这个例子使用了inline-block做出了常见的网页布局。

关于inline-block的应用,只要是从左到右,从上到下,并且需要设置大小的列表都可以用它来实现,而这种需求是非常常见的,相比于float,我更推荐inline-block。inline-block的应用应该还有很多,大家可以多多挖掘出来。

接着,在body间写上菜单主体代码,HTML代码将由一系列无序列表组成。

效果图

图片 10

选项卡案例1

总结

相比于使用float所带来的问题,使用inline-block所需要注意的点主要是空白符带来的问题,这一点也可以很方便的解决。
使用inline-block可以很方便的进行列表布局,更加符合我们的思维习惯,相信使用它的同学们也会越来越多,欢迎大家讨论。

3 赞 5 收藏 评论

图片 11

 代码如下

复制代码

<ul class="nav"> 
   <li><a href="; 
   <li><a href="#">服务</a></li> 
   <li><a href="#">案例</a></li> 
   <li><a href="#">文章</a></a> 
        <ul> 
           <li><a href="#" target="_blank">XHTML/CSS</a></li> 
           <li><a href="#">Javascript/Ajax/jQuery</a> 
                <ul> 
                    <li><a href="#">Cookies</a></li> 
                    <li><a href="#">Event</a></li> 
                    <li><a href="#">Games</a></li> 
                    <li><a href="#">Images</a></li> 
                </ul> 
            </li> 
            <li><a href="#" target="_blank">PHP/MYSQL</a></li> 
            <li><a href="#" target="_blank">前端观察</a></li> 
            <li><a href="#" target="_blank">HTML5/移动WEB应用</a></li> 
        </ul> 
    </li> 
    <li><a href="#">关于</a></li> 
</ul> 

 

CSS

当然,我们要为这个无序列表加上样式,让它非常简洁的呈现在屏幕上。

 代码如下

复制代码

.nav {width: 213px; padding: 40px 28px 25px 0;}  
ul.nav {padding: 0; margin: 0; font-size: 1em; line-height: 0.5em; list-style: none;}  
ul.nav li {}  
ul.nav li a {line-height: 10px; font-size: 14px; padding: 10px 5px; color: #000; display: block; 
text-decoration: none; font-weight: bolder;} 
ul.nav li a:hover {background-color:#675C7C;    color:white;} 
ul.nav ul { margin: 0; padding: 0;display: none;}  
ul.nav ul li { margin: 0; padding: 0; clear: both;}  
ul.nav ul li a { padding-left: 20px; font-size: 12px; font-weight: normal;} 
ul.nav ul li a:hover {background-color:#D3C99C; color:#675C7C;}  
ul.nav ul ul li a {color:silver; padding-left: 40px;}  
ul.nav ul ul li a:hover { background-color:#D3CEB8; color:#675C7C;}  
ul.nav span{float:right;} 

jQuery

调用accordion插件,设置相关属性,一个漂亮的手风琴效果就完成了。

 代码如下

复制代码

$(function(){ 
   $(".nav").accordion({ 
        speed: 500, 
        closedSign: '[ ]', 
        openedSign: '[-]' 
    }); 
});  

Accordion提供以下选项设置:

speed:数字毫秒,设置菜单展开和关闭的时间。

closedSign:当下级菜单关闭时,显示于菜单旁边的内容,可以是任意html或者text。

openedSign:当下级菜单展开时,显示于菜单旁边的内容,可以是任意html或者text。

注意,如果你想菜单初始载入时就展开的话,可以在对应要展开的li上加class="active"。

实例代码

 代码如下

复制代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="../css/main.css" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="accordion.js"></script>
<script type="text/javascript">
$(function(){
   $(".nav").accordion({
        //accordion: true,
        speed: 500,
     closedSign: '[ ]',
  openedSign: '[-]'
 });
});
</script>
<style>
.demo{width:300px; margin:40px auto; padding:10px; background:#f7f7f7}
ul{list-style:none}
.nav {width: 213px; padding: 40px 28px 25px 0; font-family: "Microsoft yahei", Arial, Helvetica, sans-serif;}
ul.nav {padding: 0; margin: 0; font-size: 1em; line-height: 0.5em; list-style: none;}
ul.nav li {}
ul.nav li a {line-height: 10px; font-size: 14px; padding: 10px 5px; color: #000; display: block; text-decoration: none; font-weight: bolder;}
ul.nav li a:hover {background-color:#675C7C;    color:white;}
ul.nav ul { margin: 0; padding: 0;display: none;}
ul.nav ul li { margin: 0; padding: 0; clear: both;}
ul.nav ul li a { padding-left: 20px; font-size: 12px; font-weight: normal;}
ul.nav ul li a:hover {background-color:#D3C99C; color:#675C7C;}
ul.nav ul ul li a {color:silver; padding-left: 40px;}
ul.nav ul ul li a:hover { background-color:#D3CEB8; color:#675C7C;}
ul.nav span{float:right;}
</style>
</head>

<body>

<div id="main">
      <div class="demo">
      <ul class="nav">
         <li><a href="" target="_blank">首页</a></li>
         <li><a href="#">服务</a>
              <ul>
                  <li><a href="#">JAVASCRIPT</a></li>
                  <li><a href="#">PHP</a></li>
                  <li><a href="#">MYSQL</a></li>
                  <li><a href="#">LINUX</a></li>
              </ul>
         </li>
         <li><a href="#">案例</a></li>
         <li><a href="#">文章</a></a>
              <ul>
                   <li class="active"><a href="4.html" target="_blank">XHTML/CSS</a></li>
                   <li><a href="#">Javascript/Ajax/jQuery</a>
                        <ul>
                            <li><a href="#">Cookies</a></li>
                            <li><a href="#">Event</a></li>
                            <li><a href="#">Games</a></li>
                            <li><a href="#">Images</a></li>
                        </ul>
                   </li>
                   <li><a href="6.html" target="_blank">PHP/MYSQL</a></li>
                   <li><a href="7.html" target="_blank">前端观察</a></li>
                   <li><a href="9.html" target="_blank">HTML5/移动WEB应用</a></li>
              </ul>
         </li>
         <li><a href="about.html" target="_blank">关于</a></li>
      </ul>
   </div>
  
</div>

</body>
</html>

jQuery多级手风琴菜单下载:

...

本文由pc28.am发布于前端技术,转载请注明出处:js达成右下角可关闭最小化div,jQuery多级手风琴菜

上一篇:ES6的十二个新特色,本身征集的做事js库 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • 品质的法门
    品质的法门
    9 种改革 AngularJS 品质的艺术 2017/07/20 · JavaScript· AngularJS 初藳出处: JustinSpencer   译文出处:oschina    AngularJS 是当下利用非常遍布的 web app应用框架,随
  • 高质量滚动,实例解析防抖动和节流阀
    高质量滚动,实例解析防抖动和节流阀
    实例解析防抖动和节流阀 2016/04/26 · JavaScript· DOM 本文由 伯乐在线 -涂鸦码龙翻译。未经许可,幸免转发! 立陶宛共和国(Republic of Lithuania卡塔尔语出处:
  • 安插最棒执行,营造打包优化_javascript技术_脚本
    安插最棒执行,营造打包优化_javascript技术_脚本
    Webpack 4 配置最佳实践 2018/06/22 · JavaScript· webpack 原文出处:Zindex    Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了4.12.x。但因为 Webpack官方还
  • 前端安全
    前端安全
    Web 安全之 XSS 2018/05/25 · JavaScript· 1 评论 ·XSS 原文出处:今日头条技术博客    1.CSRF 2.XSS 基本概念 攻击原理 防御措施 什么是XSS 跨站脚本攻击(Cross Site
  • 说说Float那个被埋没的志向,重新认识Box
    说说Float那个被埋没的志向,重新认识Box
    什么是BFC 2016/01/09 · CSS · 2评论 ·BFC 原文出处:大搜车前端团队博客    这是我10个月前写的一篇关于BFC的文章,因为接下来要写一篇关于FFC的文章了,然