盒模型

邊框?qū)傩?/h3>

• 什么邊框?

• 邊框就是環(huán)繞在標(biāo)簽寬度和高度周圍的線條

• 邊框?qū)傩缘母袷?/p>

• 連寫(同時設(shè)置四條邊)

• border: 邊框的寬度 邊框的樣式 邊框的顏色;

• 示例代碼

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 5px solid blue;
            /*border: 5px solid;*/
            /*border: 5px blue;*/
            /*border: solid blue;*/
        }
</style>

• 快捷鍵:

• bd+ border: 1px solid #000;

• 注意點:

• 連寫格式中顏色屬性可以省略, 省略之后默認(rèn)就是黑色

• 連寫格式中樣式不能省略, 省略之后就看不到邊框了

• 連寫格式中寬度可以省略, 省略之后還是可以看到邊框

• 按方向連寫(分別設(shè)置四條邊)

• border-top: 邊框的寬度 邊框的樣式 邊框的顏色;

• border-right: 邊框的寬度 邊框的樣式 邊框的顏色;

• border-bottom: 邊框的寬度 邊框的樣式 邊框的顏色;

• border-left: 邊框的寬度 邊框的樣式 邊框的顏色;

• 示例代碼

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border-top:5px solid blue;
            border-right:10px dashed green;
            border-bottom:15px dotted purple;
            border-left:20px double pink;
        }
</style>

• 快捷鍵:

• bt+ border-top: 1px solid #000;

• br+ border-right: 1px solid #000;

• bb+ border-bottom: 1px solid #000;

• bl+ border-left: 1px solid #000;

• 按要素連寫(分別設(shè)置四條邊)

• border-width: 上 右 下 左;

• border-style: 上 右 下 左;

• border-color: 上 右 下 左;

• 示例代碼

<style>
        .box{
            width: 500px;
            height: 500px;
            background-color: red;
            border-width: 5px 10px 15px 20px;
            border-style: solid dashed dotted double;
            border-color: blue green purple pink;
            /*border-color: blue green purple;*/
            /*border-color: blue green;*/
            /*border-color: blue;*/
        }
</style>

• 注意點:

• 這三個屬性的取值是按照順時針來賦值, 也就是按照上右下左來賦值, 而不是按照日常生活中的上下左右

• 這三個屬性的取值省略時的規(guī)律

• 上 右 下 左 > 上 右 下 > 左邊的取值和右邊的一樣

• 上 右 下 左 > 上 右 > 左邊的取值和右邊的一樣 下邊的取值和上邊一樣

• 上 右 下 左 > 上 > 右下左邊取值和上邊一樣

• 非連寫(方向+要素)

• border-top-width: ;

• border-top-style:;

• border-top-color:;

• border-right-width:;

• border-right-style:;

• border-right-color:;

• border-bottom-width:;

• border-bottom-style: ;

• border-bottom-color:;

• border-left-width:;

• border-left-style:;

• border-left-color:;

• 示例代碼

<style>
        .box{
            width: 500px;
            height: 500px;
            background-color: red;

            border-top-width: 5px;
            border-top-style: solid;
            border-top-color: blue;

            border-right-width: 10px;
            border-right-style: dashed;
            border-right-color: green;

            border-bottom-width: 15px;
            border-bottom-style: dotted;
            border-bottom-color: purple;

            border-left-width: 20px;
            border-left-style: double;
            border-left-color: pink;
        }
</style>

• 注意點:
  • 同一個選擇器中如果設(shè)置了多個邊框?qū)傩? 后面的會覆蓋前面的

.box3{
            border: 5px solid red;
            border-right:5px dashed red;
}

內(nèi)邊距屬性

• 什么是內(nèi)邊距?
  邊框和內(nèi)容之間的距離就是內(nèi)邊距

• 格式

• 單獨設(shè)置四條邊

• padding-top: ;

• padding-right: ;

• padding-bottom: ;

• padding-left: ;

• 示例代碼

<style>
        div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1{
            padding-top: 20px;
            padding-right:40px;
            padding-bottom:80px;
            padding-left:160px;
       }
</style>

• 同時設(shè)置四條邊

• padding: 上 右 下 左;

• 示例代碼

<style>
        div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1{
            /*padding:20px 40px 80px 160px;*/
            /*padding:20px 40px 80px;*/
            /*padding:20px 40px;*/
            padding:20px;
        }
</style>

• 注意點:
• 這三個屬性的取值省略時的規(guī)律
• 上 右 下 左 > 上 右 下 > 左邊的取值和右邊的一樣
• 上 右 下 左 > 上 右 > 左邊的取值和右邊的一樣 下邊的取值和上邊一樣
• 上 右 下 左 > 上 > 右下左邊取值和上邊一樣
• 給標(biāo)簽設(shè)置內(nèi)邊距之后, 標(biāo)簽占有的寬度和高度會發(fā)生變化
• 給標(biāo)簽設(shè)置內(nèi)邊距之后, 內(nèi)邊距也會有背景顏色

外邊距屬性

• 什么是外邊距?

• 標(biāo)簽和標(biāo)簽之間的距離就是外邊距

• 格式

• 單獨設(shè)置四條邊

• margin-top: ;

• margin-right: ;

• margin-bottom: ;

• margin-left: ;

• 示例代碼

<style>
  .box1{
            margin-top:20px;
            margin-right:40px;
            margin-bottom:80px;
            margin-left:160px;
        }
