前端技術-布局解決方案

本文轉載自查看原文 2015-08-24 01:07 3596 等列布局/ 布局解決方案/ Front-end technology series/ 居中布局/ 多列布局

前端技術-布局解決方案

一、居中布局

1.水平居中

行內元素
如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center 來實現的。

定寬塊狀元素
當被設置元素為塊狀元素時用 text-align：center 就不起作用了。滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現居中的。

.center{   
    margin:0 auto;   
    width:300px;   
    height:200px;   
}

不定寬塊狀元素

①inline-block + text-align

inline-block：ie6、i7不兼容；ie6、i7下可用inline，zoom=1模擬inline-block；

缺點：child中的元素都居中，在child中使用text-align：left。

②table + margin

ie6/7不兼容display：table；可將結構換成table，例如：

③absolute + transform

ie9以上兼容，適合移動端。

④flex + justify-content

ie9以上兼容，適合移動端。

也可以

⑤float + position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent{float:left;position:relative;left:50%;}
        .child{position:relative;left:-50%;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">DEMO</div>
    </div>
</body>
</html>

2.垂直居中

在表單元格中，vertical-align屬性會設置單元格內容的對齊方式

vertical-align:middle;

定寬塊狀元素

單行文本：垂直居中的方法是通過設置父元素的 height 和 line-height 高度一致來實現的

height:100px;
line-height: 100px;

不定寬塊狀元素

①table-cell + vertical-align

ie6/7不兼容display：table；可將結構換成table。

②absolute + transform

ie9以上兼容，適合移動端。

③felx + align-items

ie9以上兼容，適合移動端。

3.水平、垂直居中

定寬塊狀元素

.center{ 
   width:300px;  
   height:200px;  
   position:absolute;  
   left:50%;  
   top:50%;  
   margin:-100px 0 0 -150px 
}

這種方法，要讓DIV水平和垂直居中，必需知道該DIV得寬度和高度，然后設置位置為絕對位置，距離頁面窗口左邊框和上邊框的距離設置為50%，這個50%就是指頁面窗口的寬度和高度的50%，最后將該DIV分別左移和上移，左移和上移的大小就是該DIV寬度和高度的一半。

不定寬塊狀元素

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

兼容性較好。

②absolute + transform

ie9以上兼容，適合移動端。

③felx + justify-content + align-items

ie9以上兼容，適合移動端。

4.js實現水平、垂直居中

原理就是通過js設置DIV的CSS，獲取DIV的左、上的邊距偏移量，邊距偏移量的算法就是用頁面窗口的寬度減去該DIV得寬度，得到的值再除以2即左偏移量，右偏移量算法相同。注意DIV的CSS設置要在resize()方法中完成，就是每次改變窗口大小時，都要執行設置DIV的CSS，以jquery為例，代碼如下：

$(window).resize(function(){ 
    $(".mydiv").css({ 
        position: "absolute", 
        left: ($(window).width() - $(".mydiv").outerWidth())/2, 
        top: ($(window).height() - $(".mydiv").outerHeight())/2 
    });        
});

此外在頁面載入時，就需要調用resize()。

$(function(){ 
    $(window).resize(); 
});

知識學習：
display

	行內元素（inline element）	塊級元素(block element)
特點	①不占據一整行，隨內容而定，有以下特點： ②不可以設置寬高，也不可以設置行高，其寬度隨着內容增加，高度隨字體大小而改變。 ③內聯元素可以設置外邊界，但是外邊界不對上下起作用，只能對左右起作用。 ④也可以設置內邊界，但是內邊界在ie6中不對上下起作用，只能對左右起作用。	①總是在新行上開始，占據一整行； ②高度，行高以及外邊距和內邊距都可控制； ③寬帶始終是與瀏覽器寬度一樣，與內容無關； ④它可以容納內聯元素和其他塊元素。
常用標簽	a - 錨點，b - 粗體(不推薦)，br - 換行，em - 強調，font - 字體設定(不推薦)，i - 斜體，img - 圖片，input - 輸入框，label - 表格標簽，select - 項目選擇，small - 小字體文本，span - 常用內聯容器，定義文本內區塊，strike - 中划線，strong - 粗體強調	div -最常用的塊級元素，dl - 和dt dd搭配使用的塊級元素，form - 交互表單，h1 - 大標題，hr - 水平分隔線，ol - 排序表單，p - 段落，ul - 非排序列表

互相轉換：使用display設置可以使得行內元素擁有塊級元素的特性，反之也可以。

在css中，所有的元素都有盒模型，打開chrome審查任何一個網頁的元素都會看到一個盒模型。

Position

用Div+CSS進行網站布局時，做一些浮動層等特殊特殊效果時要考慮到定位問題。這就要用到Position屬性等。 Position屬性有四個值： static、fixed、absolute和relative，后面兩個在布局中的定位里是經常用到的。

absolute

對象從文檔流中抽取出來，原占有的位置被后面的對象頂替上來

Top的值表示對象上邊框與瀏覽器窗口頂部的距離

bottom 的值表示對象下邊框與瀏覽器窗口底部的距離

兩者同時存在時，只有Top起作用；如果兩者都未指定，則其頂端將與原文檔流位置一致，即垂直保持位置不變。

left的值表示對象左邊框與瀏覽器窗口左邊的距離

right的值表示對象右邊框與瀏覽器窗口右邊的距離

兩者同時存在時，只有left起作用；如果兩者都未指定，則其左邊將與原文檔流位置一致，即水平保持位置不變。

Relative

對象原來占有的位置保留，其后面的對象按原來文檔流仍然保持原來的位置

Top的值表示對象相對原位置向下偏移的距離

bottom的值表示對象相對原位置向上偏移的距離

兩者同時存在時，只有Top起作用。

left的值表示對象相對原位置向右偏移的距離

right的值表示對象相對原位置向左偏移的距離

兩者同時存在時，只有left起作用。

在Position屬性值為absolute的同時，如果有一級父對象（無論是父對象還是祖父對象，或者再高的輩分，一樣）的Position屬性值為Relative時，則上述的相對瀏覽器窗口定位將會變成相對父對象定位，這對精確定位是很有幫助的。

vertical-align的解讀
W3C上對vertical-align的定義,大體上可以分為兩個部分：
第一種用法，“在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。”這很容易理解，如果給一個表格的td加一個vertical-align:middle的樣式，表格里面的內容會垂直居中，同樣的如果給一個vertical-align:bottom就會底部對齊，如果給一個vertical-align:top就會頂部對齊。

第二種用法，“該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。”可以打個比喻：假設有兩個行內元素a和b，a和b都是img，當a加了一個vertical-align:middle樣式之后，b的底部（基線）就會對齊a的中間位置，如下圖：

如果a和b都加了一個vertical-align:middle樣式，那么就互相對齊了對方的中間位置，也就是它們在垂直方向上的中線對齊了，如下圖：

比如，img和span一起出現，要想文字對齊圖片的中間位置，就需要為圖片添加img{vertical-align:middle;}
再比如input和span連用時，谷歌火狐IE8以上版本里默認的是span在input的中間位置，但ie6/ie7里，span底部和input底部對齊，實現統一的辦法就是給input添加input{vertical-align:middle;}，要想它們垂直方向上的中線對齊，就同時也為span設置span{vertical-align:middle;}