Html和CSS布局技巧總結(jié)(偶爾回顧回顧布局也是很有必要的)

一僧叉、單列布局

1.水平居中

  • 水平居中的頁(yè)面布局中最為常見的一種布局形式眶俩,多出現(xiàn)于標(biāo)題逻锐,以及內(nèi)容區(qū)域的組織形式恩袱,下面介紹四種實(shí)現(xiàn)水平居中的方法(注:下面各個(gè)實(shí)例中實(shí)現(xiàn)的是child元素的對(duì)齊操作泣棋,child元素的父容器是parent元素)

①使用inline-block 和 text-align實(shí)現(xiàn)

<style>
    .parent{text-align: center;}
    .child{display: inline-block;}
</style>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
通常處理不必要占位空格的寫法:
<style>
    .parent{text-align: center;font-size:0;}
    .child{display: inline-block;font-size:14px;vertical-align: middle;}
</style>

優(yōu)點(diǎn):兼容性好;
不足:需要同時(shí)設(shè)置子元素和父元素畔塔;

②使用margin:0 auto來(lái)實(shí)現(xiàn)

.child{width:200px;margin:0 auto;}

優(yōu)點(diǎn):兼容性好
缺點(diǎn): 需要指定寬度

③使用table實(shí)現(xiàn)

.child{display:table;margin:0 auto;}

優(yōu)點(diǎn):只需要對(duì)自身進(jìn)行設(shè)置
不足:IE6,7需要調(diào)整結(jié)構(gòu)

④使用絕對(duì)定位實(shí)現(xiàn)

.parent{position:relative;}
.child{position:absolute;left:50%;transform:translate(-50%);}
/*或者實(shí)用margin-left的負(fù)值為盒子寬度的一半也可以實(shí)現(xiàn)潭辈,不過(guò)這樣就必須知道盒子的寬度,但兼容性好*/

不足:兼容性差,IE9及以上可用

⑤使用flex布局實(shí)現(xiàn)

/*第一種方法*/
.parent{display:flex;justify-content:center;}
/*第二種方法*/
.parent{display:flex;}
.child{margin:0 auto;}

缺點(diǎn):兼容性差澈吨,如果進(jìn)行大面積的布局可能會(huì)影響效率

2.垂直居中

①vertical-align

  • 我們都知道把敢,每個(gè)人都有不同的嗜好,有的人喜歡吃甜食谅辣,有的人喜歡吃辣的東西修赞,有的人不喜歡吃芹菜,有的人不喜歡吃羊肉等等屈藐。CSS中的有些元素也是這樣榔组,他們有的只對(duì)牛奶感興趣,有的只喜歡吃堅(jiān)果和果凍联逻,而討厭牛奶搓扯。而vertical-align呢,是個(gè)比較挑食的家伙包归,它只喜歡吃果凍锨推,從小吃果凍長(zhǎng)大,沒有了果凍公壤,它就會(huì)鬧脾氣换可,對(duì)你不理不睬。我稱之為“果凍依賴型元素”厦幅,又稱之為“inline-block依賴型元素”沾鳄,也就是說(shuō),只有一個(gè)元素屬于inline或是inline-block(table-cell也可以理解為inline-block水平)水平,其身上的vertical-align屬性才會(huì)起作用确憨。我對(duì)css-vertical-align的一些理解與認(rèn)識(shí)

在使用vertical-align的時(shí)候译荞,由于對(duì)齊的基線是用行高的基線作為標(biāo)記瓤的,故需要設(shè)置line-height或設(shè)置display:table-cell;

