[19/06/06-星期四] CSS基礎_盒子模型

時間 2019-11-16

標籤星期四 css 基礎盒子模型欄目 CSS 简体版

原文原文鏈接

1、盒子模型（框模型、盒模型）css

　　CSS處理網頁時，它認爲每一個元素都在一個不可見的矩形盒子裏。html

　　爲何想象成盒子模型？由於把全部元素想象成盒子，那麼咱們對網頁的佈局就至關於擺放盒子。咱們只須要把相應的盒子擺放到網頁中對應的位置便可完成網頁佈局。瀏覽器

模型圖片：佈局

參數：學習

　一、width 和height：設置內容區、元素的高度和寬度，而不是盒子的整個大小，盒子的可見大小=內容區+內邊距+邊框spa

　　二、border：爲一個元素設置邊框，必須指定3個元素，缺一不可。可是不寫的話，有默認值，都不寫是沒有的，寫至少一個都會顯示出來。code

　　　　border-width：邊框的寬度；默認值htm

　　　　　　　　border-width：10px，表示設置4個邊框都爲10px；blog

　　　　　　　　border-width：10px，20px，30px，40px 表示設置上、右、下、左邊分別爲十、20、30、40px。順時針設置。圖片

　　　　　　　　border-width：10px，20px，30px，表示設置上、左右、下分別爲十、20、30px。注意左右同樣。

　　　　　　　　border-width：10px，20px 表示設置上下、左右分別爲十、20px。上下同樣、左右同樣。

　　　　　　　　border-top / right / bottom /left -width：表示能夠單獨設置上、右、下、左指定邊寬度值。

　　　　border-color：邊框的顏色；

　　　　　　　　border-color：設置方式和border-width同樣。取值的個數從1到4個不一。

　　　　　　　　border-top / right / bottom /left -color：表示能夠單獨設置上、右、下、左指定顏色的值

　　　　border-style：邊框的樣式；

　　　　　　　　none：沒有邊框 solid：實線邊框 dotted：點狀邊框　　　　　　

　　　　　　　　dasted：虛線邊框 double：雙線邊框　　　　　

　　　　如何簡寫？

　　　　　　　　 border：同時設置3個樣式，沒有任何的順序要求。如：border：10px red solid；同時指定4個邊。

　　　　　　　　border-top / right / bottom /left：單獨設置上、右、下、左的樣式。

　　　　　　　　如：border：10px red solid； border-right：none；表示上下左設置好，不設置右邊。簡便。　　　　

　　三、padding：內邊距，指盒子內容區域到盒子邊框之間的距離，有4個方向。會影響盒子的大小，元素的背景顏色會延伸到內邊距。

　　　　　padding-top / right / bottom /left -color：表示能夠單獨設置上、下、左、右指定的內邊距的值。

　　　　如何簡寫：規則和border-width一致。取值個數從1個到4個不等。

　　　　　　　　padding：10px，表示上下左右的邊距都是10px.

　　因此盒子的寬度：左邊框的寬度+左內邊距的寬度+內容區的寬度+右內邊距的寬度+右邊框的寬度。

　　　　　　　高度：上邊框的高度+上內邊距的高度+內容區的高度+下內邊距的高度+下邊框的高度。

　　四、margin：外邊距，指的是盒子與其餘盒子之間的距離，不會影響盒子的大小，會影響盒子的位置。

　　　　　margin-top / right / bottom /left：設置上(上邊框與其餘盒子的距離)、右、下、左的外邊距

　　　　　等於設置top(頂部距離)時，盒子往下移動一段距離，自身位置改變，其餘依次類推。

　　　注意：因爲盒子默認值靠左靠上放置的、設置上和左外邊距會致使自身位置的改變。設置下和右邊距會致使其餘盒子的改變。

　　　　　　外邊距也能夠指定一個負值，則元素會向反方向移動。

　　　　　　margin也能夠設置爲auto，但它通常只設置給水平方向設置。如margin-left(左)：auto 表示設置左邊距爲最大，就是移動到最右邊，反之類推。

