任务八——响应式网格（栅格化）布局之问题总结

Posted 2020-07-24 cjlalala

　　题目请看：任务八：响应式网格（栅格化）布局

　　一：要求是每个元素之间的间距均为20px，首先间距的实现有两种方法：

           方法1.

<div class="container">
    <div class="col-sm-4  col-xs-6">4-6</div>
        。 。 。 。 。 。
</div>

　　　　　　　container设置box-sizing：border-box；width：100%；padding：10px；每个div也设置box-sizing：border-box；margin：10px；float：left；由于每个div都设置浮动，所以外边距不会合并，这样间距都是20px了，每块div宽度用calc（相应的%-20px）；

.container{
    box-sizing:border-box;
    padding:10px;
    width:100%;
}
div[class^="col-"]{
    box-sizing: border-box;
    border: 1px  solid #999;
    height:50px;
    margin:10px;
    float:left;
    background-color: #eee;
    text-align:center;
    vertical-align: middle;
}
@media(min-width:769px){
    .col-sm-4{
        width: calc(33.33% - 20px);
    }

　　　　方法2.

<div class="container">
    <div class="outer">
         <div class="inner col-sm-4  col-xs-6">4-6</div>
    </div>
</div>

　　　　　　　每块div用父元素也就是outer适应百分比宽度，box-sizing 为border-box，再设置padding。添加子元素inner设置具体高度和样式。

.container {
  box-sizing: border-box;
  width: 100%;
  padding: 10px; }
.outer {
  box-sizing: border-box;
  float: left;
  padding: 10px; }

.inner {
  height: 50px;
  background-color: #eee;
  border: 1px solid #999; }

@media (min-width: 769px) {
  .col-md-4 {
    width: 33.33333%; }

　　　　　　　附：box-sizing 取值如图：

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

 

　　　　　　　　来自 <http://www.w3school.com.cn/cssref/pr_box-sizing.asp>

　　　　

　　　　二：以上两种方法的布局都是使用浮动，其实还有另一种布局方法：

          　　由于排列的元素是等高的，所以使用使用浮动来布局比较简便，不过如果元素不等高的话，不添加多余的标签，浮动布局是很难实现题中的效果。如果遇到这种情况，可以使用inline-block来布局。

　　　　　 每个div设置display:inline-block;*display:inline；*zoom:1;（兼容IE6/7）但由于代码编写时每个div之间有空格或者换行，导致每个div之间在呈现时莫名的多出几像素间距，为了消除间距可以在container上添加一个font-size：0；的属性。具体清除间距方法请看：CSS 去掉inline-block元素间隙的几种方法

.container{
    font-size: 0;
    padding: 10px;
    width: auto;
}
[class*="col-"]{
    box-sizing: border-box;
    display: inline-block;
    *display：inline-block;
    *zoom：1;　　　　　　　　　　/*兼容IE6，7*/
    border:1px solid #999;
    background-color: #eee;
    margin: 10px;
    height: 50px;
}

　　三：由此问题想到了外边距叠加的问题，顺便查了下，简单的总结如下：

　　　　　　1.只有在普通文档流中元素的垂直外边距才会发生外边距合并，水平方向的外边距不发生合并；

　　　　　　2.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（这里指的是上下相邻的元素）；

　　　　　　3..创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠（这里指的是创建了BFC的元素和它的子元素不会发生折叠），

     　　　　　　注意：触发BFC的因素是float（除了none）、overflow（除了visible）、display（table-cell/table-caption/inline-block）、position（除了static/relative） ；

　　　　　　4.当元素没有内容（即空元素）、内边距、边框时， 它的上下边距就相遇了， 即会产生叠加（垂直方向）。 当为元素添加内容、 内边距、 边框任何一项， 就会取消叠加。

　　　　　　5.建议是在写的时候尽量用同一方向的margin，比如都设置为top或者bottom，因为你在实践的时候有时不需要为每个元素设置浮动、inline-block或者absolute 。

　　　　　　来源：如何解决外边距叠加的问题？

          

　　　 四：看到人用outline设置边框，outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

　　　 　　　  与border的区别有:

           　　　　　　1.outline是不占空间的，既不会增加额外的width或者height；

           　　　　　　2.outline有可能是非矩形的。