技術標籤：htmlhtmlcss

目錄

• • 1、小div在大div中如何水平垂直居中
  • • 方法一：使用定位的方法
    • 方法二:利用定位及margin:auto實現
    • 方法三:使用display:table-cell;
    • 方法四:使用伸縮佈局display:flex
    • 方法五:計算四周的間距設定子元素與父元素之間的margin-top和margin-left;
  • 2、為什麼要浮動？為什麼要清浮動？如何清浮動？
  • • 2.1為什麼要浮動？
    • 2.2為什麼要清浮動？
    • 2.3如何清浮動？
  • 3、定位，每種定位的參照點在哪？
  • 4、行內元素，塊元素，行內塊元素有哪些？都有什麼特點？
  • 5、CSS選擇器優先順序及權重計算
  • • 5.1優先順序分類
    • 5.2選擇器的權重
  • 6、border-style（易遺忘知識）
  • 7、盒子水平居中，文字水平居中
  • 8、margin值代表的意思
  • • • 例子 1
      • 例子 2
      • 例子 3
      • 例子 4
  • 9、box-sizing屬性

1、小div在大div中如何水平垂直居中

首先看一下要實現的效果圖及對應的html程式碼：

<div class="parent">
    <div class="child">
                
    </div>
</div>

方法一：使用定位的方法

            .parent {
                width
 
: 300px;
                height: 200px;
                border: 1px solid red;
                position:relative;
            }
            .child {
                width: 100px;
                height: 100px;
                border: 1px solid violet;
                position:absolute;
                top: 50%;
 

                left:50%;
                margin-top: -50px;     /*這裡是小盒子高的一半*/
                margin-left: -50px;    /*這裡是小盒子寬的一半*/
            }            

使用定位方法,需要知道子元素的寬高,但是不需要知道父元素的寬高.

