亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

盒模型簡(jiǎn)介

盒子模型，就是類(lèi)似于俄羅斯套娃的，大盒子套小盒子的東西，由內(nèi)容，內(nèi)邊距，邊框，外邊距組成

想象一個(gè)盒子，它有：外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、內(nèi)容（content）四個(gè)屬性；

讓我們俯視這個(gè)盒子，它有上下左右四條邊，所以每個(gè)屬性除了內(nèi)容（content），都包括四個(gè)部分：上下左右；這四部分可同時(shí)設(shè)置，也可分別設(shè)置；內(nèi)邊距可以理解為盒子里裝的東西和邊框的距離，而邊框有厚薄和顏色之分，內(nèi)容就是盒子中間裝的東西，外邊距就是邊框外面自動(dòng)留出的一段空白。

可以認(rèn)為每個(gè)html標(biāo)簽都是一個(gè)方塊，然后這個(gè)方塊又包著幾個(gè)小方塊，如同盒子一層層的包裹著，這就是所謂的盒模型。

盒模型的分類(lèi)(box-sizing)

W3C 盒子模型(標(biāo)準(zhǔn)盒模型)

• W3C 盒子模型(標(biāo)準(zhǔn)盒模型)
  
  屬性width,height只包含內(nèi)容content，不包含border和padding。

• IE 盒子模型(怪異盒模型)
  
  屬性width,height包含border和padding，指的是content+padding+border
  在ie8+瀏覽器中使用哪個(gè)盒模型可以由box-sizing(CSS新增的屬性)控制，默認(rèn)值為content-box，即標(biāo)準(zhǔn)盒模型；如果將box-sizing設(shè)為border-box則用的是IE盒模型。如果在ie6,7,8中DOCTYPE缺失會(huì)觸發(fā)IE模式。在當(dāng)前W3C標(biāo)準(zhǔn)中盒模型是可以通過(guò)box-sizing自由的進(jìn)行切換的。

兩種盒模型的區(qū)別

寬度和高度的計(jì)算方式不同

標(biāo)準(zhǔn)盒模型：

width = 內(nèi)容的寬度
height = 內(nèi)容的高度

怪異盒模型:

width = border + padding + 內(nèi)容的寬度
height = border + padding + 內(nèi)容的高度

如何在CSS 設(shè)置這兩個(gè)模型

標(biāo)準(zhǔn)盒模型(默認(rèn))：

box-sizing: content-box

怪異盒模型：

box-sizing: border-box

盒子中的區(qū)域

一個(gè)盒子中主要的屬性有5個(gè)：width、height、padding、border、margin。

width：寬度。CSS中width指的是內(nèi)容的寬度，而不是盒子的寬度。

height：高度。CSS中height指的是盒子的高度，而不是內(nèi)容的高度。

padding：內(nèi)邊距。（盒子與盒子內(nèi)部的文本之間）

border：邊框。

margin：外邊距。（盒子與盒子之間）

認(rèn)識(shí)width、height

width:代表盒子內(nèi)容的寬度
height:代表盒子內(nèi)容的高度

認(rèn)識(shí)padding(內(nèi)邊距)

padding就是內(nèi)邊距。padding的區(qū)域有背景顏色，并且背景顏色一定和內(nèi)容區(qū)域相同。也就是說(shuō)，background將填充所有border以內(nèi)的區(qū)域。

padding有四個(gè)方向，所以能夠分別描述4個(gè)方向的padding。方法有兩種，第一種是寫(xiě)小屬性；第二種是寫(xiě)綜合屬性，中間用空格隔開(kāi)。

小屬性：

• 上：padding-top：30px；

• 右：padding-right：30px；

• 下：padding-bottom：30px；

• 左：padding-left：30px；

這種屬性就是復(fù)合屬性，比如不寫(xiě)padding-left那么就是沒(méi)有左內(nèi)邊距。

快捷鍵：pdt、pdr、pdb、pdl然后按下tab鍵。

