小薇学院任务七

1.Certain HTML elements,like <fieldset> and <button>, do not work as flex containers. The bowsers default rendering of those element' UI conflicts with the display: flex declaration.
2.box-sizing属性用于更改用于计算元素宽度和高度的默认的CSS盒模型。可以用此属性来模拟不正确支持CSS框架规范的浏览器的行为。
content-box
默认值，标准盒子模型。width和 height只包含内容的宽和高，不包含内边距、边框和外边距。比如： 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。
border-box
width和 height属性包含内容，填充和边框，但不包含边距。这是文档处于Quirks 模式时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。
这里的维度计算为：
width = border + padding + 内容的 width，
height = border + padding + 内容的 height。
3.bootstrap栅格布局样式设置

HTML
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-sm-1">
            1 of  12
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            2 of  12
        </div>
     </div>
    <div class="row">
        <div class="col-lg-3">
            3 of  12
        </div>
    </div>
    <div class="row">
        <div class="col-xs-4">
            4 of  12
        </div>
    </div>
</div>

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;/*实际行高等于字体大小乘以这个无单位值*/
    color: #333;
    background-color: #fff;
}

body{
    margin: 0;
}

/*分开写两个body选择器是因为出自两个不同地方*/
*{
    box-sizing: border-box;
}

html {
   -webkit-tap-highlight-color: rgba(0,0,0,0);/*一个没有标准化的属性，能够设置点击链接的时候出现的高亮颜色。显示给用户高光是它们成功点击的标识，以及暗示他们点击的元素*/
}

html{
   -webkit-text-size-adjust: 100%;
}

@media (min-width: 1200px)
.container{
    width: 1170px;
}

@media (min-width: 992px)
.container{
   width: 970px;
}

@media (min-width: 768px)
.container{
   width: 750px;
}

.container{
   padding-left: 15px;
   padding-right: 15px;
   margin-left: auto;
   margin-right: auto;/*水平居中*/
}

div{
   display: block;
}

.container:before,.container:after,.row:before,.row:after{
   display: table;
   content: " ";
}
/*:before为当前元素创建一个子元素作为伪元素。通常通过content属性来为一个元素添加修饰性的内容。此元素默认为行内元素。*/

.container:after,.row:after{
   clear: both;/*利用最后一个子元素（伪元素）清除浮动*/
}

.container:after,.row:after{
   display: table;
   content: " ";
}

:before,:after{
   box-sizing: border-box;
}

.row{
   margin-left: -15px;
   margin-right: -15px;
   /*这里的设置与.container的padding: 15px; 在左右侧相互抵消（前提是rowwidth足够大，否则只有左侧抵消），没看出有什么意义。*/
}
@media (min-width: 768px)
.col-sm-1 {
    width: 8.33333333%;
}
@media (min-width: 768px)
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
    float: left;
}
@media (min-width: 992px)
.col-md-2 {
   width: 16.66666667%;
}
@media (min-width: 992px)
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
   float: left;
}
@media (min-width: 1200px)
.col-lg-3 {
   width: 25%;
}
@media (min-width: 1200px)
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 {
   float: left;
}
.col-xs-4 {
   width: 8.33333333%;
}
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
   float: left;
}

Setting one column width
Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.