頁面架構-佈局

時間  2019-12-10
標籤 頁面 架構 佈局 欄目 系統架構 简体版
原文   原文鏈接

1 CSS Reset

1.1 CSS Reset方法和應用

爲何要Reset CSS

IE/Chrome/FireFox/Opero/Sefari,每種瀏覽器對不一樣的HTML標籤有不一樣的初始樣式設定。而若是咱們的網站要在不一樣的瀏覽器上保持一樣的樣式，最好的辦法就是統一這些設定。css

好比：要設定一個<h3>元素的樣式,開發者就須要以下的操做；html

/* h3元素 */
<th class="m-article">
    <h3>標題</h3>
</th>

//瀏覽器默認的樣式以下
th{
    font-weight: bold;
}
h3{
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

//開發者須要在CSS中的設定
.m-article h3{
    font-size: 16px;
    margin: 0;
    font-weight: normal;
}

如何進行CSS Reset

逐條重設法

也就是上面用的reset方法，在每一個須要reset的CSS語句中進行歸零設置；可是這樣作，就大大增長了開發者的工做，同時大量的重設代碼會影響網站的性能。web

Reset.css

在一個CSS文件中，把全部的HTML標籤的樣式都進行統一初始設定，這樣一個文件引入到HTML文件中後(<link rel"stylesheet" type="text/css" href="reset.css">)，就可以把不一樣瀏覽器的各自初始設定替換爲Reset.css的統一初始設定；而後在Reset.css的基礎上開發的網站應用，在不一樣的瀏覽器上有相同的樣式了，同時減輕了開發者的工做量。瀏覽器

html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,fotter,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
precode,kbd,samp{font-family:inherit;}
q:brfore,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,simsun;color:#333;outline:0;}

本質和使用

  • 不一樣的軟件、產品都是不同的設置，因此須要因產品因時而對reset文件進行修改，而後使用；
  • 如何使用：
    • 在項目初期就進行定好默認樣式；
    • 在link的第一位就引出reset.css樣式表；
      • <link rel="stylesheet" href="reset.css"/>
      • 或者把Reset代碼，放在項目CSS樣式表的最上面；

2 佈局解決方案

2.1 居中佈局

水平居中

inline-block + text-align

  • 優勢：兼容性好
  • 缺點：child中的文字會繼承text-align:center
/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

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

table + margin

  • 優勢：只須要對child近些設置（由於table原本就是inline-block?）
  • 缺點：
/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

/* css */
.child{display: table;margin: 0 auto;}

relative + absolute + transform

  • 優勢： 子元素脫離文檔流
  • 缺點： 不能兼容IE678
/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

/* css */
.parent{position: relative;}
.child{position: absolute;left: 50%;transform: translateX(-50%);}

/* 備註：.parent在relative以後，必需要設置高度，纔能有背景顏色、margin等值的顯示 */

flex + justify-content

  • 優勢： 只須要設置父元素
  • 缺點： 不支持IE678
/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

/* css1 */
.parent{display: flex;justify-content: center;}

/* css2 */
.parent{display: flex;}
.child{margin: 0 auto;}

垂直居中（bs:子容器和父容器的高度都不肯定）

table-cell + vertical-align

  • 優勢： 兼容性比較好
/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

/* css */
.parent{display: table-cell; vertical-align: middle;}

absolute + transform

  • 優勢： 子元素不干擾其餘元素
  • 缺點： 兼容性很差
/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

/* CSS */
.parent{position: relative;}
.child{position: absolute; top: 50%; transform: translateY(-50%);}

flex + align-items

  • 優勢： 只須要設置父元素
  • 缺點： 只有高版本的瀏覽器支持
/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

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

水平和垂直都居中

inline-block + text-align + table-cell + vertical-align

  • 優勢： 兼容性好
/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

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

absolute + transform

  • 優勢： 子元素不干擾其餘元素
/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

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

flex + justify-content + align-items

  • 優勢： 只須要設置父元素
/* html */
<div class="parent">
    <div class="child">DEMO</div>
</div>

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

作方案的思路

  • 要熟練掌握CSS相關的屬性和值的特性；
  • 對問題進行分解，分佈解決；

2.2 多列布局

一列定寬一列自適應

float + margin

  • 優勢： 容易理解
  • 缺點： IE6支持有問題哦
/* html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

/* css */
.left{float: left; width: 100px;}
.right{margin-left: 120px;}

float + margin + (fix)

  • 優勢： 兼容性好
  • 缺點： 多了一個結構
/* html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right-fix">
        <div class="right">
            <p>right</p><p>right</p>
        </div>
    </div>
</div>

/* css */
.left{float: left; width: 100px; position: relative;}
.right-fix{width: 100%; margin-left: -100px; float: right;}
.right{margin-left: 120px;}

float + overflow

  • 優勢： 簡單
  • 缺點： 不支持IE6
/* html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

/* css */
.left{width: 100px; float: left; margin-right: 20px;}
.right{overflow: hidden;}

table

  • 缺點： 代碼多
/* html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

/* css */
.parent{display: table; width: 100%; table-layout: fixed;}
.right,.left{display: table-cell;}
.left{width: 100px; padding-right: 20px;}

flex

  • 缺點： 低版本不兼容、可能性能會有影響，不適合複雜的佈局
/* html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

/* css */
.parent{display: flex;}
.left{width: 100px; margin-right: 20px;}
.right{flex: 1;}

兩列定寬，一列自適應

float + overflow: hidden

/* html */
<div class="parent">
    <div class="left>
        <p>left</p>
    </div>
    <div class="middle">
        <p>middle</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

/* css */
.left,.middle{width: 100px; float: left; margin-right: 20px;}
.right{overflow: hidden;}

等分佈局 C + G = (W+G)*N

float

  • 優勢： 兼容IE67
  • 缺點： 不靈活
/* html */
<div class="parent">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>
</div>

/* css */
.parent{margin-left: -20px;}
.column{width: 25%; padding-left: 20px; float: left; box-sizing: border-box;}

table

  • 優勢： 靈活
  • 缺點： 多了一個結構
/* html */
<div class="parent-fix">
    <div class="parent">
        <div class="column"><p>1</p></div>
        <div class="column"><p>2</p></div>
        <div class="column"><p>3</p></div>
        <div class="column"><p>4</p></div>
    </div>
</div>

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

flex

  • 優勢： 簡潔、靈活
  • 缺點： 兼容性問題
/* html */
<div class="parent">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>
</div>

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

一列定寬，另外一列自適應，兩列高度自適應

table

/* html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

/* css */
.parent{display: table; width: 100%; table-layout: fixed;}
.left,.right{display: table-cell;}
.left{width: 100px; padding-right: 20px;}

/* 備註：上面的方案貌似，並不能兩行分開呀！*/

/* html2 */
<div class="parent pbox p20">
    <div class="left thec l20">
        <p class="thep">left</p>
    </div>
    <div class="mi m20"></div>
    <div class="right thec r20">
        <p class="thep">right</p>
        <p class="thep">right</p>
    </div>
</div>

/* css2 */
.p20{display: table; width: 100%; table-layout: fixed;}
.r20,.m20,.l20{display: table-cell;}
.m20{width: 20px;}
.l20{width: 100px;box-sizing: content-box;}

flex

/* html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

/* css */
.parent{display: flex;}
.left{width: 100px; margin-right: 20px;}
.right{flex: 1;}

float

  • 優勢： 兼容性好
/* html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

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

2.3 全屏佈局（通常用在信息展現、監控平臺上）

特色： 充滿瀏覽器窗口，滾動條只出如今內容區域；ide

需求一： 整頁總體自適應；頭部、尾部、側邊欄定寬度（px）；內容區自適應；

position

注： IE6如下不支持佈局

/* html */
<div class="parent">
    <div class="top">top</div>
    <div class="left">left</div>
    <div class="right">
        <div class="inner">right</div>
    </div>
    <div class="bottom">bottom</div>
</div>

/* css */
html,body,.parent{height: 100%; overflow: hidden;}
.top{position: absolute; top: 0; left: 0; right: 0; height: 100px;}
.left{position: absolute; left: 0; top: 100px; 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;}
.right .inner{min-height: 1000px;}

flex

注： IE9如下不支持性能

/* html */
<div class="parent">
    <div class="top">top</div>
    <div class="middle">
        <div class="left">left</div>
        <div class="right">
            <div class="inner">right</div>
        </div>
    </div>
    <div class="bottom">bottom</div>
</div>

/* css */
html,body,.parent{height: 100%; overflow: hidden;}
.parent{display: fex; flex-direction: column;}
.top{height: 100px;}
.bottom{height: 50px;}
.middle{flex:1; display: flex;}
.left{width: 200px;}
.right{flex: 1; overflow: auto;}
.right .inner{min-height: 1000px;}

需求二：整頁總體自適應；頭部、尾部、側邊欄定寬度（%）；內容區自適應；

position

/* html */
<div class="parent">
    <div class="top">top</div>
    <div class="left">left</div>
    <div class="right">
        <div class="inner">right</div>
    </div>
    <div class="bottom">bottom</div>
</div>

/* css */
html,body,.parent{height: 100%; overflow: hidden;}
.top{position: absolute; top: 0; left: 0; right: 0; height: 10%;}
.left{position: absolute; left: 0; top: 10%; bottom: 5%; width: 20%;}
.right{position: absolute; overflow: hidden; left: 20%; right: 0; top: 10%; bottom: 5%;}
.bottom{position: absolute; left: 0; right: 0; bottom: 0; height: 5%;}
.right .inner{min-height:1000px;}

flex

/* html */
<div class="parent">
    <div class="top">top</div>
    <div class="middle">
        <div class="left">left</div>
        <div class="right">
            <div class="inner">right</div>
        </div>
    </div>
    <div class="bottom">bottom</div>
</div>

/* css */
html,body,.parent{height: 100%; overflow: hidden;}
.parent{display: flex; flex-direction: column;}
.top{height: 10%;}
.middle{flex: 1; display: flex;}
.left{width: 20%;}
.right{flex: 1; overflow: auto;}
.right .inner{min-height: 1000px;}

需求三：整頁總體自適應；頭部、尾部、側邊欄自適應（內容）；內容區自適應；

分析：position沒法使用，只能用flex/Gridflex

flex

/* html */
<div class="parent">
    <div class="top">top</div>
    <div class="middle">
        <div class="left">left</div>
        <div class="right">
            <div class="inner">right</div>
        </div>
    </div>
    <div class="bottom">bottom</div>
</div>

/* css */
html,body,.parent{height: 100%; overflow: hidden;}
.parent{display: flex; flex-direction: column;}
.middle{flex: 1; display: flex;}
.right{flex: 1; overflow: auto;}
.right .inner{min-height: 1000px;}

2.4 響應式佈局

需求： 知足多設備的瀏覽要求網站

  • 優勢： 節約成本
  • 缺點： 有些內容會被省略
/* viewport */
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

/* @media */
@media screen and (max-width: 320px){/* 視窗寬度<=320px */}
@meida screen and (min-width: 769px){/* 視窗寬度>=769px */}
@media screen and (min-width: 769px) and (max-width: 1000px){/* 769px < 視窗寬度 < 1000px}

/* 案例：html */
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

/* 案例：css */
.left{float: left; width: 100px; margin-right: 20px;}
.right{overflow: hidden;}
@media screen and (max-width: 320px){
    .left{float: none; width: auto; margin-right: 0; margin-bottom: 20px;}
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程