綜合屬性：

• 如果寫(xiě)了四個(gè)值：
  padding：10px 30px 40px 20px;（中間用空格隔開(kāi)）
  則分別表示上、右、下、左。

• 如果只寫(xiě)了三個(gè)值：
  padding：10px 30px 20px；（中間用空格隔開(kāi)）
  則依次表示上、右、下，左和右一樣。

• 如果只寫(xiě)了兩個(gè)值：
  padding：10px、20px；
  則依次表示上、右，下和上一樣，左和右一樣。

• 如果只寫(xiě)一個(gè)值
  padding: 10px;
  則表示上、右、下、左都為10px

• 但是一些元素是默認(rèn)帶有padding的：

比如：ul標(biāo)簽。

為了便于控制，一般會(huì)選擇清除這個(gè)默認(rèn)的padding。

*{

margin: 0;

padding: 0;

}

認(rèn)識(shí)margin(外邊距)

外邊距更很好理解，就是指邊框以外的距離，可以表示和其它元素之間的距離，使用margin屬性來(lái)設(shè)置

margin也是有四個(gè)方向，所以能夠分別描述4個(gè)方向的margin。方法有兩種，第一種是寫(xiě)小屬性；第二種是寫(xiě)綜合屬性，中間用空格隔開(kāi)。

小屬性：

• 上：margin-top：30px；

• 右：margin-right：30px；

• 下：margin-bottom：30px；

• 左：margin-left：30px；

• 外邊距可以有負(fù)值
  margin-left和margin-top可以改變這個(gè)元素本身的位置
  margin-right 和margin-bottom 不能改變這個(gè)元素本身的位置，只能改變這個(gè)元素右邊和下邊元素的位置

綜合屬性：

• 如果寫(xiě)了四個(gè)值：
  margin：10px 30px 40px 20px;（中間用空格隔開(kāi)）
  則分別表示上、右、下、左。

• 如果只寫(xiě)了三個(gè)值：
  margin：10px 30px 20px；（中間用空格隔開(kāi)）
  則依次表示上、右、下，左和右一樣。

• 如果只寫(xiě)了兩個(gè)值：
  margin：10px、20px；
  則依次表示上、右，下和上一樣，左和右一樣。

• 如果只寫(xiě)一個(gè)值
  margin: 10px;
  則表示上、右、下、左都為10px

外邊距實(shí)現(xiàn)盒子居中

可以讓一個(gè)盒子實(shí)現(xiàn)水平居中，需要滿足一下兩個(gè)條件：

必須是塊級(jí)元素。
盒子必須指定了寬度（width）
然后就給左右的外邊距都設(shè)置為auto，就可使塊級(jí)元素水平居中。
實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁(yè)布局，示例代碼如下：

.header{ width:960px; margin:0 auto;}

認(rèn)識(shí)border(邊框)

border就是邊框，有三個(gè)要素：粗細(xì)、線型、顏色。

顏色如果不寫(xiě)，則默認(rèn)為黑色。另外領(lǐng)個(gè)屬性不寫(xiě)，則顯示不出邊框。

格式：border：1px solid red；

所有線型如圖：

點(diǎn)畫(huà)線：dotted；

虛線：dashed;

實(shí)線：solid；

雙實(shí)線：double；

border屬性是一個(gè)大綜合屬性：（一個(gè)border由三個(gè)小屬性綜合而成）

border：1px solid red；

就是把4個(gè)方向的邊框都設(shè)置成1px寬度、線型為實(shí)線、紅色的。

border有兩種拆開(kāi)方式：

1）按3要素：border-width、border-style、border-color

2）按方向：border-top、border-right、border-bottom、border-left

（按方向還能再拆一層，就是把每個(gè)方向再按照3要素拆開(kāi)，一共十二條語(yǔ)句。如：border-top-width：1px;）

如果某個(gè)小屬性后面是空格隔開(kāi)的多個(gè)值，那么做從上右下左規(guī)則。（同padding）
如：
border-width：10px 20px；（上右下左的線寬）

