檔案流、盒子模型、內邊距、外邊距、盒子模型水平方向的布局、盒子模型垂直方向的布局、盒子模型外邊距的折疊、行內元素的盒模型（萌新必看，大佬隨便）-有解無憂

《個人學習筆記十四》

文章目錄

- 《個人學習筆記十四》
- 檔案流（normal flow）
- 盒子模型
- 盒模型、盒子模型、框模型（box model）
- 內邊距（padding）
- 外邊距（margin）
- 盒子模型水平方向的布局
- 盒子模型垂直方向的布局
- 盒子模型外邊距的折疊
- 行內元素的盒模型

檔案流（normal flow）

網頁是一個多層的結構，一層摞著一層
通過css可以分別為每一層來設計樣式
作為用戶來講只能看到最頂上一層
這些層中，最底下的一層是檔案流，檔案流是網頁的基礎
我們所創建的元素默認都是在檔案流中進行排列
對于我們來說檔案流主要有兩個狀態

在檔案流中
不在檔案流中（脫離檔案流）

元素在檔案流中有什么特點：
塊元素

塊元素會在頁面獨占一行（自上而下垂直排列）
默認寬度是父元素的全度（會把父元素撐滿）
默認高度是唄內容撐開的（子元素）

行內元素

行內元素不會獨占頁面的一行，只占自身的大小
行內元素在頁面中左向右水平排列，如果一行之中不能容納下所有的行內元素，則元素會換到第二行繼續從左向右排列（書寫習慣一致）
行內元素的默認寬度和高度都是被內容撐開的

盒子模型

內容區

（content），元素中的所有的子元素和文本內容都是在內容區中排列

內容區的大小有width和height兩個屬性來設定

width：設定內容的寬度
height：設定內容的高度

邊框

（border），邊框屬于盒子邊緣，邊框里面屬于盒子內部，出了邊框都是盒子的外部

邊框的大小會影響到整個盒子的大小

要設定邊框，需要設定三個樣式：

邊框的寬度 border-width
邊框的顏色 border-color
邊框的樣式 border-style

border-width可以用來指定四個方向的邊框的寬度

值的情況

個數	表示位置
四個值	上、右、下、左
三個值	上，左右、下
兩個值	上下、左右
一個值	上下左右

出了border-width還有一組border-xxx-width
xxx可以是top right bottom left用來單獨指定某個邊的寬度

border-color用來指定邊框的的顏色，同樣可以分別指定四個邊的邊框（規則和border-width一致）
border-color也可以忽略不寫，如果省略了則自動使用color的顏色值

border-style指定邊框的樣式

可選值	表現結果
solid	表示實線
dotted	點狀虛線
dashed	虛線
double	雙線

border簡寫屬性，通過該屬性可以同時設定邊框所有的相關樣式，并且沒有順序要求
除了border以外還有四個border-xxx

border-top
border-right
border-bottom
border-left
border-style的默認值是none 表示沒有邊框
代碼例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            background-color: yellowgreen;
            height: 200px;
            width: 200px;
            border-width: 30px;
            border-style: solid dashed dotted double;
            /* border-color: lightcoral; */
            /* border-top-color: lightcoral;
            border-left-color: lightskyblue;
            border-right-color: magenta;
            border-bottom-color: navajowhite; */
            border-color: olivedrab red pink purple;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

顯示結果：
在這里插入圖片描述

盒模型、盒子模型、框模型（box model）

css將頁面的所有元素都是設定為了一個矩形的盒子
將元素設定為矩形的盒子后，對頁面的布局就是講不同盒子擺放到不同的位置
每一個盒子都是由以下幾個部分組成：
內容區（content）
內邊距（padding）
邊框（border）
外邊框（margin）

內邊距（padding）

內容區和邊框之間的距離是內邊距
一共有四個方向的內邊距：

padding-top
padding-right
padding-bottom
padding-left

內邊距的設定會影響到盒子內部的大小
背景顏色會延伸到內邊距上
一般盒子的可見框的大小，由內容區、內邊距、邊框共同決定，所以在計算盒子大小時，需要將這三個區域加到一起計算

外邊距（margin）

外邊距不會影響盒子可見框的大小
但是會影響盒子的位置
一共有四個位置的外邊框：

可選值	表現結果
margin-top	上外邊距，設定一個正值，元素會向下移動
margin-right	默認情況下設定margin-right不會產生任何效果
margin-bottom	下外邊距，設定一個正值，其下邊的元素會向下移動
margin-left	左外邊距，設定一個正值，元素會向右移動

margin也可以設定負值，如果是負值則元素會向相反的方向移動
元素在頁面中是按照自左向右的順序排列的，所以默認情況下如果我們設定的左和上外邊距則會移動元素自身，而設定下和右外邊距會移動其他元素
margin的簡寫屬性

