• 所有的頁(yè)面元素都可以看成一個(gè)盒子盐类，并且占據(jù)著一定的頁(yè)面空間寞奸。無(wú)論是div、span在跳、還是a都是盒子枪萄，但是，圖片猫妙、表單元素一律看作是文本瓷翻，它們并不是盒子。比如說(shuō)割坠，一張圖片里并不能放東西齐帚，它自己就是自己的內(nèi)容；
• 盒子模型是由content(內(nèi)容)韭脊、 padding(內(nèi)邊距)童谒、 margin(外邊距)、 border(邊框)這四個(gè)屬性組成的沪羔。

盒模型就是指CSS布局中的每一個(gè)元素饥伊，在瀏覽器的解釋中，都被當(dāng)做一個(gè)盒裝物蔫饰。對(duì)我們來(lái)說(shuō)琅豆，只需要理解元素在頁(yè)面中所占據(jù)的位置。

border邊框

• 復(fù)合樣式：border:邊框大小 類型 顏色;

border:5px solid #006633篓吁；

border-width: 5px;      大小
border-style: solid;    類型
border-color: red;      顏色
border-top:0px;       /*去除上邊框*/
border-top:none;      /*去除上邊框*/

• border-width：邊框大小
  • 四個(gè)值：上 右 下 左(順時(shí)針)
  • 三個(gè)值：上 左右 下
  • 二個(gè)值：上下 左右
  • 一個(gè)值：四個(gè)方向值相等
  • border-top-width 頂部邊框大小
  • border-right-width 右邊框大小
  • border-bottom-width 底部邊框大小
  • border-left-width 左邊框大小
• border-style： 邊框類型
  • solid 實(shí)線
  • dashed 虛線
  • dotted 點(diǎn)線
  • double 雙邊框
  • border-top-style 頂部邊框類型
  • border-right-style 右邊框類型
  • border-bottom-style 底部邊框類型
  • border-left-style 左邊框類型
• border-color 邊框顏色
  • 四個(gè)值：上 右 下 左(順時(shí)針)
  • 三個(gè)值：上 左右 下
  • 二個(gè)值：上下 左右
  • 一個(gè)值：四個(gè)方向顏色一樣
  • border-top-color 頂部邊框顏色
  • border-right-color 右邊框顏色
  • border-bottom-color 底部邊框顏色
  • border-left-color 左邊框顏色

padding內(nèi)邊距

邊框與內(nèi)容之間的距離

• 四個(gè)值：上 右 下 左(順時(shí)針)
• 三個(gè)值：上 左右 下
• 二個(gè)值：上下 左右
• 一個(gè)值：四個(gè)方向值相等
• padding-top 頂部?jī)?nèi)邊距
• padding-right 右內(nèi)邊距
• padding-bottom 底部?jī)?nèi)邊距
• padding-left 左內(nèi)邊距

margin外邊距

元素與其他元素的距離（邊框以外的距離）

• margin-top 頂部外邊距
• margin-right 右外邊距
• margin-bottom 底部外邊距
• margin-left 左外邊距
• 自動(dòng)水平居中
  • margin:auto; 左右居中
  • margin:20px auto; 上下20px 左右居中
  • margin:20px auto 0; 上20px 左右居中 下0

盒子大小的計(jì)算

• content+border+padding盒子大小 = 樣式寬 + 內(nèi)邊距 + 邊框
• 盒子寬度 = 左border+左padding+width+右padding +右border
• 盒子高度 = 上border+上padding+height+下padding+下border

文檔流

文檔流是瀏覽器解析網(wǎng)頁(yè)的一個(gè)重要概念茫因，對(duì)于一個(gè)XHTML網(wǎng)頁(yè)，body元素下的任意元素杖剪，根據(jù)其前后順序冻押，組成了一個(gè)個(gè)上下關(guān)系，這便是文檔流盛嘿。瀏覽器根據(jù)這些元素順序去顯示他們?cè)诰W(wǎng)頁(yè)中的位置洛巢。
文檔流是瀏覽器默認(rèn)顯示規(guī)則

float浮動(dòng)

浮動(dòng)起初作用是為了讓文字環(huán)繞效果。

