邊框?qū)傩?/h2>

• 邊框?qū)傩缘母袷?
  • 連寫(同時(shí)設(shè)置四條邊的邊框)
    border: 邊框的寬度 邊框的樣式 邊框的顏色;
  • 快捷鍵:
    bd+ --> border: 1px solid #000;
  • 連寫(分別設(shè)置四條邊的邊框)
    • border-top: 邊框的寬度 邊框的樣式 邊框的顏色;
    • border-right: 邊框的寬度 邊框的樣式 邊框的顏色;
    • border-bottom: 邊框的寬度 邊框的樣式 邊框的顏色;
    • border-left: 邊框的寬度 邊框的樣式 邊框的顏色;

  快捷鍵:
  bt+ border-top: 1px solid #000;
  br+  border-right: 1px solid #000;
  bb+ border-bottom: 1px solid #000;
  bl+  border-left: 1px solid #000;
  

• 注意點(diǎn):
  • 1.連寫格式中顏色屬性可以省略, 省略之后默認(rèn)就是黑色
  • 2.連寫格式中樣式不能省略, 省略之后就看不到邊框了
  • 3.連寫格式中寬度可以省略, 省略之后還是可以看到邊框

<style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            /*border:  solid #00ffff;*/
            border-top: 4px solid blue;
            border-bottom: 4px solid yellow;
            border-left: 4px solid green;
            border-right: 8px dashed pink;
        }
</style>
<div class="box"></div>

• 連寫(分別設(shè)置四條邊的邊框的各個(gè)屬性)
  • border-width: 上 右 下 左;
  • border-style: 上 右 下 左;
  • border-color: 上 右 下 左;
• 注意點(diǎn):
  • 1.這三個(gè)屬性的取值是按照順時(shí)針來賦值, 也就是按照上右下左來賦值, 而不是按照日常生活中的上下左右
  • 2.這三個(gè)屬性的取值省略時(shí)的規(guī)律
    • 2.1上 右 下 左 > 上 右 下 > 左邊的取值和右邊的一樣
    • 2.2上 右 下 左 > 上 右 > 左邊的取值和右邊的一樣 下邊的取值和上邊一樣
    • 2.3上 右 下 左 > 上 > 右下左邊取值和上邊一樣

---

內(nèi)邊距屬性

• 什么是內(nèi)邊距?
  • 邊框區(qū)域和內(nèi)容區(qū)域之間的距離就是內(nèi)邊距
• 內(nèi)邊距屬性書寫格式
  • 非連寫格式
    • padding-top: ;
    • padding-right: ;
    • padding-bottom: ;
    • padding-left: ;
  • 連寫格式
    • padding: 上 右 下 左;
    • 這三個(gè)屬性的取值省略時(shí)的規(guī)律
    • 上 右 下 左 > 上 右 下 > 左邊的取值和右邊的一樣
    • 上 右 下 左 > 上 右 > 左邊的取值和右邊的一樣 下邊的取值和上邊一樣
    • 上 右 下 左 > 上 > 右下左邊取值和上邊一樣
• 注意點(diǎn):
  • 1.給標(biāo)簽設(shè)置內(nèi)邊距之后, 標(biāo)簽占有的寬度和高度會(huì)發(fā)生變化
  • 2.給標(biāo)簽設(shè)置內(nèi)邊距之后, 內(nèi)邊距也會(huì)有背景顏色

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            /*padding: 15px;*/
            /*padding-top: 15px;*/
            padding-left: 20px;
            padding-right: 15px;
            padding-bottom: 20px;
            /*如果想要讓盒子寬度和高度不變需要設(shè)置該屬性*/
            box-sizing: border-box;
        }
    </style>
<div class="box">我是文字我是文字我是文字我是文字我是文字</div>

外邊距屬性

• 什么是外邊距?
  • 標(biāo)簽和標(biāo)簽之間的距離就是外邊距
• 外邊距書寫格式
  • 非連寫格式
    • margin-top: ;
    • margin-right: ;
    • margin-bottom: ;
    • margin-left: ;
  • 連寫格式
    • margin: 上 右 下 左;
    • 這三個(gè)屬性的取值省略時(shí)的規(guī)律
    • 上 右 下 左 > 上 右 下 > 左邊的取值和右邊的一樣
    • 上 右 下 左 > 上 右 > 左邊的取值和右邊的一樣 下邊的取值和上邊一樣
    • 上 右 下 左 > 上 > 右下左邊取值和上邊一樣
• 注意點(diǎn):
  • 外邊距的那一部分是沒有背景顏色的

<style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: pink;
            /*margin: 20px 30px 20px 30px;*/
            margin-top: 20px;
            margin-bottom: 30px;

        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin-top: 20px;
        }
</style>
<div class="box1"></div>
<div class="box2"></div>

• 外邊距合并現(xiàn)象
  • 在默認(rèn)布局的垂直方向上, 默認(rèn)情況下外邊距是不會(huì)疊加的, 會(huì)出現(xiàn)合
    并現(xiàn)象, 誰的外邊距比較大就聽誰的
  • 在水平方向上,外邊距是會(huì)疊加的
