百度前端学院-task7小结

这里是我在百度前端学院学习的小结，我负责的部分是任务七中的part3。

demo: http://hellozts4120.github.io/IFE-2016/task1/Project7/index.html

1. 两个并排的inline-block的div之间存在空隙

当两个div的display设置为inline-block时，它们并不会紧紧的相邻，而是出现一个缝隙。

1	div{ display: inline-block; }

1 2	<div id="div1"></div> <div id="div2"></div>

【原因】出现这样的间隙，是因为标签段之间的空格
【解决办法】

去掉标签段之间的空格：

1	<div id="div1"></div><div id="div2"></div>

使用margin负值

1	div{ display: inline-block; margin-right: -3px; }

【参考】更多解决办法

2. div包裹img时，div底部多出3px

【解决办法】

设置display
1
img{ display: block; }
设置vertical-align
1
img{ vertical-align: top; }

3. 多个并排div的height，自动和最高的那个保持一致

设置display为table-cell，即让标签元素以表格单元格的形式呈现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .left,
        .right {
            padding: 10px;
            display: table-cell;
            border: 1px solid #f40;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left">left div<br/><br/><br/><br/><br/></div>
    <div class="right">right div</div>
</div>
</body>
</html>

【更多关于table-cell】我所知道的几种display:table-cell的应用

设置display为-webkit-box

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    .wrap {
        display: -webkit-box;
    }
    .left,
    .right {
        padding: 10px;
        border: 1px solid #f40;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left">left div<br/><br/><br/><br/><br/>
        </div>
        <div class="right">right div</div>
    </div>
</body>
</html>

【参考】css实现两个div并排等高

在第七个任务中，为了让《女人与列车》和《西装与斑马袜》的顶角刚好对上，我希望《女人与列车》占据屏幕34%的宽度，需要对此行做如下设置：

设置包含三列的父元素

display: -webkit-box;
display: -moz-box;
display: box;

设置前两列的宽度等宽，对前两列添加

-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;

设置图片宽度为34%
```
width: 34%;
```

注意此时，bug出现，firefox下使用css3的box模型后，子div宽度设置百分比无效

今天就到这里，see you~