如何用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-- 测量文字宽度