BDstudy课后学习问答：Day5+Day6

编码规范：https://github.com/ecomfe/spec
成功把这三种写出来了 还是存在问题
样式三的代码：https://github.com/kesin-lee/BDstudy/blob/master/day5%2Bday6/usetable/day5%2Bday6_3(table).css
margin:0 auto；在不同场景下生效条件如下：
块级元素：给定要居中的块级元素的宽度。
行内元素：①设置display:block；②给定要居中的行内元素的宽度。（行内元素设置成块级元素后可以对其宽高进行设置）
行内块元素：设置display:block。（如input、button、img等元素，自带宽度可以不用设置其宽度）
注：

    ①可以通过对块级元素设置 text-align：center；的方式来实现内联元素（如文本、图片）居中

    ②margin:0 auto;可以使盒子居中，text-align:center;可以使此盒子内的内联元素居中，故有时需要两者结合使用才能使得盒子及其中文本一起居中。

版权声明：此为CSDN博主「liuting9612」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39068791/article/details/80635316

• 盒模型的概念
  答：
         盒子的宽度 = margin-left + border-left + padding-left +width + padding-right + border-right + margin-right
• inline、block和inline-block的概念
  答：
         ① inline：转为内联元素（行内元素）不单独占据一行，可与其他元素占一行 不能设置宽高和底部、顶部边距
         ②block：转为块状元素 单独占一行 可设置宽高 边距
         ③inline-block：转为内联块状元素 不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。
• 内外边距，宽度，高度，box-sizing等属性
  答：http://ife.baidu.com/note/detail/id/2970
         box-sizing 属性可以被用来调整这些表现:
         content-box 是默认值，标准盒子模型 width+左右border+左右padding＝总宽度
         border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
  译者注: border-box不包含margin
• 浮动，清除浮动引用http://ife.baidu.com/note/detail/id/902
  答：
         浮动的是布局，例如通过浮动来形成三列布局，文字环绕等等。但是浮动也有一个问题，那就是会导致高度的塌陷，就像上面的图片显示，父元素的高度塌陷了，并没有将浮动的子元素包裹进去，这样子就会造成布局上的错误。
         清除浮动方法大致有两类，一类是clear:both | left | right ,另一类则是创建BFC,细分又可以分为多种
         通过在浮动元素末尾添加一个空的标签例如并设置样式为clear:both | left | right ，其他标签br等亦可。

<div class="parent">
    <div class="child"></div>
    <div style="clear: both;"></div>
</div>

优点：简单。
缺点：增加了额外的标签，并且很显然这并不符合语义化。
*使用 br标签和其自身的 html属性，br 有 clear=all | left | right | none；的属性。

<div class="parent">
    <div class="child"></div>
    <br clear='all'>
</div>

优点：简单代码量少，比空标签语义化稍好。
缺点：同上。
使用::after伪元素(万金油方法)
ps:由于IE6-7不支持:after，使用`zoom:1触发hasLayout。其实是通过 content 在元素的后面生成了内容为空的块级元素
代码如下

.clearfix:after {
    content:"";
    display:block;
    height:0;
    visibility:hidden;//这一条可以省略，证明请看原文精益求精部分
    clear:both; 
}
.clearfix {
    zoom:1;
}

优点：结构和语义化完全正确,代码量居中。
缺点：复用方式不当会造成代码量增加。
父元素设置 overflow：hidden,(PS:在IE6中还需要触发 hasLayout ，例如 zoom:1)
优点：不存在结构和语义化问题，代码量极少。
缺点：由于hidden的原因，当内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素，还会导致中键失效（鼠标中键）。
父元素设置 overflow：auto 属性
优点：同上
缺点：多个嵌套后，会有bug，详情看原文。
父元素也浮动
优点：代码少
缺点：总不能一直浮动到body吧。
父元素设置display:table
优点：结构语义化完全正确，代码量极少。
缺点：会造成盒模型的改变。

• 如何使用浮动进行布局
  答：float:left|right|