精通CSS與HTML設計模式第八章（盒型模型屬性）

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

定位的祖父元素

沒有定位的父元素

水平展開的靜態元素垂直展開的絕對元素水平展開的絕對元素

代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>無標題頁</title>
    <style type="text/css">
        div
        {
            border: solid 1px;
        }
        .gp
        {
            position: relative;
            width: 500px;
            height: 200px;
             margin-left:150px;
             margin-top:150px;
        }
        .parent
        {
            width: 300px;
            height: 150px;
            margin-left: 20px;
        }
        #hss
        {
            margin-left: 30px;
            margin-right: 30px;
            width: auto;

        }
        #vsa
        {
            position:absolute;
            width:120px;
            left:auto;
            margin-left:auto;
            right:0;
            margin-right:70px;
            height:auto;
            top:0;
            margin-top:-30px;
            bottom:0;
            margin-bottom:-30px;
            z-index:1000;

        }
        #hsa
        {
            position:absolute;
            margin-left:-30px;
            margin-right:-30px;
            margin-top:30px;
            margin-bottom:-30px;
            width:auto;
            left:0;
            right:0;

        }
    </style>
</head>
<body>
    <div class="gp">
        定位的祖父元素
        <div class="parent">
            沒有定位的父元素
            <div id="hss">
                水平展開的靜態元素</div>
            <div id="vsa">
                垂直展開的絕對元素</div>
            <div id="hsa">
                水平展開的絕對元素</div>
        </div>
    </div>
</body>
</html>

一、縮排

static 縮排水平展開靜態元素

父元素width為300px

{

width:auto;

margin-left:50px;

margin-right:50px;

width:auto;

}

這樣的話子項目左右各縮排了50px 子項目寬度為100px

總結：對於靜態元素設定了width:auto，除去左右空隙就是其剩下的寬度

absolute 縮排垂直展開的絕對元素

絕對位置的margin值必須要知道它的top,bottom,left,right,因為只有這樣才能知道它外框，不然他是包圍元素的內容

總結：對於絕對位置的，如果想要其垂直展開，必須指定其top,bottom 將其展開，同理可得left,rigth將其左右展開

二、靜態元素位移

靜態元素位移一般採用margin-left margin-right margin-top margin-bottom 進行位移

但是這裡對於位移出父元素，maggin-left:-30px 這種IE6,7都採取截斷的方式，只有IE8顯示超出部分

三、浮動元素的位移

對於float 來說它與絕對位置（absolute）和固定定位（fixed）不同的是前者同為folat的元素相互影響，而後者兩者之間不相互影響。

四、絕對元素和固定元素的位移

絕對位置和固定定位（相對於螢幕的位置，不應捲軸滾動而滾動，IE6下不支援position:fixed）

在絕對位置和固定定位中根據位置進行margin後左右上下位移

五、靜態內嵌元素的對齊 靠左對齊的內容

置中(行高48px)

居右

要由使用者代理程式（而不是 CSS）來確定左右對齊文本如何展開，以填滿父元素左右邊界之間的空間。例如，有些瀏覽器可能只在單詞之間增加額外的空間，而另外一些瀏覽器可能會平均分布字母間的額外空間（不過 CSS 規範特別指出，如果 letter-spacing 屬性指定為一個長度值，“使用者代理程式不能進一步增加或減少字元間的空間”）。還有一些使用者代理程式可能會減少某些行的空間，使文本擠得更緊密。所有這些做法都會影響元素的外觀，甚至改變其高度，這取決於使用者代理程式的對齊選擇影響了多少文本行。

基準低於基準高於基準

line-height:是設定行高的

vertical-align: baseline(基準線) +V（基準線向上移V） -V（基準線向下移V）

text-align:left(靠左)，right(靠右)，center(置中)，justify(實現左右對齊文字效果，慎用，問題多)

六、靜態塊狀元素的對齊與位移

1、margin-left:auto;margin-right:auto 這樣可以使塊狀元素置中

2、不指定塊狀元素的寬度時，margin-left:Value 這樣使其縮排Value距離

七、靜態表格的對齊與位移

1、塊狀元素不能被包裹、除非他設定為定位或浮動

2、內嵌元素不能設定尺寸，除非他們被設定成定位或浮動

3、Table既可以包裹又可以設定尺寸，多才多藝啊

總結：浮動或定位以後其就具有設定寬度和包裹內容的特性，而table本身就具有這個特性

八、絕對元素的對齊與位移

左上方對齊&位移

左下角對齊&位移

中心對齊

右上方對齊&位移

右下角對齊&位移

中心對稱的相容性有點問題

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More