html5的关于布局的研究(1)

1.如何将一个块级元素垂直居中布局到父元素中:

(1):父元素不需要指定高度
父元素使用padding,写入的上下值相同即可

方法(2):父元素指定高度
使用vertical-align这个属性,按照w3school说法是,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。这个属性不能直接作用在块级元素,但上面提到,若果用这个属性:vertical-align=”middle”来设置单元格的的内容,是可以使得单元格里的内容垂直居中,因此,能否把我们的块级元素”变成”单元格才是关键,因为块级元素有个display属性,只要在父元素中设定:display:table,并在子元素上在套个父元素,设定display:table-cell;那么子元素就实现了垂直居中了

<div id="parent">
    <div id="newParent">

        <div id="child">

        </div>
    </div>


</div>

css:

#parent{
    display: table;
    width: 500px;
    height: 300px;
    background-color: brown;
}
#newParent{
    display: table-cell;
    vertical-align: middle;

}
#child{
    background-color: yellowgreen;
    width: 200px;
    height: 200px;
}

---

2.关于子元素和父元素混淆使用margin-top,margin-bottom
在父元素没有指定padding值(即默认值为0)并且没有指定边框(即没有边框)的情况下,如果子元素的margin-top/margin-bottom的值大于父元输margin-top/margin-bottom的值,那么子元素将不起效果,而这效果转移给了父元素,即父元素使用了子元素的margin-top/margin-bottom的值而放弃了自己元素定义好的值.
解决方法:给父元素指定padding不为0,或者加边框

---

3.关于布局的宽度设置成百分比数
如果根元素设置了百分比,比如body元素的宽高设置成百分比,那么,这样的元素就是随着浏览器窗口大小而比例缩放,想避免这样的情况,可以设置一个最小宽度值min-width
这样有一个好处,就是当浏览器窗口的宽度大于你设置的min-width值时,百分比的元素会进行比例缩放,但小于或者等于min-width后,不再缩放