　　　　若將左邊和右邊都設置爲auto，將至關於將元素在父元素中水平居中。

　　　　　　垂直方向設置爲auto，則外邊距默認爲0；

　　　如何簡寫？margin：10px。規則和上邊的同樣，可取值的個數從1到4不等。

　　五、垂直外邊距的重疊（摺疊）

　　　　指網頁上下的盒子(兄弟元素) 之間相鄰的垂直方向外邊距會取最大值，而不是求和。例如上邊盒子下外邊距設置爲50px，下邊的盒子上外邊距設

置爲50px，則兩個盒子的距離是50px，而不是相加後的100px。

　　　　若是不想重疊，能夠相鄰盒子(如源碼中2個div挨着)中加個內容或者給某個盒子設置個邊框。注意div是個塊元素。

　　　　若是父子元素的垂直外邊距相鄰了，則子元素的外邊距會設置給父元素，仍是在父子之間加個內容。

瀏覽器默認邊距：瀏覽器默認的 <body></body> 有一個 8px 的外邊距。而瀏覽器的默認樣式不須要使用，因此講編寫樣式時，須要將margin和padding去掉。

可使用 *{

margin：0；padding：0；

}去除默認樣式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style type="text/css">
            
            .box1{/*類選擇器*/
                width : 200px;/*內容區的寬和高*/
                height: 200px;
                background-color: #bfa;
                /*設置邊框 border*/
                border-width: 10px;
                border-color:red ;
                border-style:solid ;
                padding: 20px;
                margin-bottom: 50px;
            }
            .box2{
                width: 100%;/*子元素把父元素的內容區佔滿*/
                height: 100%;
                background-color: yellow;
            }
            .box3{
                width: 200px;
                height: 200px;
                background-color: #bfa;
                border: solid 10px red ;
                padding: 20px;
                margin-top:50px ;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2">
                
            </div>
        </div>
        <div class="box3">
            
        </div>
    </body>
</html>

2、內聯元素的盒模型（如span元素）

　　內容區：不能設置寬和高。設置完沒用。

　　內邊距（padding）：能夠設置水平方向的內邊距，影響頁面的佈局，也能夠設置垂直方向的內邊距，可是不會影響頁面的佈局，由於它能夠覆蓋下邊的盒子，

不像塊元素能夠往下擠別的盒子

　　邊框（border）：能夠設置邊框，可是垂直的不會影響頁面的佈局。水平的能夠。

　　外邊距（margin）：支持水平方向的外邊距，不會重疊，而是求和。不支持垂直外邊距，設置完沒反應。

特殊樣式：

　　display：將內聯元素（不支持設置寬和高）變成塊元素（支持設置寬和高）

　　　　inline：將元素做爲內聯元素顯示；（不獨佔一行，不能設置寬高）

　　　　block：將元素設置爲塊元素顯示；（獨佔一行，能夠設置寬高）

　　　　inline-block：將元素轉成行內塊元素。它可使元素兩種特色都要。便可以設置寬高，又不獨佔一行。如設置圖片爲超連接。

　　　　none：隱藏元素，不讓用戶看見。而且這個元素消失後不會佔據位置，能夠騰出位置。

　　visibility：是否可見

　　　　visible：元素可見

　　　　hidden：元素不可見，可是會佔據位置。人走茶不涼。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>內聯元素盒模型</title>
        <style type="text/css">
            span{
                background-color:yellowgreen ;
            }
            .box1{
                width: 100px;
                height: 100px;
                background-color: red;
            }
            a{
                background-color: yellow;
                display: block;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <span id="s1"> 鋤禾日當午，</span> <!--內聯元素-->
        <span> 汗滴禾下土。</span>
        <span> 誰知盤中餐，</span>
        <span> 粒粒皆辛苦。</span>
        
        <div class="box1"> <!--塊元素-->
            憫農
            
        </div>
        
        <a href="01 html基礎知識.html">一個超連接 </a>
    </body>
</html>

　　overflow：溢出，能夠設置父元素如何處理溢出的內容。

　　　　子元素是默認存在於父元素的的內容區的中間，最大能夠等於父元素的大小，若是子元素的大小超過父元素的內容區，則超過的大小會在父元素之外的位置顯示，

　　超出父元素的內容，稱爲溢出的內容。

　　　屬性：visible，默認值，元素不會對內容作任何處理，元素在父元素以外的區域顯示。

　　　　　　hidden，一剪梅，把多餘的位置剪去，溢出的內容會被修剪。

　　　　　　scroll，在父元素上加個滾動條。經過拖動滾動條，能夠查看完整內容。該屬性不管內容是否溢出，都會添加水平和垂直雙方向的滾動條。

　　　　　　auto，根據需求自動添加智能滾動條。須要水平就加水平，須要垂直就加垂直。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>overflow</title>
        <style type="text/css">
            .box1{
                width: 200px;
                height: 200px;
                background-color: #bfa;
                overflow: auto;
            }
            .box2{
                width: 100px;
                height: 500px;/*子元素比父元素高*/
                
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2">
                迢迢牽牛星，皎皎河漢女。
                纖纖擢素手，札札弄機杼。
                終日不成章，泣涕零如雨；
                河漢清且淺，相去復幾許！
                盈盈一水間，脈脈不得語。
            </div>
        </div>
    </body>
</html>

　　3、文檔流（表示一個頁面的位置）

　　　　文檔就是一個網頁，文檔流就是網頁最底層，表示的是地基，建立的元素（標籤）都默認在文檔流中。

　　　　元素在文檔流中的特色：

　　　　　　塊元素：在文檔流中獨佔一行，自上向下排列。塊元素在文檔流中默認寬度是父元素的100%，寬度值是auto，自動設置。

　　　　　　　　當元素的寬度的值是auto，此時指定內邊距不會影響可見框的大小，而是自動修改寬度，以適應內邊距。

　　　　　　　　高度默認被子元素撐開。如：div

　　　　　　內聯元素：在文檔流中只佔自身的大小，默認從左到右排列。若是一行不足以容納全部的內聯元素，會換到下一行，也是從左到右。

　　　　　　　　　　內聯元素的寬和高都是被默認被內容撐開。如：span

　　4、浮動（float）　　　　

　　　　　　塊元素默認在文檔流中垂直排列。若但願水平排列，使塊元素脫落文檔流，使用float來使元素浮動，從而脫落文檔流。

　　　　　　none：默認值，元素默認在文檔流中排列。

　　　　　　left：元素會當即脫離文檔流，向頁面的左側浮動。

　　　　　　right：元素會當即脫離文檔流，向頁面的右側浮動

　　　　當爲一個元素設置浮動後（float的屬性是個非none的值），元素會當即脫離文檔流，某個元素脫離以後，它下邊的元素會當即向上移動，元素浮動以後會盡可能向

　　左上（屬性爲left）或右上（屬性爲right）浮動，直到遇到父元素的邊框（如：瀏覽器的邊框）或其餘浮動元素的邊框。

　　　　若是浮動的元素上邊是個沒有浮動的塊元素，則浮動元素不會上邊超過塊元素，即只在本行移動。

　　　　浮動的元素不會超過它的上邊的兄弟元素，最多齊平。

　　　　浮動的元素不會覆蓋文字，文字會自動環繞浮動元素的周圍，因此能夠經過浮動來設置文字環繞圖片的效果。

　　　　當元素設置浮動後，會脫離文檔流，塊元素脫離以後高和寬都被內容撐開，內聯元素脫離以後會變成塊元素，即寬和高都被撐開。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮動的學習</title>
        <style type="text/css">
            .box1{/*塊元素默認在文檔流中垂直排列。
                若但願水平排列，可使塊元素脫落文檔流
                使用float來使元素浮動，從而脫落文檔流
                */
                width: 200px;
                height: 200px;
                background-color: gray;
                float: left;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: orange;
                float: left;
            }
            .box3{
                width: 200px;
                height: 200px;
                background-color: green;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="box1"> </div>
        <div class="box2"> </div>
        <div class="box3"> </div>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。