</style>

• 同時設(shè)置四條邊

• margin: 上 右 下 左;

• 示例代碼

<style>
  .box1{
            margin:20px 40px 80px 160px;
            /*margin:20px 40px 80px;*/
            /*margin:20px 40px;*/
            /*margin:20px;*/
        }
</style>

• 注意點:

  • 這三個屬性的取值省略時的規(guī)律
  • 上 右 下 左 > 上 右 下 > 左邊的取值和右邊的一樣
  • 上 右 下 左 > 上 右 > 左邊的取值和右邊的一樣 下邊的取值和上邊一樣
  • 上 右 下 左 > 上 > 右下左邊取值和上邊一樣

• 外邊距的那一部分是沒有背景顏色的

• 外邊距合并現(xiàn)象

• 默認(rèn)布局的垂直方向上外邊距是不會疊加的, 會出現(xiàn)合并現(xiàn)象, 誰的外邊距比較大就聽誰的

• 示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外邊距合并現(xiàn)象</title>
    <style>
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        div{
            height: 100px;
            border: 1px solid #000;
        }
        .hezi1{
            margin-right:50px;
        }
        .hezi2{
            margin-left:100px;
        }
        .box1{
            margin-bottom:50px;
        }
        .box2{
            margin-top:100px;
        }
    </style>
</head>
<body>
<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>

• margin-top問題

• 如果兩個盒子是嵌套關(guān)系, 那么設(shè)置了里面一個盒子頂部的外邊距, 外面一個盒子也會被頂下來

• 如果外面的盒子不想被一起定下來,那么可以給外面的盒子添加一個邊框?qū)傩?/p>

• 在企業(yè)開發(fā)中, 一般情況下如果需要控制嵌套關(guān)系盒子之間的距離, 應(yīng)該首先考慮padding, 其次再考慮margin(margin本質(zhì)上是用于控制兄弟關(guān)系之間的間隙的)

• 示例代碼

<style>
        .big{
            width: 500px;
            height: 500px;
            background-color: red;
            /*不設(shè)置邊框, big也會被small的頂部外邊距頂下去*/
            border: 5px solid #000;
        }
        .small{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top:150px;
            margin-left:150px;
        }
    </style>

• text-align:center;和margin:0 auto;區(qū)別

• text-align: center; 是設(shè)置盒子中存儲的文字/圖片水平居中

• margin:0 auto;是讓盒子自己水平居中

• 示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>53-盒子居中和內(nèi)容居中</title>
    <style>
        .father{
            width: 800px;
            height: 500px;
            background-color: red;
            /*文字圖片會居中*/
            /*text-align: center;*/
            /*盒子自身會居中*/
            margin:0 auto;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="father">
    我是文字<br/>
    ![](images/girl.jpg)
    <div class="son"></div>
</div>
</body>
</html>

盒模型

• 什么是CSS盒模型?
• CSS盒模型僅僅是一個形象的比喻, HTML中的標(biāo)簽都是盒模型
• CSS盒模型指那些可以設(shè)置寬度高度/內(nèi)邊距/邊框/外邊距的標(biāo)簽
• 這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解，所以HTML標(biāo)簽又叫做盒模型

• 示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>48-CSS盒子模型</title>
    <style>
        span,a,b,strong{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 6px solid #000;
            padding: 20px;
            margin: 20px;
        }

    </style>
</head>
<body>

<span>我是span</span>
<a href="#">我是超鏈接</a>
<b>我是加粗</b>
<strong>我是強調(diào)</strong>

</body>
</html>

• 盒模型寬度和高度

• 內(nèi)容的寬度和高度

• 就是通過width/height屬性設(shè)置的寬度和高度

• 元素的寬度和高度

• 寬度 = 左邊框 + 左內(nèi)邊距 + width + 右內(nèi)邊距 + 右邊框

• 高度 同理可證

• 規(guī)律

• 增加了padding/border之后元素的寬高也會發(fā)生變化
  - 如果增加了padding/border之后還想保持元素的寬高, 那么就必須減去內(nèi)容的寬高

• 元素空間的寬度和高度

• 寬度 = 左外邊距 + 左邊框 + 左內(nèi)邊距 + width + 右內(nèi)邊距 + 右邊框 + 右外邊距

• 高度 同理可證

box-sizing屬性

• CSS3中新增了一個box-sizing屬性, 這個屬性可以保證我們給盒子新增padding和border之后, 盒子元素的寬度和高度不變

• box-sizing取值

• content-box

• 元素的寬高 = 邊框 + 內(nèi)邊距 + 內(nèi)容寬高

• border-box

• 元素的寬高 = width/height的寬高

• 增加padding和border之后要想保證盒子元素的寬高不變, 系統(tǒng)會自動減去一部分內(nèi)容的寬度和高度

• 示例代碼

<!--增加padding/border之后元素寬高會變大-->
<style>
.box1{
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
    border: 20px solid #000;
    padding: 20px;
}
</style>

<!--增加padding/border之后元素寬不會變大-->
<style>
.box1{
 box-sizing: border-box;
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
    border: 20px solid #000;
    padding: 20px;
}
</style>

學(xué)習(xí)交流方式:
1.微信公眾賬號搜索: 李南江(配套視頻,代碼,資料各種福利獲取)
2.加入前端學(xué)習(xí)交流群:
302942894 / 289964053 / 11550038