iOS轉前端之盒子模型以及居中問題

OK。第三篇來了,今天來聊聊CSS佈局中的盒子模型和居中問題。好了,直接開始吧~

前面介紹了一些HTML和CSS的基礎知識,今天來說說CSS中的盒子模型和佈局居中問題,這都是平時開發中經常遇到的問題。

盒子模型

—網頁上的每一個標籤都是一個盒子,每個盒子都有四個屬性。

內容(content)

盒子裡裝的東西,網頁中通常是指文字和圖片。

填充(padding,內邊距)

怕盒子裡裝的(貴重的)東西損壞,而新增的泡沫或者其它抗震的輔料。

邊界(margin,外邊距)

盒子擺放的時候的不能全部堆在一起,盒子之間要留一定空隙保持通風,同時也為了方便取出。

邊框(border)

盒子本身

下面看這張圖片:


因為這個IE呢比較操蛋,喜歡不走尋常路,所以它的盒子模型跟別人不太一樣,請看下面這兩張圖:




看出來不同了吧,沒錯,正常的瀏覽器的Width和Height屬性算的就是顯示內容的值,而IE的則是加上邊框和內邊距的總和。。。這讓適配IE瀏覽器的同學很尷尬呀~~~

下面是關於盒子模型相關的一些屬性:

內容屬性:

邊界屬性:

下面是一個小例子:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
background-color: green;
width: 300px;
height: 200px;
/*實線*/
/*border: 5px solid red;*/
/*虛線*/
/*border: 5px dashed red;*/
/*雙線*/
border: 5px double red;
/*padding-left: 20px;*/
/*padding-top: 20px;*/
/*padding-right: 20px;*/
/*padding-bottom: 20px;*/
/*內邊距*/
padding:15px;
/*設定邊框的圓角*/
/*border-radius: 15px;*/
border-bottom-right-radius: 150px;
/*設定外邊距*/
margin: 30px;
}
</style>
</head>
<body>
<div>21212121</div>
</body>

在實際的書寫過程中,我們可以單獨設定上下左右任何一邊的值,也可以一起設定,下面請看具體的寫法:

當然光看還是不行的,要多敲敲程式碼,才可以記得更熟。盒子模型就介紹的差不多了,下面就來說說居中。居中是我們使用css來佈局時常遇到的情況。使用css來進行居中時,有時一個屬性就能搞定,有時則需要一定的技巧才能相容到所有瀏覽器,本文就居中的一些常用方法做個簡單的介紹。

先來說幾種簡單的、人畜無害的居中方法

1. 把margin設為auto

具體來說就是把要居中的元素的margin-left和margin-right都設為auto,此方法只能進行水平的居中,且對浮動元素或絕對定位元素無效。

2、使用 text-align:center

這個沒什麼好說的,只能對圖片,按鈕,文字等行內元素(display為inline或inline-block等)進行水平居中。但要說明的是在IE6、7這兩個奇葩的瀏覽器中,它是能對任何元素進行水平居中的。

3、使用line-height讓單行的文字垂直居中

把文字的line-height設為文字父容器的高度,適用於只有一行文字的情況。

4、使用表格

如果你使用的是表格的話,那完全不用為各種居中問題而煩惱了,只要用到 td(也可能會用到 th)元素的 align=”center” 以及 valign=”middle” 這兩個屬性就可以完美的處理它裡面內容的水平和垂直居中問題了,而且表格預設的就會對它裡面的內容進行垂直居中。如果想在css中控制表格內容的居中,垂直居中可以使用 vertical-align:middle,至於水平居中,貌似css中是沒有相對應的屬性的,但是在IE6、7中我們可以使用text-align:center來對錶格里的元素進行水平居中,IE8 以及谷歌、火狐等瀏覽器的text-align:center只對行內元素起作用,對塊狀元素無效。

5、使用display:table-cell來居中

對於那些不是表格的元素,我們可以通過display:table-cell 來把它模擬成一個表格單元格,這樣就可以利用表格那很方便的居中特性了。

6、使用絕對定位來進行居中

此法只適用於那些我們已經知道它們的寬度或高度的元素。

絕對定位進行居中的原理是通過把這個絕對定位元素的left或top的屬性設為50%,這個時候元素並不是居中的,而是比居中的位置向右或向左偏了這個元素寬度或高度的一半的距離,所以需要使用一個負的margin-left或margin-top的值來把它拉回到居中的位置,這個負的margin值就取元素寬度或高度的一半。