方法二:利用定位及margin:auto實現

            .parent {
                width: 300px;
                height: 200px;
                border: 1px solid red;
                position:relative;
            }
            .child {
                width: 100px;
                height: 100px;
                border: 1px solid violet;
                position: absolute;
                margin: auto;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

實現原理是設定margin自動適應,然後設定定位的上下左右都為0,就如四邊均衡受力從而實現盒子的居中;

方法三:使用display:table-cell;

            .parent {
                width: 300px;
                height: 200px;
                border: 1px solid red;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
            .child {
                width: 100px;
                height: 100px;
                border: 1px solid violet;
                display: inline-block;
            }

實現原理: 
display:table-cell屬性指讓標籤元素以表格單元格的形式呈現，類似於td標籤.
組合使用vertical-align,text-align,可以使父元素內的所有行內元素水平垂直居中（也就是將內部的元素設定display:inline-block）

方法四:使用伸縮佈局display:flex

            .parent {
                width: 300px;
                height: 200px;
                border: 1px solid red;
                display: flex;
                justify-content: center;  /*水平居中*/
                align-items: center;      /*垂直居中*/
            }
            .child {
                width: 100px;
                height: 100px;
                border: 1px solid violet;
            } 

方法五:計算四周的間距設定子元素與父元素之間的margin-top和margin-left;

            .parent {
                width: 300px;
                height: 200px;
                border: 1px solid red;
            }
            .child {
                width: 100px;
                height: 100px;
                border: 1px solid violet;
                margin-top: 50px;
                margin-left: 100px;
            }

最後這種方法需要同時知道父元素與子元素的寬高,不方便日後的維護.

2、為什麼要浮動？為什麼要清浮動？如何清浮動？

2.1為什麼要浮動？

原本的浮動是用來實現左邊圖片右邊文字的樣式，後來慢慢發展成佈局的主要手段 。

2.2為什麼要清浮動？

百度：父元素沒有設定高度，裡邊的子元素都浮動，浮動的子元素不能撐開父元素的高度，導致佈局混亂，所以清除浮動是為了讓浮動元素撐開父元素的高度

個人：佈局的時候，小盒子在標準流，一浮動，父盒子高為0，影響下面盒子佈局

2.3如何清浮動？

1.給父級div定義height （給父元素設定高）

原理：父級div手動定義高度，就解決了父級div無法自動獲取到高度的問題，簡單，程式碼少，容易掌握，但只適合高度固定的佈局

2.額外標籤法清除浮動： （在浮動元素後面加空標籤）

原理：在最後一個浮動元素的後面新增一個空div元素，利用css提供的clear:both清除浮動，讓父級div能自動獲取到高度，如果頁面浮動佈局多，就要增加很多div,讓人感覺很不好

<div style='clear:both'></div>

3.給浮動元素的父元素定義overflow:hidden
超出盒子部分會被隱藏，不推薦使用 （給父元素設定 overflow:hidden）

4.單偽元素清除浮動： （偽元素清浮動）

個人：

/* 偽元素清浮動 */
.clear::after {
    content: '';
    display: block;
    clear: both;
}

百度：父級div定義偽類
清除浮動程式碼：

.clearfix:after{
          content:“”;               //content為必填項
          display:block;            //偽元素預設為行內元素，轉為塊元素
          visibility:hidden;        //元素顯示模式為隱藏
          height:0;                //高度設為0
          clear:both;              //清除浮動
}
.clearfix{
          *zoom:1;                  //相容ie6,7老版瀏覽器
}

5.雙偽元素清除浮動

.clearfix:before,.clearfix:after{
           content:'';
           display:block;
           clear:both;
}
.clearfix{
           *zoom:1;
}

3、定位，每種定位的參照點在哪？

4、行內元素，塊元素，行內塊元素有哪些？都有什麼特點？

常用的行內元素有：span , a , em , b , i , strong …

特點：

1. 和其它元素都在一行上
2. 元素的寬度、高度及頂部和頂部邊距都不能設定
3. 元素的寬度就是它所包含的文字或圖片的寬度，不可修改。

常用的塊級元素有：div , p , h1~h6 , ol , ul , dl , form , table , address …

特點：

1. 每個塊級元素都獨佔
2. 元素的寬度、高度、行高及頂部和底部邊距可以設定
3. 元素寬度在不設定的情況下，和它父元素的寬度一致。

常用的行內元素有：img , input , td

特點：

1. 和其它元素都在一行上
2. 元素的寬度、高度、行高及頂部和底部邊距可以設定。

元素之間是如何轉換的？

• 變為塊級元素（獨佔一行，可控）：display: block;
• 變為行內元素（不會獨佔一行，不可控）：display: inline;
• 變為行內塊元素（可設定寬高，margin,padding）：display: inline-block;

5、CSS選擇器優先順序及權重計算

5.1優先順序分類

1. 第一優先順序：無條件優先的屬性只需要在屬性後面使用！important。它會覆蓋頁面內任何位置定義的元素樣式。ie6不支援該屬性。
2. 第二優先順序：在html中給元素標籤加style，即內聯樣式。該方法會造成css難以管理，所以不推薦使用。
3. 第三優先順序：由一個或多個id選擇器來定義。例如，#id{margin:0;}會覆蓋.classname{margin:3pxl}
4. 第四優先順序：由一個或多個類選擇器、屬性選擇器、偽類選擇器定義。如.classname{margin:3px}會覆蓋div{margin:6px;}
5. 第五優先順序：由一個或多個型別選擇器定義。如div{marigin:6px;}覆蓋*{margin:10px；}
6. 第六優先順序：通配選擇器，如*{marigin:6px;}

5.2選擇器的權重

• 第一等級：代表內聯樣式，如style=""，權值為 1000
• 第二等級：代表id選擇器，如#content，權值為100
• 第三等級：代表類，偽類和屬性選擇器，如.content，權值為10
• 第四等級：代表標籤選擇器和偽元素選擇器，如div p，權值為1

6、border-style（易遺忘知識）

7、盒子水平居中，文字水平居中

• 盒子水平居中： margin:0 auto;
• 文字水平居中： text-align:center;

8、margin值代表的意思

例子 1

margin:10px 5px 15px 20px;

• 上外邊距是 10px
• 右外邊距是 5px
• 下外邊距是 15px
• 左外邊距是 20px

例子 2

margin:10px 5px 15px;

• 上外邊距是 10px
• 右外邊距和左外邊距是 5px
• 下外邊距是 15px

例子 3

margin:10px 5px;

• 上外邊距和下外邊距是 10px
• 右外邊距和左外邊距是 5px

例子 4

margin:10px;

• 所有 4 個外邊距都是 10px

9、box-sizing屬性