• 注意點(diǎn):
  • 1.如果兩個(gè)盒子是嵌套關(guān)系, 那么設(shè)置了里面一個(gè)盒子頂部的外邊距, 外面一個(gè)盒子也會(huì)被頂下來
  • 2.如果外面的盒子不想被一起定下來,那么可以給外面的盒子添加一個(gè)邊框?qū)傩曰蛘呓o外面盒子設(shè)置overflow: hidden;屬性
  • 3.在企業(yè)開發(fā)中, 一般情況下如果需要控制嵌套關(guān)系盒子之間的距離, 應(yīng)該首先考慮padding, 其次再考慮margin,margin本質(zhì)上是用于控制兄弟關(guān)系之間的間隙的

盒子水平居中

1.在嵌套關(guān)系的盒子中, 我們可以利用margin: 0 auto;的方式來讓里面的盒子在外面的盒子中水平居中
2.margin: 0 auto;只對(duì)水平方向有效, 對(duì)垂直方向無效

盒子水平居中和內(nèi)容水平居中區(qū)別

text-align:center;和margin:0 auto;區(qū)別
text-align: center;
設(shè)置盒子中存儲(chǔ)的文字/圖片水平居中
margin:0 auto;
讓盒子自己水平居中

盒模型的寬度和高度

• 內(nèi)容的寬度和高度
  • 通過width/height屬性設(shè)置的寬度和高度
• 元素的寬度和高度
  • 寬度 = 左邊框 + 左內(nèi)邊距 + width + 右內(nèi)邊距 + 右邊框
  • 高度 = 上邊框 + 上內(nèi)邊距 + height + 下內(nèi)邊距 + 下邊框
• 元素空間的寬度和高度
  • 寬度 = 左外邊距 + 左邊框 + 左內(nèi)邊距 + width + 右內(nèi)邊距 + 右邊框 + 右外邊距
  • 高度 = 上外邊距 + 上邊框 + 上內(nèi)邊距 + height + 下內(nèi)邊距 + 下邊框 + 下外邊距

box-sizing屬性

• 1.CSS3中新增了一個(gè)box-sizing屬性, 這個(gè)屬性可以保證我們給盒子新增padding和border之后, 盒子元素的寬度和高度不變
• 2.box-sizing屬性是如何保證增加padding和border之后, 盒子元素的寬度和高度不變和我們前面學(xué)習(xí)的原理一樣, 增加padding和border之后要想保證盒子元素的寬高不變, 那么就必須減去一部分內(nèi)容的寬度和高度
• 3.box-sizing取值
  • content-box
    元素的寬高 = 邊框 + 內(nèi)邊距 + 內(nèi)容寬高
  • border-box
    元素的寬高 = width/height的寬高

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
            padding: 30px;
            box-sizing: border-box;
        }
    </style>
<div class="box">我是盒子</div>

清空默認(rèn)邊距

• 在企業(yè)開發(fā)中為了更好的控制盒子的寬高和計(jì)算盒子的寬高等等, 所以在企業(yè)開發(fā)中, 編寫代碼之前第一件事情就是清空默認(rèn)的邊距
• 如何清空默認(rèn)的邊距
  • 使用通配符選擇器

  *{
         margin: 0;
         padding: 0;
  }
  

  • 注意點(diǎn): 通配符選擇器會(huì)遍歷所有標(biāo)簽,性能不好
  • 在企業(yè)開發(fā)中,會(huì)使用別人設(shè)計(jì)好的清除邊距的文檔
    http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

行高屬性

• 行高指的是每行內(nèi)容的高度

• 規(guī)律:

  • 1.文字在行高中默認(rèn)是垂直居中的
  • 2.在企業(yè)開發(fā)中我們經(jīng)常將盒子的高度和行高設(shè)置為一樣, 那么這樣就可以保證一行文字在盒子的高度中是垂直居中的
    簡(jiǎn)而言之就是: 要想一行文字在盒子中垂直居中, 那么只需要設(shè)置這行文字的"行高等于盒子的高"即可
  • 3.在企業(yè)開發(fā)中如果一個(gè)盒子中有多行文字, 那么我們就不能使用設(shè)置行高等于盒子高來實(shí)現(xiàn)讓文字垂直居中, 只能通過設(shè)置padding來讓文字居中

• 注意點(diǎn):

  • 1.在企業(yè)開發(fā)中, 如果一個(gè)盒子中存儲(chǔ)的是文字, 那么一般情況下我們會(huì)以盒子左邊的內(nèi)邊距為基準(zhǔn), 不會(huì)以右邊的內(nèi)邊距為基準(zhǔn), 因?yàn)檫@個(gè)右邊的內(nèi)邊距有誤差

  • 2.右邊內(nèi)邊距的誤差從何而來? 因?yàn)橛疫吶绻挪幌乱粋€(gè)文字, 那么文字就會(huì)換行顯示, 所以文字和內(nèi)邊距之間的距離就有了誤差

  • 3.頂部的內(nèi)邊距并不是邊框到文字頂部的距離, 而是邊框到行高頂部的距離