css筆記（二）——幾種常用的模式

標籤：css   布局   盒子寬度   

文本垂直置中

對於行內元素，height會自動收縮到包裹住文本的高度，所以不存在這個問題。但是對於block和inline-block等盒子項目，如果設定了height屬性，則文本預設會在上方顯示。如果希望文本在垂直方向上置中，可以設定line-height屬性等於height屬性，或者大於height屬性

<div>    hello world</div>

div {    height: 200px;    line-height: 200px;}

文本水平置中，表徵圖分列左右兩側

效果是左側一個小箭頭，右側一個小箭頭，日期顯示在中間

<div id="wrapper">    <span><</span>    <span>2014年5月11日</span>    <span>></span></div>

#wrapper{    text-align: center;    position: relative;    width: 200px;}#wrapper > span:first-child{    float: left;}#wrapper > span:last-child{    float: right;}

如果給2個float元素設定width（比如為了增大點擊地區的目的），則width應該設定成一樣，否則會破壞日期水平置中的效果

為float元素設定width

一般來說，行內元素（如span），會自動收縮以適應文本寬度，為其設定width屬性是無效的。但是當span元素被float了之後，就可以為其設定width屬性了

盒子有多大

對於塊元素，如block和inline-block，如果不設定其width，則會自動擴充到父容器的寬度。此時設定它的padding和border，不會改變盒子的大小（還是和父容器一樣寬），但是會縮小content的寬度

<div id="parent">    <div id="son">abc</div></div>

#parent {    widht: 200px;}#son {    padding: 1px;    border: 1px solid black;}

son的width自動擴充到200px，然後由於padding和border佔了4px，內容地區就是196px

如果設定了son的width，實際上設定的是content的width，加上border和padding後，實際的寬度會超過父容器

#son {    width: 200px;    padding: 1px;    border: 1px solid black;}

content的寬度是200px，加上border和padding的4px，最後盒子的寬度是204px

但是，如果設定box-sizing為border-box，則設定的width就變成了整個盒子的寬度，此時再設定border和padding，又會縮小content的寬度了

#son {    box-sizing: border-box;    width: 200px;    padding: 1px;    border: 1px solid black;}

實踐中，在全域設定box-sizing為border-box挺不錯的，這樣設定padding和border時，就不用擔心造成盒子寬度的變化了

水平排放li

<ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li></ul>

ul{    font-size: 0;}li{    font-size: 1rem;    display: inline-block;    width: 20%;}

這裡的一個技巧是設定ul的font-size為0，因為</li>和<li>之間有空隙，在大部分瀏覽器上都會造成1px的間隙，造成一行無法容納5個li，於是最後一個li元素就會掉到下一行。因此把ul的font-size設定成0，在li中再恢複，可以避免此1px問題。用inline-block方式實現水平布局，大多都會有這個問題

N列固定比例水平布局

有點類似上面的li平鋪

<div>    <nav></nav>    <div></div>    <aside></aside></div>

div {    font-size: 0;}div > * {    display: inline-block;    font-size: 1rem;    vertical-align: top;}div > nav {    width: 30%;}div > div {    width: 50%;}div > aside {    width: 20%;}

基本上和li平鋪的模式完全一樣，區別是設定所有的子項目vertical-align: top。否則當各子項目的高度不一致時，看起來似乎沒有在同一行。其實用dev tools可以看出來，3個子項目還是在同一行，只是在垂直方向上沒有對齊，設定vertical-align可以解決此問題

某些列寬度固定，其他列寬度比例固定的水平布局

<div>    <nav></nav>    <div></div>    <aside></aside></div>

div {    display: -webkit-box;}div > nav {    width: 200px;}div > div {    -webkit-box-flex: 1;}div > aside {    -webkit-box-flex: 2;}

優點是不會出現1px問題，也不需要設定子項目為inline-block，很方便。另外，設定display: box之後，子項目會自動變成等高。這在某些情境下很方便，但是也不適用於另外一些情境。最後display: box，在老的瀏覽器上支援不好，所以這種方式沒有老技巧那麼通用。但是隨著瀏覽器日趨標準，我覺得慢慢就不是問題了