• 浮動(dòng)的定義：使元素脫離文檔流 次兆，按照指定（左右）方向發(fā)生移動(dòng)稿茉，遇到父級(jí)邊界或者相鄰的浮動(dòng)元素停了下來(lái)；
• 文檔流 是文檔中可顯示對(duì)象在排列時(shí)所占用的位置/空間（在頁(yè)面中占位置）；
• 脫離文檔流 ：在頁(yè)面內(nèi)中不占位置漓库，所以浮動(dòng)元素后面的元素會(huì)占據(jù)浮動(dòng)元素本來(lái)應(yīng)該所處的位置恃慧。
• 如果水平方向上沒(méi)有足夠的空間容納浮動(dòng)元素，則轉(zhuǎn)向下一行

浮動(dòng)的一般情況

• float:left;
• float:right;
• none;

如果一個(gè)元素（無(wú)論是塊級(jí)元素還是行內(nèi)元素）被設(shè)置為float之后渺蒿，那么它默認(rèn)會(huì)添加屬性display:inline-block（行內(nèi)塊級(jí)元素）痢士，也就是說(shuō)浮動(dòng)會(huì)讓元素變?yōu)閾碛袎K級(jí)屬性的行內(nèi)元素，這時(shí)它的默認(rèn)寬度不是100%蘸嘶，且給該元素設(shè)置padding-top和padding-bottom或者width良瞧、height都是有效果的。

清除浮動(dòng)

• 什么情況下需要清除浮動(dòng)训唱？
  父元素沒(méi)有高度（指的是不設(shè)值，height:0不算）的情況下挚冤，里面的子元素都設(shè)置了浮動(dòng)况增。
  只要浮動(dòng)在一個(gè)有高度的盒子中，那么這個(gè)浮動(dòng)就不會(huì)影響后面的浮動(dòng)元素训挡。 但是一般澳骤，高度height很少出現(xiàn)。為什么澜薄？因?yàn)槟鼙粌?nèi)容撐高为肮！
• 為什么需要清除浮動(dòng)？
  當(dāng)元素設(shè)置浮動(dòng)屬性后肤京，會(huì)對(duì)相鄰的元素產(chǎn)生影響颊艳。相鄰元素是指緊鄰后面的元素。
• 清除浮動(dòng)辦法：

1. overflow: hidden; 是將父元素解除浮動(dòng)的影響忘分，需要注意這個(gè)屬性不僅能清除浮動(dòng)棋枕，還有超出隱藏效果。
   給沒(méi)有設(shè)置高度的父元素設(shè)置overflow:hidden妒峦，一個(gè)父親不能被自己浮動(dòng)的兒子重斑，撐出高度。但是肯骇，只要給父親加上overflow:hidden; 那么窥浪，父親就能被兒子撐出高了。

# 時(shí)下主流笛丙，應(yīng)該用在包含浮動(dòng)元素的父元素上漾脂；
.clearfix:after{
              content:'';
              display:block;
              clear:both;
              height:0;  
           } 

css給塊級(jí)元素設(shè)上display: inline與float:left的區(qū)別是什么？
設(shè)了float:left的元素允許它的右邊存在任何元素同行顯示若债，不論是內(nèi)聯(lián)元素還是塊元素符相。但它的左邊還是不允許存在任何元素與之同行顯示，哪怕其它的元素的代碼在前，除非也給前面的元素加上float:left后啊终，才允許同行顯示镜豹。
設(shè)了display:inline的元素，允許它的前后存在其它的內(nèi)聯(lián)元素同行顯示蓝牲。如果要讓代碼在前面的塊元素與之同行顯示趟脂，則要讓前面的元素浮動(dòng)（不管是左還是右浮動(dòng)）或設(shè)為display:inline，如果要讓代碼在后面的塊元素與之同行顯示例衍，則只能設(shè)為display:inline昔期，浮動(dòng)不起作用（無(wú)論左浮動(dòng)還是右浮動(dòng)）。即允許內(nèi)聯(lián)同行佛玄，塊級(jí)要看情況硼一。 給塊級(jí)元素設(shè)上display:inline是解決有名的IE6中雙倍浮動(dòng)的利器。

position定位

規(guī)定元素的定位類型

• static 靜態(tài)定位（沒(méi)有定位）梦抢，默認(rèn)值般贼。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）奥吩。
• relative 相對(duì)定位哼蛆，相對(duì)于其正常位置進(jìn)行定位。
  不會(huì)脫離文檔流霞赫；
  不影響元素本身的特性腮介；
  如果沒(méi)有定位偏移量，對(duì)元素本身沒(méi)有任何影響端衰；