border-style：solid dashed dotted；（上右下左的線型）

border-color：red pink skyblue；（上右下左的顏色）

在工作中的寫(xiě)法：怎樣簡(jiǎn)單怎樣寫(xiě)。border可以沒(méi)有。

如：border：none；

border某一條邊框沒(méi)有：border-left：none；

或者寫(xiě)成寬度為0

定位屬性(position)

文檔流：自窗體自上而下分成一行一行，并在每行中按從左到右的順序排放元素。

脫離文檔流：浮動(dòng)float、絕對(duì)定位absolute、固定定位fixed、元素不顯示display:none

定位類(lèi)型：絕對(duì)定位（absolute）、相對(duì)定位（relative）、固定定位（fixed）和默認(rèn)的文檔流布局方式（static）。

1、靜態(tài)定位（static）

它是position的默認(rèn)值，一般不設(shè)置position屬性時(shí)，元素會(huì)按照正常的文檔流進(jìn)行排列。

2、相對(duì)定位（relative）

相對(duì)定位：不脫離文檔流的布局，只改變自身的位置，在文檔流原先的位置遺留空白區(qū)域。定位的起始位置為此元素原先在文檔流的位置。

• 如：

  <style>
      body div:nth-of-type(1n + 1) {
        border: solid rebeccapurple solid;
        width: 10rem;
        height: 10rem;
        background-color: rebeccapurple;
        margin: 1rem;
      }
      .box2 {
      /*相對(duì)定位*/
        position: relative;
        left: 15rem;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </body>

  

3、固定定位（fixed）

固定定位：fixed是特殊的absolute，按照瀏覽器的窗口進(jìn)行定位。
即使拖動(dòng)滾動(dòng)條，元素的位置也是不變的，我們使用瀏覽器時(shí)一些廣告的效果就是這樣的。

4、絕對(duì)定位（absolute）

絕對(duì)定位：脫離文檔流的布局，遺留下來(lái)的空間由后面的元素填充。定位的起始位置為最近的父元素(postion不為static)，否則為body文檔本身。

• 如：

  <style>
      body div:nth-of-type(1n + 1) {
        border: solid rebeccapurple solid;
        width: 10rem;
        height: 10rem;
        background-color: rebeccapurple;
        margin: 1rem;
      }
      .box2 {
       /*絕對(duì)定位*/
        position: absolute;
        left: 15rem;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </body>

  

5、三種定位總結(jié)：

相對(duì)定位：position:relative
相對(duì)定位：不脫離文檔流
相對(duì)定位：自動(dòng)的轉(zhuǎn)為定位元素

絕對(duì)定位：position:absolute
絕對(duì)定位：脫離文檔流
文檔流：顯示順序與書(shū)寫(xiě)順序一致

固定定位：position:fixed
固定定位：永遠(yuǎn)相對(duì)于html定位

定位元素：只要這個(gè)元素上有非static的定位屬性，就是定位元素
只要是定位元素，定位偏移量就有效，可以被其他的定位元素當(dāng)成定位參照物
定位偏移量有 top bottom left right

6、使用定位實(shí)現(xiàn)元素在盒子中垂直水平居中

<style>
      .box {
        /* 相對(duì)定位 */
        position: relative;
        border: rebeccapurple 1px solid;
        width: 20rem;
        height: 20rem;
        background-color: rebeccapurple;
      }
      .box2 {
        background-color: yellow;
        width: 10rem;
        height: 10rem;
        /* 絕對(duì)定位 */
        position: absolute;
        /* 設(shè)置垂直、水平居中 */
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box2"></div>
    </div>
  </body>

• 原理：
  布局的基本前提：寬度受限，而高度不限。
  所以塊狀元素定位時(shí)要先確定四個(gè)點(diǎn) 上下左右都為0，確定后方能居中。
  使用絕對(duì)定位一步搞定垂直、水平居中。

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：