baidu.ife task0001记录

总结

• task0001任务地址：https://github.com/baidu-ife/ife/tree/master/2015_spring/task/task0001

本以为task0001很简单，结果用了6天时间才算是基本完成（太弱），中间出现了好多问题，下面是在做的过程中遇到的问题的一些记录以及理解（前面1-5是基础知识，重点是6-7）：

1. DIV 居中

• 很快想到的方法是利用外边距margin-left: auto;margin-left: auto; 对于整个div层或者是一个图片甚至是文本都可以（应该只要是块级元素就可以）。（然而我并不知道为什么，直到看到了知乎回答：为什么margin:auto可以让块级元素水平居中
• 对于文本居中，可以先使其水平居中text-align: center; 再垂直居中直接将行距line-height设为和整个DIV一样高，有的博客提到了vertical-align:middle;查了好多资料，张鑫旭（一），二，

• 关于ul和li的居中问题：<div class="nav"><ul><li>..</li><li>..</li><li>..</li></ul></div>
  一般在页面导航里面会用到列表并且要居中，比如任务里面footer里面的主页文章作品关于那一行，总结了一下比较好的方法有两种：
  1：利用inline属性，将li行级元素改为列级元素，然后再前面父元素里面用text-align：center；使文字水平居中,样式如下：
  .nav {width: 100%, height: 40px, text-align: center;}
li{ dispaly: inline; margin-right: 30px; line-height: 40px;}
  2：利用相对定位,大致样式如下---参考资料：
  ul{float: left;position: relative;left: 50%}
li{float: left;position: relative;right: 50%;}

• 想到表格元素默认居中，故可以利用display: inline-block.关于块级元素block-level elements和内联元素inline elements，这个文章写的很清楚，经常可以利用块级元素和内联元素的不同可以实现不同的布局操作, 这种方法代码如下：

```<style>
        .div1{width:100%; text-align:center;}
        .div2{width:960px; height:50px; background:red;display:inline-block;}
    </style>
    <div class="div1">
        <divclass="div2"></div>
    </div>

2. 页面留白

做这些练习的过程中注意到了页面会留白，原因不是由于margin，padding就是line-height（也有可能还有别的，暂时我还没发现），参考资料：inline-block以及解决空白间距， line-height

• 在task0001做的过程中发现一个问题：插入一个图片设置width和height均为200px，但是在chrome开发者工具中发现height莫名其妙多了4px，查了很多资料才知道原因就是img是inline elements，在使用的时候会自动加上默认的行距line-height
• 有时候会需要去除元素之间的空白区域，在使用display：inline-blcok时，一般都会产生空白，原因同上，inline元素默认加上行高，参考inline-block及解决空白间距。
• 此外，关于*{margin: 0;padding: 0;}，拿上面代码举例，得到的红色矩形离页面最上方之间有空白，在.div1和.div2中间加上margin:0;padding:0无变化，只有加上*{margin:0;padding:0;}才可以去掉留白，猜测是整个body也是个div,浏览器上面出现的页面对于它可以视为内联元素， 需要将其margin和padding设为0才会不出现留白区域。“ * ”是通配符，用来匹配页面上面所有的元素，改为body一样可以达到一样的效果。对于通配符的使用找了资料发现有的建议不要这样使用，说是会增加内存开销，但同时也有说这个影响可以忽略不计的，现在我还是不太清楚到底影响大不大

3. 圣杯布局和双飞翼布局

• 非常经典的两种三列布局，实现的结果是一样的，左右两列定宽(假设左100px,右120px, 高固定不考虑)，中间一列自适应.值得看的资料：两者差异，基本原理，详细过程
• 圣杯布局主要是用到了相对布局，先将中间位置固定（使用margin），先中间后两侧 使用(position:relative;）移到相应位置
• 而双飞翼布局不采用相对布局而是多加一个嵌套，然后使用margin将两列移到相应位置，相比而言，双飞翼布局比较不需要使用相对布局，只使用浮动和负边距，比圣杯布局简单

<!--圣杯布局-->
<style>
    *{ margin: 0; padding: 0;}
    .main {
        margin:0 120px 0 100px;
    }
    .middle{
        float: left;
        width: 100%;
        height: 50px;
        background: orange;
    }
    .left{
        float: left;
        position: relative;
        width: 100px;
        height: 50px;
        margin-left: -100%;
        left: -100px;
        background: yellow;
    }
    .right{
        float: left;
        position: relative;
        width: 120px;
        height: 50px;
        margin-left: -120px;
        right: -120px;
        background: blue;
    }
</style>
<div class="main">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
<!--双飞翼布局-->
<style>
    *{ margin: 0; padding: 0;}
    .main {
        float: left;
        width：100%；
    }
    .middle{
        margin:0 100px 0 120px;
        height: 50px;
        background: orange;
    }
    .left{
        float: left;
        width: 100px;
        height: 50px;
        margin-left: -100%;
        background: yellow;
    }
    .right{
        float: left;
        width: 120px;
        height: 50px;
        margin-left: -120px;
        background: blue;
    }
</style>
<div class="main">
    <div class="middle"></div>
</div>
<div class="left"></div>
<div class="right"></div>

4. 内外补丁负值法

• 可以通过改变盒模型的样式来使几列div由内容撑开高度但几列div与最高的一栏等高的问题(综合练习 index.html里面有涉及到)
• margin 是外边距，padding 是内边距，使用padding-bottom: 10000px; margin-bottom: -10000px;先是padding撑开边距，外层嵌套overflow： hidden隐藏掉多余的高(或者宽 eg:padding-right: 10000px; margin-right: -10000px;),这样就可以使得几列div自适应于最高的一栏

5.关于position和float

刚开始学到的时候就不太明白，后来做了一些练习还有一些博客，下面是一些整理和理解：

• 参考资料：float position区别，关于布局，position，float--1，float--2,那些年我们一起清除过的浮动 , relative和absolute--1 , relative和absolute--2， relative和absolute--3 ， relative和absolute--4 ， z-index
• position 是定位概念，值可以为absolute, relative, fixed,static, inherit根据w3c上面的解释：
  “这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。”
• float 是浮动，只要float值（left， right, top, bottom, none;）不为none，这个元素就成为一个块级元素，如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。在浮动的过程中如果在一行上面有足够的width,浮动元素不会换行，否则会浮动到下一行相应方向
• 其实是两个完全不同的概念，但一般都会一起使用来实现不同的布局，值也很相似，所以有时候会产生混淆不知道该如何使用。一般来说块级元素都会另起一行显示，但是若使用float则可以使其浮动到边界，然后使用position属性（left，right，top，bottom）或者margin定位准确的位置（参考圣杯布局）。
• 一直不是很明白的是position的不同的值到底是怎么回事，做了一些练习才慢慢理解，position是用来设定各个元素的关联和约束，更接近布局的概念，经常用的的是relative和absolute，默认的position值为static，若不指定position别的值，则元素会忽略top，right等声明 (故在圣杯布局中必须制定左右两侧position值为relative，再使用left等使元素相对原位置进行移动定，而float是直接浮动到该方向紧挨着另一个块级元素或者到边界，而不能指定float的距离；), 但是若position值为absolute（重点记住：是相对于除static以外的第一个父元素进行定位，一般为上级元素加上position:relative;），则会脱离文档流，再使用float会失效；fixed是相对于浏览器进行定位，inherit是直接继承父元素的position属性的值