• absolute 絕對(duì)定位叠洗，最近非static定位的父級(jí)進(jìn)行定位。
  使元素完全脫離文檔流靴迫；
  沒(méi)有定位父級(jí)則相對(duì)于body(整個(gè)文檔)發(fā)生偏移惕味；
  絕對(duì)定位一般配合相對(duì)定位使用；
• fixed 固定定位玉锌，相對(duì)于瀏覽器窗口進(jìn)行定位名挥。

方位詞

• left: 距離左邊的距離
• right: 距離右邊的距離
• top:距離頂部的距離
• bottom:距離底部的距離
• z-index 規(guī)定定位的層級(jí)（默認(rèn)0），僅能在定位元素上奏效主守。
  值：number 值越大層級(jí)越高
  注意：方位詞相對(duì)于哪個(gè)對(duì)象偏移的

注意1：float和absolute會(huì)脫離文檔流禀倔，所以對(duì)其設(shè)置寬高，不會(huì)影響其父元素的参淫，切不要想通過(guò)設(shè)置其來(lái)?yè)伍_父級(jí)元素救湖！

注意2：需要注意的是，使用float脫離文檔流時(shí)涎才，其他盒子會(huì)無(wú)視這個(gè)元素鞋既，但其他盒子內(nèi)的文本依然會(huì)為這個(gè)元素讓出位置力九，環(huán)繞在周圍。而對(duì)于使用absolute positioning脫離文檔流的元素邑闺，其他盒子與其他盒子內(nèi)的文本都會(huì)無(wú)視它跌前。

案例

需求：實(shí)現(xiàn)如下效果
①進(jìn)入的時(shí)候界面：

image.png

②鼠標(biāo)進(jìn)入里面，兩邊“耳朵”顯示出來(lái)：

image.png

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第四次作業(yè)</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            margin: 50px auto; /*左右居中*/
            width: 520px;
            height: 280px;
            position: relative;
        }
        ul.tab{
            width: 110px;
            height: 20px;
            border: 1px solid red;
            border-radius:20px;
            background: rgba(255,255,255,0.4);
            overflow: hidden;/*!*取消因li浮動(dòng)導(dǎo)致的橫線效果*!*/
            position: absolute;
            bottom: 10px; /*相對(duì)于父級(jí)div偏移*/
            left: 50%; /*左偏移50%*/
            margin-left: -50px;/*左邊距再往回移動(dòng)50px*/

        }
        ul.tab li{
            list-style: none;
            width: 10px;
            height: 10px;
            border: 1px solid red;
            background: white;
            border-radius: 50%;
            float: left; /*使li左浮動(dòng)*/
            margin: 5px; /*間隔拉大點(diǎn)*/

        }

        ul.btn li{
            list-style: none;
            width: 25px;
            height: 30px;
            background: rgba(0,0,0,0.2);
            text-align: center;/*使li里面的內(nèi)容水平居中和垂直居中*/
            line-height: 30px;
            font-size: 20px;
            color: white;
            position: absolute;/*因?yàn)橐玫阶笥乙粋€(gè)li抵乓，所以定位寫在li里面，它會(huì)參考最近非static定位的父級(jí)進(jìn)行定位即div*/
            top: 50%;
            margin-top: -15px;
            display:none;/*先隱藏起來(lái)*/
        }
        ul.btn li.left{
            left:0; /*相對(duì)于div左移*/
            border-radius:0 20px 20px 0;
            margin-left: -5px;
        }
        ul.btn li.right{
            right:0;/*相對(duì)于div右移*/
            border-radius:20px 0 0 20px;
            margin-right: -5px;
        }
        ul.tab li:hover{
            background: #F40;
            cursor: pointer;
        }
        div:hover ul.btn li{
            display: block;/*顯示*/
        }
        div ul.btn li:hover{
            background: rgba(0,0,0,0.7);
            cursor: pointer;
        }

    </style>
</head>
<body>
    <div>
        <img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt=""/>
        <ul class="tab">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="btn">
            <li class="left">&lt;</li>
            <li class="right">&gt;</li>
        </ul>
    </div>
</body>
</html>