7、另一種使用絕對定位來居中的方法

此法同樣只適用於那些我們已經知道它們的寬度或高度的元素,並且遺憾的是它只支援IE9 ,谷歌,火狐等符合w3c標準的現代瀏覽器。

下面用一段程式碼來了解這種方法:

8、使用浮動配合相對定位來進行水平居中

此方法也是關於浮動元素怎麼水平居中的解決方法,並且我們不需要知道需要居中的元素的寬度。

浮動居中的原理是:把浮動元素相對定位到父元素寬度50%的地方,但這個時候元素還不是居中的,而是比居中的那個位置多出了自身一半的寬度,這時就需要他裡面的子元素再用一個相對定位,把那多出的自身一半的寬度拉回來,而因為相對定位正是相對於自身來定位的,所以自身一半的寬度只要把left 或 right 設為50%就可以得到了,因而不用知道自身的實際寬度是多少。

這種使用浮動配合相對定位來居中的方法,優點是不用知道要居中的元素的寬度,即使這個寬度是不斷變化的也行;缺點是需要一個多餘的元素來包裹要居中的元素。

9、利用font-size來實現垂直居中

如果父元素高度是已知的,要把它裡面的子元素進行水平垂直居中,則可以使用這種方法,且子元素的寬度或高度都不必知道。

該方法只對IE6和IE7有效。

該方法的要點是給父元素設一個合適的font-size的值,這個值的取值為該父元素的高度除以1.14得到的值,並且子元素必須 是一個inline或inline-block元素,需要加上vertical-align:middle屬性。

至於為什麼是除以1.14而不是其他的數,還真沒有人知道,你只需要記住1.14這個數就行了。

上述所說就是我們經常使用的居中辦法,下面還是用一段程式碼演示下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--
標籤水平居中:
1. 行內標籤  行內-塊級標籤 text-align: center;
2. 塊級標籤   margin: 0 auto;
標籤的垂直居中:
line-height的高度等於height的高度
-->
<style>
#main{
width: 500px;
height: 300px;
background-color: red;
/*水平居中*/
text-align: center;
/*行高*/
/*line-height: 300px;*/
}
span{
background-color: yellowgreen;
}
.test1{
width: 350px;
/*height: 30px;*/
background-color: green;
text-align: center;
/*margin-left: auto;*/
/*margin-right: auto;*/
margin: 0 auto;
line-height: 300px;
}
</style>
</head>
<body>
<div id="main">
<!--行內標籤-->
<!--<span>我是哈哈哈哈</span>-->
<!--行內-塊級標籤-->
<!--<input>-->
<!--塊級標籤-->
<div class="test1">123456</div>
</div>
</body>
</html>

CSS佈局之浮動

上面的居中方法中提到了關於定位方面的知識,下面就展開來介=介紹下,這也是CSS佈局中一個重要的知識點。

預設情況下,所有的網頁標籤都在標準流佈局中
從上到下,從左到右
脫離標準流的方法有:
float屬性
position屬性 和 left、right、top、bottom屬性

float屬性的常用取值有
left:脫離標準流,浮動在父標籤的最左邊
right:脫離標準流,浮動在父標籤的最右邊

OK,有點蒙,那先來看張圖吧:

還是有點蒙,OK,還是要看看程式碼才能明白~

先來float佈局相關的:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
background-color: red;
width: 500px;
height: 250px;
}
span{
background-color: blue;
}
.test1{
/*脫離標準流*/
float: right;
}
.test2{
float: left;
}
</style>
</head>
<body>
<div>
<span class="test2">111111</span>
<span class="test1">222222</span>
<span class="test3">33333</span>
<span>44444</span>
</div>
</body>
</html>

然後看下position屬性相關的:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
background-color: red;
width: 500px;
height: 250px;
}
span{
background-color: blue;
}
.test1{
/*脫離標準流*/
float: right;
}
.test2{
float: left;
}
</style>
</head>
<body>
<div>
<span class="test2">111111</span>
<span class="test1">222222</span>
<span class="test3">33333</span>
<span>44444</span>
</div>
</body>
</html>

OK,今天的內容差不多就介紹到這,作為一個業餘前端工程師,很多知識點肯定介紹的還是比較淺顯,希望多多見諒,畢竟還是要靠iOS吃飯的,今天週五,明天不上班,哈哈,很開心~~~