margin可以同時設定四個方向的外邊距，用法和padding一樣
margin會影響到盒子世紀占用的空間
盒子模型內外邊距代碼例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            height: 200px;
            width: 200px;
            background-color: #abc;
            border: 20px blueviolet solid;
            padding: 20px 50px;
            margin-top: 50px;
            margin-right: 50px;
            margin-bottom: 100px;
            margin-left: 200px;
        }
        
        .box2 {
            height: 200px;
            width: 200px;
            background-color: #ab0;
        }
        
        .box3 {
            height: 280px;
            width: 540px;
            background-color: #a0c;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>

</html>

</html>

</html>

在這里插入圖片描述

盒子模型水平方向的布局

一個元素在其父元素中，水平布局必須滿足以下的等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父元素內容區的寬度（必須滿足）
以上等式必須滿足，如果相加結果使等式不成立，則成為過渡約束，則等式會自動調整
調整的情況：

如果這七個值中沒有為auto的情況，則瀏覽器會自動調整margin-right值以使等式滿足

這七個值中有三個值可以設定成auto

width
margin-left
margin-right

如果某個值為auto，則會自動調整為auto的那個值以便使等式成立

如果將寬度和一個外邊距設定為auto，則寬度調到最大，設定auto的外邊距會自動為0
如果將三個值都設定為auto，則外邊距都是0，寬度最大
如果將兩個外邊距設定為auto，寬度固定值，則會將外邊距設定為相同的（所以我們經常利用這一特點來是一個元素在其父元素中水平居中）
代碼例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1 {
        height: 200px;
        width: 600px;
        border: solid red 20px;
    }
    
    .box2 {
        height: 200px;
        width: auto;
        background-color: #abc;
        margin-left: 300px;
        margin-right: auto;
    }
</style>

<body>
    <div class="box1">
        <div class="box2"></div>

    </div>
</body>

</html>

把寬度和右外邊距設定為auto，當然你可以自己改
顯示結果：

盒子模型垂直方向的布局

子元素是在父元素的內容區中排列的，如果子元素的大小超過了父元素，則子元素會從父元素中溢位，使用overflow屬性來設定父元素如何處理溢位的子元素

可選值	顯示結果
visible默認值	子元素會從父元素中溢位，父元素外部的位置顯示
hidden	溢位內容將會被裁剪不會顯示
scroll	生成兩個滾動條，通過滾動條來查看完整的內容
auto	根據需要生成滾動條

補充：類似的屬性還有overflow-x 、overflow-y
例子代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            height: 300px;
            width: 300px;
            background-color: #afd;
            overflow: auto;
        }
        
        .box2 {
            height: 600px;
            width: 600px;
            background-color: #afb;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>

結果顯示：
在這里插入圖片描述

盒子模型外邊距的折疊

垂直外邊距的重疊（折疊）
相鄰的垂直外邊距會發生重疊現象
兄弟元素

兄弟元素間的相鄰垂直外邊距會取兩者之間的較大值（兩者都是正值）

特殊情況：

如果相鄰的外邊距一正一負，則取兩者的和
如果相鄰的外邊距都是負值，則取兩者中絕對值較大的
兄弟之間的外邊距的重合，對于開發是有利的，所以我們不需要進行處理
父子元素
父子元素間相鄰邊距，子元素的會傳遞給父元素（上外邊距）
父子外邊距的折疊會影響頁面的布局，必須要進行處理
例子代碼：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box1 {
            height: 100px;
            width: 200px;
            background-color: #bfa;
            padding-top: 100px;
        }
        
        .box2 {
            height: 100px;
            width: 100px;
            background-color: #abc;
        } */
        
        .box1 {
            height: 200px;
            width: 200px;
            background-color: #bfa;
            border: 1px solid #bfa;
        }
        
        .box2 {
            height: 100px;
            width: 100px;
            background-color: #abc;
            margin-top: 101px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>

表現結果：
在這里插入圖片描述

行內元素的盒模型

行內元素不支持設定寬度和高度
行內元素可以設定padding，但是垂直方向padding不會影響頁面的布局
行內元素可以設定border，垂直發布方向的border不會影響頁面的布局
行內元素可以設定margin，垂直方向的margin不會影響布局

display用來設定元素顯示的型別

可選值	顯示結果
inline	將元素設定為行內元素
block	將元素設定為塊元素
inline-block	將元素設定為行內塊元素
table	將元素設定為一個表格
none	元素不在頁面中顯示

解釋：
行內塊：既可以設定寬度和高度又不會獨占一行
visibility用來設定元素的顯示狀態

可選值	顯示結果
visible	默認值，元素在頁面中正常顯示
hidden	元素在頁面中隱藏不顯示

display屬性里面的none與visibility屬性里面的hidden之間的區別：
none值在網頁上不會把設定為該值的部分內容顯示，也不會給該部分內容留位置，而visibility屬性里的hidden會隱藏該部分內容，并且保留該部分內容的位置，
參考代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sp {
            background-color: #bfa;
            /* padding: 10px; */
            margin: 50px;
        }
        
        .box1 {
            height: 100px;
            width: 100px;
            background-color: #abd;
            margin: 80px;
        }
        
        a {
            background-color: red;
            /* display: block; */
            display: inline-block;
            /* display: none; */
            height: 100px;
            width: 100px;
            /* visibility: hidden; */
        }
    </style>

</head>

<body>
    <a href="javascript:;">超鏈接</a><a href="javascript:;">超鏈接</a>
    <span class="sp">我是一個span</span>
    <span class="sp">我是一個span</span>

    <div class="box1"></div>
</body>

</html>

顯示結果：
在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/208237.html

標籤：其他

上一篇：還在一行行敲代碼嗎？一起自定義vscode快捷輸入吧！

下一篇：ES 6新特性（Day07）