盒模型

　　盒模型是有兩種標準的，一個是標準模型，一個是IE模型。

　　

css如何設置兩種模型

這里用到了CSS3 的屬性 box-sizing

/* 標準模型 */ box-sizing:content-box;/*IE模型*/ box-sizing:border-box;

行內元素

行內元素對margin的支持

　　行內元素不支持margin-top與margin-bottom。塊級元素及行內塊沒有這個問題。

行內元素對padding的支持

　　行內元素設置padding-top會向上延伸一段距離，會覆蓋住上面的節點。padding-bottom會向下延伸一段距離，會覆蓋住下面的節點。塊級元素及行內塊沒有這個問題。

JS獲取寬高

通過JS獲取盒模型對應的寬和高，有以下幾種方法：

為了方便書寫，以下用dom來表示獲取的HTML的節點。

1. ?dom.style.width/height?

　　這種方式只能取到dom元素內聯樣式所設置的寬高，也就是說如果該節點的樣式是在style標簽中或外聯的CSS文件中設置的話，通過這種方法是獲取不到dom的寬高的。

?2. dom.currentStyle.width/height?

　　這種方式獲取的是在頁面渲染完成后的結果，就是說不管是哪種方式設置的樣式，都能獲取到。

　　但這種方式只有IE瀏覽器支持。

?3. window.getComputedStyle(dom).width/height

　　這種方式的原理和2是一樣的，這個可以兼容更多的瀏覽器，通用性好一些。

?4. dom.getBoundingClientRect().width/height

　　這種方式是根據元素在視窗中的絕對位置來獲取寬高的

?5.dom.offsetWidth/offsetHeight

　　這個就沒什么好說的了，最常用的，也是兼容最好的。

?

邊距重疊

父元素沒有設置margin-top，而子元素設置了margin-top：20px;可以看出，父元素也一起有了邊距。

邊距重疊解決方案(BFC)

首先要明確BFC是什么意思，其全英文拼寫為 Block Formatting Context 直譯為“塊級格式化上下文”

BFC的原理

內部的box會在垂直方向，一個接一個的放置

每個元素的margin box的左邊，與包含塊border box的左邊相接觸（對于從右往左的格式化，否則相反）

box垂直方向的距離由margin決定，屬于同一個bfc的兩個相鄰box的margin會發生重疊

bfc的區域不會與浮動區域的box重疊

bfc是一個頁面上的獨立的容器，外面的元素不會影響bfc里的元素，反過來，里面的也不會影響外面的

計算bfc高度的時候，浮動元素也會參與計算

?怎么取創建bfc

float屬性不為none（脫離文檔流）

position為absolute或fixed

display為inline-block,table-cell,table-caption,flex,inline-flex

overflow不為visible

根元素

應用場景

自適應兩欄布局

清除內部浮動?

防止垂直margin重疊

清楚浮動

浮動對頁面的影響：

　　　　如果一個父盒子中有一個子盒子，并且父盒子沒有設置高，子盒子在父盒子中進行了浮動，那么將來父盒子的高度為0.由于父盒子的高度為0，

　　　　下面的元素會自動補位，所以這個時候要進行浮動的清除。

　　方式一:使用overflow屬性來清除浮動

　　　　.ovh{

　　　　　　overflow:hidden;

　　　　　}

　　　　先找到浮動盒子的父元素，再在父元素中添加一個屬性：overflow:hidden,就是清除這個父元素中的子元素浮動對頁面的影響.

　　　　注意：一般情況下也不會使用這種方式，因為overflow:hidden有一個特點，離開了這個元素所在的區域以后會被隱藏（overflow:hidden會將超出的部分隱藏起來）.

　方式二:使用額外標簽法

　　　　.clear{

　　　　　　clear:both;

　　　　　}

　　　　在浮動的盒子之下再放一個標簽，在這個標簽中使用clear:both，來清除浮動對頁面的影響.

　　　　　　a.內部標簽：會將這個浮動盒子的父盒子高度重新撐開.

　　　　　　b.外部標簽：會將這個浮動盒子的影響清除，但是不會撐開父盒子.

　　　　注意：一般情況下不會使用這一種方式來清除浮動。因為這種清除浮動的方式會增加頁面的標簽，造成結構的混亂.

　　方法三:使用偽元素來清除浮動(after意思:后來,以后)

　　　　.clearfix:after{

　　　　　　content:"";//設置內容為空

　　　　　　height:0;//高度為0

　　　　　　line-height:0;//行高為0

　　　　　　display:block;//將文本轉為塊級元素

　　　　　　visibility:hidden;//將元素隱藏

　　　　　　clear:both//清除浮動

　　　　　}

　　　　.clearfix{

　　　　　　zoom:1;為了兼容IE

　　　　}

　　方法四:使用雙偽元素清除浮動

　　　　.clearfix:before,.clearfix:after {

????? ????? ????? content: "";

????? ????? ????? display: block;

????? ????? ????? clear: both;

????? ????? }

????? ????? .clearfix {

????? ????? ????? zoom: 1;

????? ????? }

?

　　　　總結:第一種方法會將超出部分隱藏在某些時候我們想清除浮動并且保留超出部分時做不到,第二種方法會增加許多不必要的標簽,

　　　　　　所以我們盡量使用第三種方法來清除浮動,為什么不選擇第四種方法呢?因為第四種是第三種的改良版

轉載于:https://www.cnblogs.com/yiyi17/p/8744729.html

總結

以上是生活随笔為你收集整理的CSS基础必备盒模型及清除浮动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。