HTML和CSS實現常見的前耑開發布局

字號+ 編輯: Snake 修訂: 小红帽 來源: 兴趣部落 2023-09-06 我要說兩句(0)

水平居中的頁面布局中最爲常見的一種布局形式,多出現於標題,以及内容區域的組織形式,下面介紹四種實現水平居中的方法

水平居中

水平居中的頁面布局中最爲常見的一種布局形式,多出現於標題,以及内容區域的組織形式,下面介紹四種實現水平居中的方法(注:下面各個實例中實現的是child元素的對齊操作,child元素的父容器是parent元素)

ine-block 和 text-align實現

.parent{text-align: center;}
.child{display: inline-block;}

優點:兼容性好;不足:需要同時設置子元素和父元素

使用margin:0 auto來實現

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

優點:兼容性好缺點: 需要指定寬度

使用table實現

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

優點:只需要對自身進行設置不足:IE6,7需要調整結構

使用絕對定位實現

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

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

實用flex布局實現

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

缺點:兼容性差,如果進行大面積的布局可能會影響效率

垂直居中

vertical-align

我們都知道,每個人都有不同的嗜好,有的人喜歡吃甜食,有的人喜歡吃辣的東西,有的人不喜歡吃芹菜,有的人不喜歡吃羊肉等等。CSS中的有些元素也是這樣,他們有的只對牛嬭感興趣,有的只喜歡吃堅果和果凍,而討厭牛嬭。而vertical-align呢,是個比較挑食的家夥,它只喜歡吃果凍,從小吃果凍長大,沒有了果凍,它就會閙脾氣,對你不理不睬。我稱之爲“果凍依賴型元素”,又稱之爲“inline-block依賴型元素”,也就是說,只有一個元素屬於inline或是inline-block(table-cell也可以理解爲inline-block水平)水平,其身上的vertical-align屬性才會起作用。

在使用vertical-align的時候,由於對齊的基線是用行高的基線作爲標記,故需要設置line-height或設置display:table-cell;

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

實用絕對定位

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

實用flex實現

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

水平垂直全部居中

利用vertical-align,text-align,inline-block實現

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

利用絕對定位實現


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

利用flex實現

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

多列布局

左列定寬,右列自適應

該布局方式非常常見,適用於定寬的一側常爲導航,自適應的一側爲内容的布局

5.jpg

利用float+margin實現

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

注:IE6會有3px的bug

利用float+margin(fix)實現

1.jpg

<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實現

.left{
    width:100px;float:left;
}
.right{
    overflow:hidden;
}

overflow:hidden,觸發bfc模式,浮動無法影響,隔離其他元素,IE6不支持,左側left設置margin-left當作left與right之間的邊距,右側利用overflow:hidden 進行形成bfc模式如果我們需要將兩列設置爲等高,可以用下述方法將“背景”設置爲等高,其實並不是内容的等高

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

使用table實現

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

實用flex實現

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

利用右側容器的flex:1,均分了剩餘的寬度,也實現了同樣的效果。而align-items 默認值爲stretch,故二者高度相等

右列定寬,左列自適應

實用float+margin實現

.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實現

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

實用flex實現

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

兩列定寬,一列自適應

3.jpg

基本html結構爲父容器爲parent,自容器爲left,center,right.其中,left,center定寬,right自適應

利用float+margin實現

.left,.center{
    float:left:width:200px;
}
.right{margin-left:400px;}
利用float+overflow實現
.left,.center{
    float:left:width:200px;
}
.right{overflow:hidden;}

利用table實現

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

利用flex實現

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

兩側定寬,中欄自適應

4.jpg

利用float+margin實現

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

利用table實現

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

利用flex實現

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

一列不定寬,一列自適應

2.jpg

利用float+overflow實現

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

利用table實現

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

利用flex實現

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

多列等分布局

多列等分布局常出現在内容中,多數爲功能的,同階級内容的並排顯示等。

html結構如下所示

<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實現

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

利用table實現

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

利用flex實現

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

九宮格布局

使用table實現

<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實現

<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;
}

全屏布局

利用絕對定位實現

<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實現

<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;}

響應式布局

meta標簽的實用

設置布局寬度等於設備寬度,布局viewport等於度量viewport

<meta name="viewport" content="width=device-width,initial-scale=1">

媒體查詢

HTML 4和CSS 2目前支持爲不同的媒體類型設定專有的樣式表, 比如, 一個頁面在屏幕上顯示時使用無襯線字體, 而在列印時則使用襯線字體, screen 和 print 是兩種已定義的媒體類型, 媒體查詢讓樣式表有更強的針對性, 擴展了媒體類型的功能;媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成, 媒體查詢中可用於檢測的媒體特性有width、height和color(等), 使用媒體查詢, 可以在不改變頁面内容的情況下, 爲特定的一些輸出設備定制顯示效果。

語法

@media screen and (max-width:960px){....}
<link rel="stylesheet" media="screen and (max-width:960px)" href="xxx" />
閲完此文,您的感想如何?
  • 有用

    0

  • 沒用

    0

  • 開心

    0

  • 憤怒

    0

  • 可憐

    0

1.如文章侵犯了您的版權,請發郵件通知本站,該文章將在24小時内刪除;
2.本站標注原創的文章,轉發時煩請注明來源;
3.交流群: 2702237 13835667

相關課文
  • 上傳自定義文档的時候查如何填寫上傳表單中的access, mimeType等字段值

  • HTML5+CSS3——第6章 HTML5表單標簽,與瀏覽者交互

  • HTML5+CSS3——第5章 HTML5圖片、鏈接及表格標簽

  • HTML5+CSS3——第4章 HTML5列表標簽

我要說說
網上賓友點評