時(shí)間：2024-02-10 02:50:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2024-02-10 02:50:01 來源：網(wǎng)站運(yùn)營
div+css設(shè)計(jì)頁面布局？：
在線咨詢
display 是 CSS 中最重要的用于控制布局的屬性。每個(gè)元素都有一個(gè)默認(rèn)的 display 值，這與元素的類型有關(guān)。對于大多數(shù)元素它們的默認(rèn)值通常是 block 或 inline 。一個(gè) block 元素通常被叫做塊級(jí)元素。一個(gè) inline 元素通常被叫做行內(nèi)元素。div 是一個(gè)標(biāo)準(zhǔn)的塊級(jí)元素。一個(gè)塊級(jí)元素會(huì)新開始一行并且盡可能撐滿容器。其他常用的塊級(jí)元素包括 p、form 和 HTML5 中的新元素：header、footer、section 等等。span 是一個(gè)標(biāo)準(zhǔn)的行內(nèi)元素。一個(gè)行內(nèi)元素可以在段落中 <span>像這樣</span> 包裹一些文字而不會(huì)打亂段落的布局。a 元素是最常用的行內(nèi)元素，它可以被用作鏈接。display 值是 none。一些特殊元素的默認(rèn) display 值是它，例如 script。display: none 通常被 JavaScript 用來在不刪除元素的情況下隱藏或顯示元素。visibility 屬性不一樣。把 display 設(shè)置成 none 元素不會(huì)占據(jù)它本來應(yīng)該顯示的空間，但是設(shè)置成 visibility: hidden 還會(huì)占據(jù)空間。list-item 和 table。這里有一份詳細(xì)的列表[1]。之后我們會(huì)討論到 inline-block 和 flex。li 元素修改成 inline，制作成水平菜單。#main { width: 600px; margin: 0 auto;}設(shè)置塊級(jí)元素的 width 可以防止它從左到右撐滿整個(gè)容器。然后你就可以設(shè)置左右外邊距為 auto 來使其水平居中。元素會(huì)占據(jù)你所指定的寬度，然后剩余的寬度會(huì)一分為二成為左右外邊距。#main { max-width: 600px; margin: 0 auto;}在這種情況下使用 max-width 替代 width 可以使瀏覽器更好地處理小窗口的情況。這點(diǎn)在移動(dòng)設(shè)備上顯得尤為重要，調(diào)整下瀏覽器窗口大小檢查下吧！max-width，所以放心大膽的用吧。.simple { width: 500px; margin: 20px auto;}.fancy { width: 500px; margin: 20px auto; padding: 50px; border-width: 10px;}以前有一個(gè)代代相傳的解決方案是通過數(shù)學(xué)計(jì)算。CSS 開發(fā)者需要用比他們實(shí)際想要的寬度小一點(diǎn)的寬度，需要減去內(nèi)邊距和邊框的寬度。值得慶幸地是你不需要再這么做了...box-sizing 的 CSS 屬性。當(dāng)你設(shè)置一個(gè)元素為 box-sizing: border-box 時(shí)，此元素的內(nèi)邊距和邊框不再會(huì)增加它的寬度。這里有一個(gè)與前一頁相同的例子，唯一的區(qū)別是兩個(gè)元素都設(shè)置了 box-sizing: border-box：.simple { width: 500px; margin: 20px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.fancy { width: 500px; margin: 20px auto; padding: 50px; border: solid blue 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}既然沒有比這更好的方法，一些 CSS 開發(fā)者想要頁面上所有的元素都有如此表現(xiàn)。所以開發(fā)者們把以下 CSS 代碼放在他們頁面上：* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}這樣可以確保所有的元素都會(huì)用這種更直觀的方式排版。box-sizing 是個(gè)很新的屬性，目前你還應(yīng)該像我上面例子中那樣使用 -webkit- 和 -moz- 前綴。這可以啟用特定瀏覽器實(shí)驗(yàn)中的特性。同時(shí)記住它是支持 IE8+ 的。position 屬性。它有一大堆的值，名字還都特抽象，別提有多難記了。讓我們先一個(gè)個(gè)的過一遍，不過你最好還是把這頁放到書簽里。.static { position: static;}static 是默認(rèn)值。任意 position: static 的元素不會(huì)被特殊的定位。一個(gè) static 元素表示它不會(huì)被 positioned，一個(gè) position 屬性被設(shè)置為其他值的元素表示它會(huì)被“positioned”。.relative1 { position: relative;}.relative2 { position: relative; top: -20px; left: 20px; background-color: white; width: 500px;}relative 表現(xiàn)的和 static 一樣，除非你添加了一些額外的屬性。top、right、bottom 和 left 屬性會(huì)使其偏離其正常位置。其他的元素的位置則不會(huì)受該元素的影響發(fā)生位置改變來彌補(bǔ)它偏離后剩下的空隙。relative 一樣，top、right、bottom 和 left 屬性都可用。.fixed { position: fixed; bottom: 0; right: 0; width: 200px; background-color: white;}一個(gè)固定定位元素不會(huì)保留它原本在頁面應(yīng)有的空隙（脫離文檔流）。absolute 是最棘手的 position 值。absolute 與 fixed 的表現(xiàn)類似，但是它不是相對于視窗而是相對于最近的 positioned 祖先元素。如果絕對定位（position 屬性的值為 absolute）的元素沒有 positioned 祖先元素，那么它是相對于文檔的 body 元素，并且它會(huì)隨著頁面滾動(dòng)而移動(dòng)。記住一個(gè) positioned 元素是指 position 值不是 static 的元素。.relative { position: relative; width: 600px; height: 400px;}.absolute { position: absolute; top: 120px; right: 0; width: 300px; height: 200px;}這部分比較難理解，但它是創(chuàng)造優(yōu)秀布局所必需的知識(shí)。下一節(jié)我們會(huì)使用 position 做更具體的例子。.container { position: relative;}nav { position: absolute; left: 0px; width: 200px;}section { /* position is static by default */ margin-left: 200px;}footer { position: fixed; bottom: 0; left: 0; height: 70px; background-color: white; width: 100%;}body { margin-bottom: 120px;}這個(gè)例子在容器比 nav 元素高的時(shí)候可以正常工作。如果容器比 nav 元素低，那么 nav 會(huì)溢出到容器的外面。之后我們會(huì)討論下其他布局技術(shù)，它們都各有優(yōu)劣。img { float: right; margin: 0 0 1em 1em;}clear 屬性被用于控制浮動(dòng)。比較下面兩個(gè)例子：<div class="box">...</div><section>...</section>.box { float: left; width: 200px; height: 100px; margin: 1em;}在這個(gè)例子中， section 元素實(shí)際上是在 div 之后的（譯注：DOM 結(jié)構(gòu)上）。然而 div 元素是浮動(dòng)到左邊的，于是 section 中的文字就圍繞了 div ，并且 section 元素包圍了整個(gè)元素。如果我們想讓 section 顯示在浮動(dòng)元素之后呢？.box { float: left; width: 200px; height: 100px; margin: 1em;}.after-box { clear: left;}使用 clear 我們就可以將這個(gè)段落移動(dòng)到浮動(dòng)元素 div 下面。你需要用 left 值才能清除元素的向左浮動(dòng)。你還可以用 right 或 both 來清除向右浮動(dòng)或同時(shí)清除向左向右浮動(dòng)。img { float: right;}見證奇跡的時(shí)刻到了！有一種比較丑陋的方法可以解決這個(gè)問題，它叫做清除浮動(dòng)（clearfix hack）..clearfix { overflow: auto;}現(xiàn)在再看看發(fā)生了什么：.clearfix { overflow: auto; zoom: 1;}有些獨(dú)特的瀏覽器需要 額外的關(guān)照。清除浮動(dòng)這潭水很深很深[3]，但是這個(gè)簡單的解決方案已經(jīng)可以在今天所有的主要瀏覽器上工作。nav { float: left; width: 200px;}section { margin-left: 200px;}article img { float: right; width: 50%;}你甚至還能同時(shí)使用 min-width 和 max-width 來限制圖片的最大或最小寬度！nav 的內(nèi)容會(huì)以一種不太友好的方式被包裹起來?？偠灾x一種最合適你的內(nèi)容的方式。nav { float: left; width: 25%;}section { margin-left: 25%;}@media (min-width:600px) { nav { float: left; width: 25%; } section { margin-left: 25%; }}@media (max-width:599px) { nav li { display: inline; }}現(xiàn)在我們的布局在移動(dòng)瀏覽器上也顯示的很棒。這里有一些同樣使用了媒體查詢的著名站點(diǎn)[4]。在 MDN 文檔[5]中你還可以學(xué)到更多有關(guān)媒體查詢的知識(shí)。float 是一種選擇，但是使用 inline-block 會(huì)更簡單。讓我們看下使用這兩種方法的例子：.box { float: left; width: 200px; height: 100px; margin: 1em;}.after-box { clear: left;}display 屬性的值 inline-block 來實(shí)現(xiàn)相同效果。.box2 { display: inline-block; width: 200px; height: 100px; margin: 1em;}你得做些額外工作來讓 IE6 和 IE7 支持 inline-block。有些時(shí)候人們談到 inline-block 會(huì)觸發(fā)叫做 hasLayout 的東西，你只需要知道那是用來支持舊瀏覽器的。如果你對此很感興趣，可以在前面那個(gè)鏈接中找到更詳細(xì)的信息。否則我們就繼續(xù)下去吧。inline-block 來布局。有一些事情需要你牢記：nav { display: inline-block; vertical-align: top; width: 25%;}.column { display: inline-block; vertical-align: top; width: 75%;}.three-column { padding: 1em; -moz-column-count: 3; -moz-column-gap: 1em; -webkit-column-count: 3; -webkit-column-gap: 1em; column-count: 3; column-gap: 1em;}CSS columns 是很新的標(biāo)準(zhǔn)，所以你需要使用前綴，并且它不被 IE9 及以下和 Opera Mini[7] 支持。flexbox 布局模式被用來重新定義 CSS 中的布局方式。很遺憾的是最近規(guī)范變動(dòng)過多，導(dǎo)致各個(gè)瀏覽器對它的實(shí)現(xiàn)也有所不同。不過我仍舊想要分享一些例子，來讓你知道即將發(fā)生的改變。這些例子目前只能在支持 flexbox 的 Chrome 瀏覽器中運(yùn)行，基于最新的標(biāo)準(zhǔn)[8]。.container { display: -webkit-flex; display: flex;}nav { width: 200px;}.flex-column { -webkit-flex: 1; flex: 1;}.container { display: -webkit-flex; display: flex;}.initial { -webkit-flex: initial; flex: initial; width: 200px; min-width: 100px;}.none { -webkit-flex: none; flex: none; width: 200px;}.flex1 { -webkit-flex: 1; flex: 1;}.flex2 { -webkit-flex: 2; flex: 2;}.vertical-container { height: 300px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;}CSS 里總算是有了一種簡單的垂直居中布局的方法了！關(guān)鍵詞：布局,設(shè)計(jì)
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
