Bootstrap样式:box-sizing: border-box;

一、bootstrap样式

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

将所有的元素的默认盒模型box-sizing都设置成了border-box,而现代浏览器的标准默认box model是 content-box。很多第三方其他的UI库,第三方js库用的也是标准的content-box。

了解这点在写某些功能时很重要,尤其是合并使用其他第三方库和bootstrap时更要注意。
二、例子
举例:做一个展开收缩的div。
代码如下:

<!DOCTYPE html>
<meta charset="utf-8" />
<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> -->
<style type="text/css">
    #tabslide{
        position: absolute;
        width: 200px;
        height: 400px;
        background-color: green;
        border:4px solid blue;
        margin: 50px auto 0;
        right: 0;
    }
    #fold{
        position: absolute;
        margin: -50px 0 0 0;
    }

</style>
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
function changeSize(){
        if($("#tabslide").width() == 200){
                $("#tabslide").css("width", "300px");
                $("#fold").html("-unexpand");
        }else{
                $("#tabslide").css("width", "200px");
                $("#fold").html("+expand");
        }
}
</script>
<div id="tabslide">
    <button id="fold" onclick="changeSize()" >+expend</button>
</div>

效果:点”+expand”按钮div宽度增大,点”-unexpand”div宽度缩小
021359163174658
取消注释,引入bootstrap.min.css,就失效了,原因就是上面说的
* {
box-sizing: border-box;
}
使得div的width:300px设置的是border+padding+contentwidth的总宽度,jquery获取的还是contentwidth,所以就失效了。
021403480225086
如果要使用bootstrap框架,上述问题解决方案有三种:
1、方法一
在js代码里将if($(“#tabslide”).width() == 200)中的200改为192。

这样后期维护会不方便,因为你设置的宽度width为200,判断时却要判断200减去边框,减去padding得到的值。当border或padding修改时又会失效,又要重新计算。
2、方法二
在css中显示设置box-sizing:content-box

#tabslide{
    ...
    box-sizing:content-box;
}

3、方法三
在js中显示设置box-sizing:content-box。

这种方法是我推荐使用的,没有什么后顾之忧。

完整代码:

<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<style type="text/css">
    #tabslide{
        position: absolute;
        width: 200px;
        height: 400px;
        background-color: green;
        border:4px solid blue;
        margin: 50px auto 0;
        right: 0;
/*    方法二    box-sizing:content-box;*/
    }
    #fold{
        position: absolute;
        margin: -50px 0 0 0;
    }

</style>
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
function changeSize(){
        $("#tabslide").css("box-sizing", "content-box");//方法三
        // if($("#tabslide").width() == 192){ //方法一
        if($("#tabslide").width() == 200){
                $("#tabslide").css("width", "300px");
                $("#fold").html("-unexpand");
        }else{
                $("#tabslide").css("width", "200px");
                $("#fold").html("+expend");
        }
}
</script>
<div id="tabslide">
    <button id="fold" onclick="changeSize()" >+expend</button>
</div>

PHP操作Session和Cookie

我们跟踪用户信息时需要用到Session和Cookie,比如用户登录验证、记录用户浏览历史,存储购物车数据,限制用户会话有效时间等。今天我们来了解下PHP是如何操作Session和Cookie的。

Session

PHP的$_SESSION可以存储当前用户数据信息,用户访问WEB网站的时候,PHP会给每个访问的用户创建一个session ID,该ID是唯一ID,保存在客户机上,而用户的会话数据是保存到服务端的,PHP可以对每个不同的用户信息进行存储,当会话过期后,用户session信息也会失效。

使用Session,在使用PHP session时,一定要在页头加上session_start(),告诉服务器开始使用session了,而且在它之前应该没有任何输出,否则会报错。

<?php 
session_start();  
 
//PHP 代码... 
?> 

PHP设置与获取Session

我们可以使用PHP的$_SESSION来设置和获取Session数据,如:

<?php 
session_start();   
 
//设置一个session值 
$_SESSION["name"] = "Hello";  
 
//将session以数组形式保存 
$_SESSION["arr"] = array('name' => 'Hello', 'url' => 'http://www.helloweba.com', 'type'=> 'website'); 
?>

一旦储存了Session数据,我们就可以在网站上使用Session,比如我们在另一个页面就可以获取Session数据:

<?php 
session_start();   
 
//获取保存的Session name  
echo $_SESSION["name"]; 
 
//打印数组session 
print_r($_SESSION["arr"]); 
?> 

PHP删除Session

当不再使用Session时,我们可以使用PHP将session数据删除和清空,方法如下:

<?php 
unset($_SESSION["name"]); 
?> 

如果要清空当前用户所有的Session信息可以使用以下代码:

<?php 
session_destroy(); 
?> 

Cookie

Cookie是由用户访问的网站服务端给当前客户机上创建的一个临时文件,用来保存用户信息,以便用户下次继续访问该网站时,网站服务器能识别用户信息,常见的Cookie用来保存用户界面,用户ID等数据。

PHP设置Cookie

我们可以使用PHP的setcookie()在客户端创建cookie,这个函数提供主要的三个参数,cookie名称,值和有效时长。

<?php 
$cookie_val = 'Chrome';  
setcookie("browser", $cookie_val, time()+3600);  
?> 

运行以上代码,将会创建一个名称为Chrome的Cookie,并且在客户端保存1个小时,1小时后该cookie信息失效。

PHP接收Cookie

当Cookie创建后,我们很容易就可以获取到cookie值,使用PHP的$_COOKIE,用法如下:

<?php 
if(isset($_COOKIE['browser'])) { 
    echo '您的浏览器是:' . $_COOKIE['browser']; 
} 
?> 

PHP删除Cookie

如果你想彻底在你的机器上删除保存的cookie信息,可以使用以下代码:

<?php 
setcookie("browser", "", time()-3600); 
?> 

以上代码将名称为browser的cookie清空,并将有效期设置到1小时前,完全清空了cookie信息。

jQuery scroll事件

scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素。

$(document).ready(function () { //本人习惯这样写了
    $(window).scroll(function () {
        //$(window).scrollTop()这个方法是当前滚动条滚动的距离
        //$(window).height()获取当前窗体的高度
        //$(document).height()获取当前文档的高度
        var bot = 50; //bot是底部距离的高度
        if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
           //当底部基本距离+滚动的高度〉=文档的高度-窗体的高度时;
            //我们需要去异步加载数据了
            $.getJSON("url", { page: "2" }, function (str) { alert(str); });
        }
    });
});

注意:(window).height()和(document).height()的区别