css布局盒子模型

盒子模型的組成

1.border:邊框
(1)width:邊框?qū)挾?br> (2)color:邊框顏色
(3)style:邊框樣式
①solid:虛線 ②dashed:虛線 ③dotted:點(diǎn)線
border-top:上邊框 border-left:左邊框 border-right:右邊框 border-bottom:下邊框

div {
     border: 1px solid #ccc;
    }

2.content內(nèi)容

3.padding內(nèi)邊距
padding會(huì)撐開(kāi)盒子,如果本身沒(méi)有設(shè)置width屬性,則不會(huì)撐開(kāi)盒子

4.margin外邊距
典型應(yīng)用:塊級(jí)盒子居中對(duì)齊,盒子必須指定寬度,左右外邊距設(shè)置auto
清除內(nèi)外邊距

* {
   margin: 0;
   padding: 0;
  }

外邊距合并

對(duì)于兩個(gè)嵌套關(guān)系的塊元素,父元素有上外邊距.同時(shí)子元素也有上外邊距,此時(shí)父元素會(huì)塌陷較大的外邊距值
解決方案:
1.為父元素定義上邊框

div {
     border: 1px solid transparent;
    }

2.為父元素定義上內(nèi)邊距

div {
     padding-top: 1px;
    }

3.為父元素添加overflow: hidden

div {
     overflow: hidden;
    }

盒子實(shí)際大小計(jì)算公式

注意:①設(shè)置width和height是內(nèi)容的寬高 ②設(shè)置border會(huì)撐大盒子 ③設(shè)置padding會(huì)撐大盒子
計(jì)算公式：
盒子寬度=左邊框+左padding+內(nèi)容寬度+右padding+右邊框
盒子高度=上邊框+上padding+內(nèi)容寬度+下padding+下邊框
當(dāng)盒子被border和padding撐大后,給盒子設(shè)置屬性 box-sizing:border-box,瀏覽器會(huì)自動(dòng)計(jì)算多余大小,自動(dòng)在內(nèi)容中減去

div {
     border: 1px solid transparent;
     box-sizing: border-box;
    }

浮動(dòng)

典型浮動(dòng)：可以讓多個(gè)盒子在一行中無(wú)縫對(duì)齊,排列顯示
float屬性用于創(chuàng)建浮動(dòng)框,將其移動(dòng)到另一邊,直到左右邊緣或另一個(gè)浮動(dòng)框的邊緣

浮動(dòng)特性

1.浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)流
脫離標(biāo)準(zhǔn)流控制移動(dòng)到指定位置,浮動(dòng)的盒子不再保留原先的位置
2.浮動(dòng)元素會(huì)一行內(nèi)顯示,并且元素頂部對(duì)齊
3.浮動(dòng)元素會(huì)具有行內(nèi)塊元素特性
如果行內(nèi)元素添加了浮動(dòng)屬性,則不需要轉(zhuǎn)換為塊級(jí)元素/行內(nèi)塊元素

清除浮動(dòng)

本質(zhì):清除浮動(dòng)元素造成的影響
方法:1.額外標(biāo)簽法 在最后一個(gè)盒子加一個(gè)標(biāo)簽

<div class="clearfix">Hello,world</div>
.clearfix {
          clear: both;
        }

2.父級(jí)添加overflow屬性

div {
     overflow: hidden;
    }

3.父級(jí)添加after偽元素

<div class="clearfix">Hello,world</div>
.clearfix::after {
               content: ' ';
               display: block;
               height: 0;
               clear: both;
               visibility: hidden;
              }

4.父級(jí)添加雙偽元素

<div class="clearfix">Hello,world</div>
.clearfix::after，
.clearfix::before {
                content: ' ';
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
              }

結(jié)構(gòu)偽類(lèi)選擇器

根據(jù)元素在HTML中的結(jié)構(gòu)關(guān)系查找元素,常用于查找某父級(jí)選擇器中的子元素
1.E:fist-child { } :匹配父元素中第一個(gè)子元素,并且是E元素
2.E:last-child { } :匹配父元素中最后一個(gè)子元素,并且是E元素
3.E:nth-child(n) { } :匹配父元素中第n個(gè)子元素,并且是E元素
3.E:nth-last-child(n) { } :匹配父元素中倒數(shù)第n個(gè)子元素,并且是E元素
注:n為0、1、2、3、4、5、6...

通過(guò)n組成常見(jiàn)公式
偶數(shù):2n、even
奇數(shù):2n+1、2n-1、odd
前5個(gè):-n+5
從第5個(gè)往后:n+5