/*第一種方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二種方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}

②使用絕對(duì)定位

.parent{position:relative;}
.child{positon:absolute;top:50%;transform:translate(0,-50%);}

③實(shí)用flex實(shí)現(xiàn)

.parent{display:flex;align-items:center;}

3.水平垂直全部居中

①利用vertical-align,text-align,inline-block實(shí)現(xiàn)

.parent{display:table-cell;vertical-align:middle;text-align:center;}

.child{display:inline-block;}

②利用絕對(duì)定位實(shí)現(xiàn)

.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

③利用flex實(shí)現(xiàn)

.parent{display:flex;justify-content:center;align-items:center;}

二、多列布局

1.左列定寬吞歼,右列自適應(yīng)

該布局方式非常常見圈膏,適用于定寬的一側(cè)常為導(dǎo)航,自適應(yīng)的一側(cè)為內(nèi)容的布局

①使用float+margin實(shí)現(xiàn)

.left{float:left;width:100px;}
.right{margin-left:100px;}

注:IE6會(huì)有3px的bug

②使用float+margin(fix)實(shí)現(xiàn)

<div class="parent">
    <div class="left"></div>
    <div class="right-fix">
        <div class="right"></div>
    </div>
</div>
.left{width:100px;float:left;}
.right-fix{width:100%;margin-left:-100px;float:right;}
.right{margin-left:100px;}

③使用float+overflow實(shí)現(xiàn)

.left{width:100px;float:left;}
.right{overflow:hidden;}
overflow:hidden篙骡,觸發(fā)bfc模式稽坤,浮動(dòng)無(wú)法影響,隔離其他元素糯俗,IE6不支持尿褪,左側(cè)left設(shè)置margin-left當(dāng)作left與right之間的邊距,右側(cè)利用overflow:hidden 進(jìn)行形成bfc模式

如果我們需要將兩列設(shè)置為等高叶骨,可以用下述方法將“背景”設(shè)置為等高茫多,其實(shí)并不是內(nèi)容的等高

.left{width:100px;float:left;}
.right{overflow:hidden;}
.parent{overflow:hidden;}
.left,.right{padding-bottom:9999px;margin-bottom:-9999px;}

④使用table實(shí)現(xiàn)

.parent{display:table;table-layout:fixed;width:100%;}
.left{width:100px;}
.right,.left{display:table-cell;}

⑤使用flex實(shí)現(xiàn)

.parent{display:flex;}
.left{width:100px;}
.right{flex:1;}

利用右側(cè)容器的flex:1祈匙,均分了剩余的寬度忽刽,也實(shí)現(xiàn)了同樣的效果。而align-items 默認(rèn)值為stretch夺欲,故二者高度相等

2.右列定寬跪帝,左列自適應(yīng)

①使用float+margin實(shí)現(xiàn)

.parent{background:red;height:100px;margin:0 auto;}
.left{background:green;margin-right:-100px;width:100%;float:left;}
.right{float:right;width:100px;background:blue;}

②使用table實(shí)現(xiàn)

.parent{display:table;table-layout:fixed;width:100%;}
.left{display:table-cell;}
.right{width:100px;display:table-cell;}

③使用flex實(shí)現(xiàn)

.parent{display:flex;}
.left{flex:1;}
.right{width:100px;}

3.兩列定寬,一列自適應(yīng)

圖片描述

基本html結(jié)構(gòu)為父容器為parent,自容器為left,center,right.其中些阅,left,center定寬伞剑,right自適應(yīng)

①使用float+margin實(shí)現(xiàn)

.left,.center{float:left:width:200px;}
.right{margin-left:400px;}

②使用float+overflow實(shí)現(xiàn)

.left,.center{float:left:width:200px;}
.right{overflow:hidden;}

③使用table實(shí)現(xiàn)

.parent{display:table;table-layout:fixed;width:100%;}
.left,.center,.right{display:table-cell;}
.left,.center{width:200px;}

④使用flex實(shí)現(xiàn)

.parent{display:flex;}
.left,.center{width:100px;}
.right{flex:1}

4.兩側(cè)定寬,中欄自適應(yīng)

①使用float+margin實(shí)現(xiàn)

.left{width:100px;float:left;}
.center{float:left;width:100%;margin-right:-200px;}
.right{width:100px;float:right;}

②使用table實(shí)現(xiàn)

.parent{width:100%;display:table;table-layout:fixed}
.left,.center,.right{display:table-cell;}
.left{width:100px;}
.right{width:100px;}

③使用flex實(shí)現(xiàn)

.parent{display:flex;}
.left{width:100px;}
.center{flex:1;}
.right{width:100px;}

5.一列不定寬市埋,一列自適應(yīng)

①使用float+overflow實(shí)現(xiàn)

.left{float:left;}
.right{overflow:hidden;}

②使用table實(shí)現(xiàn)

.parent{display:table;table-layout:fixed;width:100%;}
.left{width:0.1%;}
.left,.right{display:table-cell;}

③使用flex實(shí)現(xiàn)

.parent{display:flex;}
.right{flex:1;}

6.多列等分布局

多列等分布局常出現(xiàn)在內(nèi)容中黎泣,多數(shù)為功能的,同階級(jí)內(nèi)容的并排顯示等缤谎。

html結(jié)構(gòu)如下所示

<div class="parent">
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
</div>

①使用float實(shí)現(xiàn)

.parent{margin-left:-20px}/*假設(shè)列之間的間距為20px*/
.column{float:left;width:25%;padding-left:20px;box-sizing:border-box;}

②使用table實(shí)現(xiàn)

.parent-fix{margin-left:-20px;}
.parent{display:table;table-layout:fixed;width:100%;}
.column{display:table-cell;padding-left:20px;}

③使用flex實(shí)現(xiàn)

.parent{display:flex;}
.column{flex:1;}
.column+.column{margin-left:20px;}

6.九宮格布局

①使用table實(shí)現(xiàn)

<div class="parent">
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
   <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
.parent{display:table;table-layout:fixed;width:100%;}
.row{display:table-row;}
.item{display:table-cell;width:33.3%;height:200px;}

②使用flex實(shí)現(xiàn)

<div class="parent">
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
   <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
.parent{display:flex;flex-direction:column;}
.row{height:100px;display:flex;}
.item{width:100px;background:red;}

