Let multiple elements welt split the layout

How to make multiple elements welt divided equally?

        Why is there doubt it? First explain, in contact with the front end of a year's time, let alone think of a static layout, and sure enough, conceited people most likely to be hit the face Now, just for a job, the company has more stringent requirements for front-end.
        Companies are using the bootstrap development, we all know that bootstrap framework of the core is its grid system, of course I also like this you, but to me recently UI design and bootstrap always contradicted like that there It requires that each element modules between the mobile terminal and the screen has a constant pitch, but in response to the pc, to align the welt effective width. This is nonsense friends. I draw a diagram expressing their inner manic ......         is to achieve this result below, watching nothing really difficult, but because I was used to bs grid layout, so the need to modify the padding value of bs this approach is not wise, so I think and summarizes several approaches to achieve. They are very basic.

1. What four elements make no padding and border welt bisects?

<!--怎样让四个没有内边距和边框的元素贴边平分？-->
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
/*
 * 怎样让四个没有内边距和边框的元素贴边平分？
 */
        .box{
            width: 1170px;
            margin: 30px auto 0;
            border:1px solid #00a09d;
            font-size: 0;
        }
        .box>div{
            display: inline-block;
            font-size: 16px;
            width:23.5%;
            height: 100px;
            background: #ddd;
            text-align: center;
        }
        .box>div:nth-child(n+2){
            margin-left:2%;
        }

This is the most basic, most simple, nothing to say, using the simplest bisects the width of the implement. Renderings:

2. How to make four elements have padding and border welt bisects?

        This would interesting, every time in the development process, as long as the set width + padding + border, the problem will come one after another. Not an element pushed to the next line, the line width is not divided equally complete. So I used several methods below.
        To set basic styles:

<!--怎样让四个有内边距和边框的元素贴边平分？-->
        <div class="div-box div-box1">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
/*
* 怎样让四个有没有内边距和边框的元素贴边平分？
 */
    /*基础样式*/
    .div-box{
        width: 1170px;
        margin: 30px auto 0;
        border: 1px solid #000;
    }
    .div-box div{
        width: 150px;
        height: 150px;
        background: #ddd;
        padding: 15px;
        border: 1px solid #000;
        text-align: center;
    }

A middle way: weird cartridge bisecting the width of the model +

/*居中方式一:怪异盒模型+平分宽度*/
            .div-box1 div{
                box-sizing: border-box;
            }
            .div-box1{
                font-size: 0;
            }
            .div-box1 div{
                display: inline-block;
                font-size: 16px;
                width: 23.5%;
            }
            .div-box1 div:nth-child(n+2){
                margin-left:2%;
            }

Middle way: Floating + + bisecting the width of the box model weird

/*居中方式二:浮动+怪异盒模型+平分宽度*/
            .div-box2::after{
                content: "";
                display: block;
                clear: both;
            }
            .div-box2 div{
                box-sizing: border-box;
                float: left;
                width: 23.5%;
            }
            .div-box2 div:nth-child(n+2){
                margin-left:2%;
            }

Three centered manner: the elastic box (with the best friends)

/*居中方式三:弹性盒子（用这个最好啦）*/
        .div-box3{    
            display: flex;
            /*flex-direction:row;  //子元素的排列方向，默认是row  */  
            /*flex-wrap:nowrap;    //子元素超出父级后是否换行，默认不换行，设置的宽度会失效  */  
            /*flex-flow:row nowrap //上面两个属性的复合写法  */
            /*子元素在父元素上的对其方式:flex-start前对齐||flex-end后对齐||center居中对齐||space-between和边缘无间距对齐||space-around和边缘有间距对齐*/
                justify-content: space-between;  
            }
            .div-box3>div{
                width: 23%;
            }
            .div-box3>div:nth-child(n+2){
                margin-left: 2%;
            }

Four centering manner: Width property calculations (do not advocate, compatibility is not good)

/*居中方式四:宽度属性计算（不提倡，兼容性不好）*/
            .div-box4{
                font-size: 0;
            }
            .div-box4>div{
                display: inline-block;
                font-size: 16px;
                width: calc(23.5% - 32px); /*数学符号之间一定要有空格*/
            }
            .div-box4>div:nth-child(n+2){
                margin-left: 2%;
            }

The above results are four ways to achieve this:

---

Finally, only the most basic grasp the bottom of the technology, to complete the task more efficiently in the development process. Hard work to get rich, I would still try to think back more useful knowledge. :)