如何用CSS快速布局（一）—— 布局元素详细
要快速進(jìn)行網(wǎng)頁排版布局，則必須對(duì)布局的元素有清晰的了解，才不會(huì)總是在細(xì)節(jié)處出錯(cuò)。這一篇先詳解有關(guān)布局的因素作為布局基礎(chǔ)：塊級(jí)元素and內(nèi)聯(lián)元素、盒模型、準(zhǔn)確定位、元素對(duì)齊、樣式繼承。下一篇?jiǎng)t重點(diǎn)描述快速布局思路。
一、什么是塊級(jí)元素和內(nèi)聯(lián)元素
1，塊級(jí)元素：
display:block表現(xiàn)出來的特點(diǎn)是折行的，?一般來說可以包含塊級(jí)元素和內(nèi)聯(lián)元素； 例外： P 元素，只能包含內(nèi)聯(lián)元素，而不能包含塊級(jí)元素。 "form"這個(gè)塊元素比較特殊，它只能用來容納其他塊元素。2，內(nèi)聯(lián)元素：
display:inline表現(xiàn)出來是不換行的，內(nèi)部只能包含內(nèi)聯(lián)元素。 像“span”這樣的行內(nèi)元素，沒有自己的獨(dú)立空間，它是依附于其他塊級(jí)元素存在的，因此，對(duì)行內(nèi)元素設(shè)置高度、寬度、內(nèi)外邊距等屬性，都是無效的。 其實(shí)你需要知道的行內(nèi)元素就是 span 和 a?3，浮動(dòng)元素自動(dòng)設(shè)置為"block"元素
不管是block還是inline定義了浮動(dòng)之后,可以定義高度,寬度. <a>正常情況下是不能定義高度的。寬度倒是可以定義，但是對(duì)鼠標(biāo)有反應(yīng)的只有文字部分 如果加上float:left的話，能定義高寬，整塊對(duì)鼠標(biāo)有反應(yīng) 但是 它是橫向菜單， 設(shè)置display:inline;這個(gè)屬性能夠修復(fù)著名的IE雙倍浮動(dòng)邊界問題。↓（貌似這個(gè)問題只存在于IE6？） http://www.zzzszy.com/a/2016/0927/896160.html| 塊元素(block element) | 內(nèi)聯(lián)元素(inline element) |
| * address - 地址 * blockquote - 塊引用 * center - 舉中對(duì)齊塊 * dir - 目錄列表 * div - 常用塊級(jí)容易，也是css layout的主要標(biāo)簽 * dl - 定義列表 * fieldset - form控制組 * form- 交互表單 * h1 - 大標(biāo)題 * h2 - 副標(biāo)題 * h3 - 3級(jí)標(biāo)題 * h4 - 4級(jí)標(biāo)題 * h5 - 5級(jí)標(biāo)題 * h6 - 6級(jí)標(biāo)題 * hr - 水平分隔線 * isindex - input prompt * menu - 菜單列表 * noframes - frames可選內(nèi)容，（對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容 * noscript - ）可選腳本內(nèi)容（對(duì)于不支持script的瀏覽器顯示此內(nèi)容） * ol - 排序表單 * p - 段落 * pre - 格式化文本 * table - 表格 * ul - 非排序列表 | * a - 錨點(diǎn) * abbr - 縮寫 * acronym - 首字 * b - 粗體(不推薦) * bdo - bidi override * big - 大字體 * br - 換行 * cite - 引用 * code - 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要) * dfn - 定義字段 * em - 強(qiáng)調(diào) * font - 字體設(shè)定(不推薦) * i - 斜體 * img - 圖片 * input - 輸入框 * kbd - 定義鍵盤文本 * label - 表格標(biāo)簽 * q - 短引用 * s - 中劃線(不推薦) * samp - 定義范例計(jì)算機(jī)代碼 * select - 項(xiàng)目選擇 * small - 小字體文本 * span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊 * strike - 中劃線 * strong - 粗體強(qiáng)調(diào) * sub - 下標(biāo) * sup - 上標(biāo) * textarea - 多行文本輸入框 * tt - 電傳文本 * u - 下劃線 * var - 定義變量 |
4，可變?cè)?/strong>
可變?cè)貫楦鶕?jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。 * applet - java applet * button - 按鈕 * del - 刪除文本 * iframe - inline frame * ins - 插入的文本 * map - 圖片區(qū)塊(map) * object - object對(duì)象 * script - 客戶端腳本5，display:inline-block；
維持塊級(jí)元素可設(shè)置寬高，但又能像內(nèi)聯(lián)元素一樣和其他內(nèi)聯(lián)元素置于一行。
?
二、盒模型
?
?
三、如何定位——相對(duì)定位、絕對(duì)定位、浮動(dòng)
相對(duì)定位：指相對(duì)于文檔流中的其他已定義的元素位置進(jìn)行定位。
static（默認(rèn)值）：如果使用默認(rèn)值，在CSS中為元素定義的top,left,right,bottom.z-index都不會(huì)生效。 relative：相對(duì)元素本身進(jìn)行移動(dòng)。絕對(duì)定位：會(huì)脫離正常的文檔流，不再占據(jù)空間。
absolute：相對(duì)一個(gè)不為static的父元素進(jìn)行絕對(duì)定位，如果不指定父元素的position，absolute將相對(duì)整個(gè)html文檔進(jìn)行絕對(duì)定位。會(huì)優(yōu)先顯示于正常文檔流定位元素以及float元素。 fixed：相對(duì)瀏覽器窗口進(jìn)行定位，不論網(wǎng)頁如何滾動(dòng)，該元素始終停留在屏幕的某個(gè)位置上。浮動(dòng)：float
脫離文檔流——相對(duì)父元素大小調(diào)整位置。如果父元素寬度為100，兩個(gè)子元素寬度分別為200，則依舊顯示為上下層次，而不是左右。 外盒子——會(huì)優(yōu)先顯示于正常文檔流定位元素。內(nèi)盒子——弱于塊級(jí)元素，強(qiáng)于內(nèi)聯(lián)元素?
重點(diǎn)！定位元素與文檔流顯示關(guān)系
1，正常文檔流之間的內(nèi)外部盒子顯示關(guān)系：
代碼結(jié)構(gòu)如下（粗略展示） <div>黃色塊正方形<div>紅色塊</div><div>紅色塊</div> </div> <div>藍(lán)色塊正方形</div>黃色和藍(lán)色為外部文檔流，紅色的為黃色塊的兩個(gè)內(nèi)部文檔流。 外部盒子為外部文檔流，內(nèi)部盒子有自己的文檔流，互不干擾，但（非自身父元素的）外部文檔流會(huì)優(yōu)先顯示于內(nèi)部文檔流。
?
2，內(nèi)部盒子浮動(dòng)元素和內(nèi)部文檔流元素關(guān)系：
- 內(nèi)聯(lián)元素和浮動(dòng)元素的優(yōu)先級(jí)：
正常文檔流中，<a>內(nèi)聯(lián)元素和塊級(jí)元素各占一行。
然而當(dāng)設(shè)置為浮動(dòng)元素后，文檔流內(nèi)聯(lián)元素讓位于浮動(dòng)元素（<a>先后于<div>定義結(jié)果一樣）。如下： 還會(huì)出現(xiàn)文字包繞現(xiàn)象：- ?塊級(jí)元素和浮動(dòng)元素優(yōu)先級(jí)
3，內(nèi)部盒子浮動(dòng)元素和外部文檔流內(nèi)部元素關(guān)系：
浮動(dòng)元素覆蓋外部文檔流元素，但不占據(jù)空間。 綠色塊和圖片是藍(lán)色塊的內(nèi)部元素，可見，塊級(jí)元素照正常文檔流顯示，但內(nèi)聯(lián)元素img還是會(huì)讓步于浮動(dòng)元素，即使是外部文檔流的浮動(dòng)元素。?
4，兄弟元素絕對(duì)定位和浮動(dòng)的優(yōu)先關(guān)系
藍(lán)色塊為黃色內(nèi)部塊的absolute定位元素，且先于紅色塊設(shè)置div。紅色塊為Float定位元素，被absolute覆蓋。5，絕對(duì)定位和文檔流元素的優(yōu)先關(guān)系&相對(duì)定位元素的優(yōu)先關(guān)系
絕對(duì)定位position：absolute。 1，相對(duì)一個(gè)不為static的父元素進(jìn)行絕對(duì)定位，如果不指定父元素的position，absolute將相對(duì)整個(gè)html文檔進(jìn)行絕對(duì)定位。 2，如果沒有設(shè)置top\left\bottom\right，則其頂端和左側(cè)將與原文檔流位置一致（即跟沒有設(shè)置position一樣），但又會(huì)覆蓋掉外部文檔流內(nèi)部浮動(dòng)元素多出部分。 下圖為藍(lán)色塊設(shè)置position:absolute; （注：黃色塊（內(nèi)含紅色和綠色子元素）和藍(lán)色塊（內(nèi)含綠色子元素）是兄弟元素） 調(diào)換下順序，藍(lán)色塊首先設(shè)置div，position為absolute。黃色塊沒設(shè)置position，即默認(rèn)static。因?yàn)槊撾x了文檔流，absolute元素優(yōu)先顯示。 設(shè)置黃色塊position為relative，黃色塊覆蓋絕對(duì)定位元素。即當(dāng)相對(duì)定位元素后于絕對(duì)定位元素定位時(shí)，相對(duì)定位元素優(yōu)先顯示。?
總結(jié)：
1，正常文檔流下，外部盒子優(yōu)先顯示于先定義元素的內(nèi)盒子（如果超出會(huì)被覆蓋）。塊級(jí)元素和內(nèi)聯(lián)元素不會(huì)在同一行。
? ??
2，對(duì)內(nèi)外部文檔流，浮動(dòng)元素脫離文檔流，對(duì)于先定義的元素按正常文檔流顯示（讓位塊級(jí)，擠開內(nèi)聯(lián)），對(duì)后定義的元素不造成布局影響，但卻影響正常文檔流的內(nèi)聯(lián)元素展示，表現(xiàn)為內(nèi)聯(lián)元素依舊會(huì)被浮動(dòng)元素“擠開”（不論哪里的內(nèi)聯(lián)元素，都不會(huì)被覆蓋在浮動(dòng)元素之下）
? ??
3，絕對(duì)定位元素優(yōu)先顯示于浮動(dòng)元素。
? ??
4，不設(shè)置具體值的絕對(duì)定位元素會(huì)按正常文檔流排列，但脫離文檔流，不對(duì)后定義元素造成影響。
? ??
5，如果兄弟元素設(shè)置了position:relative；當(dāng)先于絕對(duì)定位元素定義時(shí)，絕對(duì)定位元素優(yōu)先顯示于相對(duì)定位元素。
當(dāng)后于絕對(duì)定位元素定義時(shí)，相對(duì)定位元素優(yōu)先顯示于絕對(duì)定位元素。
? ? ?
?
四、如何居中對(duì)齊
?水平居中：
1.實(shí)現(xiàn)行內(nèi)元素的居中。方法：在行內(nèi)元素外面的塊元素的樣式中添加：text-align:center;
2.實(shí)現(xiàn)塊級(jí)元素的水平居中。
方法一：margin:0 auto;
?注意：如果塊級(jí)元素是body的直接子元素，不設(shè)置寬，則默認(rèn)100%，看不出效果；不設(shè)置高，且div中沒有內(nèi)容，則高度默認(rèn)為0。因此，一定要同時(shí)設(shè)置塊級(jí)元素的寬和高，這樣才能看出來效果。對(duì)于在一個(gè)div中的另一個(gè)div希望居中，也可以使用這個(gè)方式，因?yàn)檫@時(shí)的margin是相對(duì)于其父元素而言的。
方法二：使用絕對(duì)定位和負(fù)邊距。
position:absolute;
left:50%; ? ? ? ? ? ? ? ? ——相對(duì)于父元素向左移動(dòng)50%寬度
margin-left:-50px; ? ?——移回自身寬度的一半
?
垂直居中
1.行內(nèi)元素的垂直居中
方法一：讓字體垂直居中，line-height設(shè)置為父元素高度。
方法二：設(shè)置padding讓其垂直居中。
? ?方法三：父元素設(shè)置line-height，行內(nèi)元素設(shè)置vertical-align:middle。
?
2.塊級(jí)元素的垂直居中。
?方法一：使用絕對(duì)定位和負(fù)邊距。
? 方法二：在父元素中添加display:flex;align-items:center;即可實(shí)現(xiàn)豎直居中。
?
實(shí)現(xiàn)水平和垂直居中
方法一：使用絕對(duì)定位和負(fù)邊距
方法二：使用display：flex
在父元素的樣式中添加display：flex；align-items:center實(shí)現(xiàn)豎直居中，justify-content:center;實(shí)現(xiàn)水平居中。
方法三：同樣使用display:flex.在父元素中設(shè)置display:flex;在子元素中設(shè)置margin：auto。
方法四：使用css3屬性——translate()變形函數(shù)
position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);
參考文章：css居中那點(diǎn)事兒
?
?
五、關(guān)于樣式繼承
盒模型樣式是不可繼承的，例如width、height（寬高）、border（邊框）、margin（邊距）、padding（補(bǔ)白）和背景等 vertical-align不可繼承 可繼承屬性 color?? cursor?? direction?? font?? letter-spacing?? line-height?? list-style?? text-align?? text-indent?? text-shadow?? text-transform?? whitewhite-space?? word-break??? word-spacing?? word-wrap??? writing-mode???》轉(zhuǎn)載
轉(zhuǎn)載于:https://www.cnblogs.com/wenJiaQi/p/6329632.html
總結(jié)
以上是生活随笔為你收集整理的如何用CSS快速布局（一）—— 布局元素详细的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我是谁是谁唱的啊？
- 下一篇： TextView-- 测量文字宽度