7.全屏布局

①使用絕對(duì)定位實(shí)現(xiàn)

<div class="parent">
    <div class="top">top</div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="bottom">bottom</div>
</div>
html,body,parent{height:100%;overflow:hidden;}
.top{position:absolute:top:0;left:0;right:0;height:100px;}
.left{position:absolute;top:100px;left:0;bottom:50px;width:200px;}
.right{position:absolute;overflow:auto;left:200px;right:0;top:100px;bottom:50px;}
.bottom{position:absolute;left:0;right:0;bottom:0;height:50px;}

②使用flex實(shí)現(xiàn)

<div class="parent">
    <div class="top">top</div>
    <div class="middle">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="bottom">bottom</div>
</div>
.parent{display:flex;flex-direction:column;}
.top{height:100px;}
.bottom{height:50px;}
.middle{flex:1;display:flex;}
.left{width:200px;}
.right{flex:1;overflow:auto;}

8.響應(yīng)式布局

meta標(biāo)簽的使用

設(shè)置布局寬度等于設(shè)備寬度抒倚,布局viewport等于度量viewport
<meta name="viewport" content="width=device-width,initial-scale=1">

媒體查詢

HTML 4和CSS 2目前支持為不同的媒體類型設(shè)定專有的樣式表, 比如, 一個(gè)頁(yè)面在屏幕上顯示時(shí)使用無(wú)襯線字體,而在打印時(shí)則使用襯線字體, screen 和 print 是兩種已定義的媒體類型, 媒體查詢讓樣式表有更強(qiáng)的針對(duì)性,擴(kuò)展了媒體類型的功能;媒體查詢由媒體類型和一個(gè)或多個(gè)檢測(cè)媒體特性的條件表達(dá)式組成,媒體查詢中可用于檢測(cè)的媒體特性有width、height和color(等), 使用媒體查詢, 可以在不改變頁(yè)面內(nèi)容的情況下,為特定的一些輸出設(shè)備定制顯示效果坷澡。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末托呕,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子频敛,更是在濱河造成了極大的恐慌项郊,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件斟赚,死亡現(xiàn)場(chǎng)離奇詭異着降,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)拗军,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門任洞,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)厌殉,“玉大人,你說(shuō)我怎么就攤上這事侈咕」保” “怎么了?”我有些...
    開封第一講書人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵耀销,是天一觀的道長(zhǎng)楼眷。 經(jīng)常有香客問(wèn)我,道長(zhǎng)熊尉,這世上最難降的妖魔是什么罐柳? 我笑而不...
    開封第一講書人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮狰住,結(jié)果婚禮上张吉,老公的妹妹穿的比我還像新娘。我一直安慰自己催植,他們只是感情好肮蛹,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著创南,像睡著了一般伦忠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上稿辙,一...
    開封第一講書人閱讀 51,165評(píng)論 1 299
  • 那天昆码,我揣著相機(jī)與錄音,去河邊找鬼邻储。 笑死赋咽,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的吨娜。 我是一名探鬼主播脓匿,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼萌壳!你這毒婦竟也來(lái)了亦镶?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤袱瓮,失蹤者是張志新(化名)和其女友劉穎缤骨,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體尺借,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡绊起,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了燎斩。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片虱歪。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蜂绎,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出笋鄙,到底是詐尸還是另有隱情师枣,我是刑警寧澤,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布萧落,位于F島的核電站践美,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏找岖。R本人自食惡果不足惜陨倡,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望许布。 院中可真熱鬧兴革,春花似錦、人聲如沸蜜唾。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)灵妨。三九已至解阅,卻和暖如春落竹,著一層夾襖步出監(jiān)牢的瞬間泌霍,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工述召, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留朱转,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓积暖,卻偏偏與公主長(zhǎng)得像藤为,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子夺刑,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見瀏覽器兼容性問(wèn)題與解決方案缅疟? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,748評(píng)論 1 92
  • H5移動(dòng)端知識(shí)點(diǎn)總結(jié) 閱讀目錄 移動(dòng)開發(fā)基本知識(shí)點(diǎn) calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,488評(píng)論 0 26
  • 移動(dòng)開發(fā)基本知識(shí)點(diǎn) 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,466評(píng)論 0 6
  • 前言 溫馨提示:本文較長(zhǎng),圖片較多遍愿,本來(lái)是想寫一篇 CSS 布局方式的存淫,但是奈何 CSS 布局方式種類太多并且實(shí)現(xiàn)...
    sunshine小小倩閱讀 3,137評(píng)論 0 59
  • 胡言亂語(yǔ)模式開啟。今天學(xué)習(xí)一下曦曦的記錄風(fēng)格沼填。此刻天空是褐黃色的桅咆。在昨天看了一孟爺爺主持的節(jié)目以后笑得哈哈哈睡不著...
    白藜蘆醇閱讀 151評(píng)論 2 0