Attention to detail using Bootstrap v3.3.4 box-sizing_html/css

Attention to detail using Bootstrap v3.3.4 box-sizing_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:41:56

Original

1296 people have browsed it

1. Bootstrap style

In Bootstrap v3.3.4, there is the following reset style:

* {  -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;}

Copy after login

Change the default box model box of all elements -sizing is set to border-box, and the standard default box model of modern browsers is content-box. Many other third-party UI libraries and third-party js libraries also use standard content-box.

Understanding this is important when writing certain functions, especially when combining other third-party libraries with bootstrap.

2. Example

Example: Make a div that expands and shrinks.

The code is as follows:

<!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>

Copy after login

Effect: Click the "expand" button to increase the width of the div, and click the "-unexpand" button to reduce the width of the div.

Uncomment and introduce bootstrap.min.css, it will be invalid. The reason is the above

* {

box-sizing: border-box;

}

makes the width of div: 300px set the total width of border padding contentwidth, obtained by jquery It's still contentwidth, so it's invalid.

If you want to use the bootstrap framework, there are three solutions to the above problem:

1. Method 1

Place if in the js code (200 in $("#tabslide").width() == 200) is changed to 192.

This will be inconvenient for later maintenance, because the width you set is 200, but when judging, you have to judge the value obtained by subtracting the border from 200 and subtracting padding. When the border or padding is modified, it will become invalid and must be recalculated.

2. Method 2

Display the setting box-sizing:content-box in css

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

Copy after login

A little better than the first method , but if some styles of bootstrap are used related to box-sizing:border-box, changes need to be made.

3. Method three

Show and set box-sizing:content-box in js.

This method is recommended by me and has no worries.

Complete code:

<!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>

Copy after login

3. Digression

In the above code, expand is spelled incorrectly and is written as expand. I was originally going to revise it, but found out there were other issues, so I just vomited them here.

expand: means "expand".

expend: means "consumption".

Another point is that there is no word for "unexpand" at all. This is why I wrote this nonsense.

I specifically checked that the antonym of expand should be shrink: meaning "shrink".

[As informed by friends in the comments, "expand" and "collapse" are generally used. Hey, the English is so urgent~]

Because it was changed The code was written by someone else. I am very helpless. I just want to remind everyone that in the future, when writing code, try to write it in English. If you don’t understand it, just look it up. In this way, when others look at your code, they can at least learn more words instead of misleading others, such as "unexpand" here.