简要介绍css的盒模型,CSS盒模型的介绍
CSS盒模型的概念與分類
CSS盒模型就是一個盒子，封裝周圍的HTML元素，它包括內容content、邊框border、內邊距padding、外邊距margin。
CSS盒模型分為標準模型和IE模型；
標準模型和IE模型的區別
標準模型：width = 內容content 的寬度；(默認)
設置方式： box-sizing:content-box;
IE模型：width? = 內容content + 邊框border + 內邊距paddig 的寬度；
設置方式： box-sizing:border-box;
通過js如何獲取盒模型的寬高
1.dom.style.width/height
只能獲取到dom的內聯樣式
2.dom.currentStyle.width/height
獲取到的是dom的實際寬高，但這種方式只在IE中可以使用
3.window.getComputedStyle(dom,null).width/height
獲取到的是dom的實際寬高，但是不支持IE
4.dom.offsetWidth/offerHeight
最常用的，兼容性最好的
第2，3個組合下就可以兼容ie與其他瀏覽器了
window.getComputedStyle ? window.getComputedStyle(obj,null).width : obj.currentStyle.width;
邊距重疊
邊距重疊是指兩個或多個盒子相鄰邊界重合在一起形成一個邊界。水平方向邊界不會重疊，垂直方向會重疊，垂直方向的實際邊界是邊界中的最大值。
比如子元素設置了margin-top，父元素沒有設置，但是父元素也有了上邊距。
邊距重疊html *{
margin: 0;
padding: 0;
}
.content{
width: 500px;
height:100px;
background: green;
}
.parent{
width: 300px;
height: 300px;
background: pink;
}
.child{
width: 150px;
height: 150px;
background: yellow;
margin-top: 50px;
}
占位內容區域
下圖就是代碼運行結果：
解決邊距重疊-BFC
1、BFC概念：塊級格式化上下文
2、BFC的原理：
BFC的區域不會與浮動區域重疊
計算BFC區域高度時，浮動區域也參與計算
BFC區域是獨立的一個區域，不與其他區域相互影響
3、如何創建BFC
脫離文檔流：float不為none；position為absolutely或fixed
overflow不為visible(如overflow：hidden)
display為“table-cell”, “table-caption”, ?“inline-block”中的任何一個
4、BFC應用場景
自適應兩欄布局
清除浮動
防止垂直margin重疊
-ＴＨＥ ＥＮＤ-
每日分享！介紹Css 盒模型！
如何定義盒模型: 在CSS盒子模型理論中,頁面中所有的元素都是看成一個盒子,并且還占據一定的空間. 一個頁面是由很多這樣的盒子組成的.這些盒子之間都會相會影響,因此我們掌握CSS盒模型相當重要.需要理 ...
CSS盒模型屬性詳細介紹
一.概述 CSS盒模型是定義元素周圍的間隔.尺寸.外邊距.邊框以及文本內容和邊框之間內邊距的一組屬性的集合. 示例代碼:
前端之CSS盒模型介紹
css盒模型 css盒模型是css的基石,盒模型由content(主體內容),padding(補白,填充),border(邊框),margin(外間距); 1.content: width:數值+單位 ...
[k]css盒模型
box-sizing : ?content-box || border-box || inherit 1.content-box:此值為其默認值.元素的寬度/高度(width/height)等于元素邊 ...
尖刀出鞘的display常用屬性及css盒模型深入研究
一:diplay:inline-block 含義:指元素創建了一個行級的塊級元素,該元素內部(內容)被格式化成一個塊級元素,同時元素本身則被格式化成一個行內元素.更簡單的說就是說inline-bloc ...
第七十三節，css盒模型
css盒模型 學習要點: 1.元素尺寸 2.元素內邊距 3.元素外邊距 4.處理溢出 本章主要探討HTML5中CSS盒模型,學習怎樣了解元素的外觀配置以及文檔的整體布局. 一．元素尺寸 CSS盒模型中 ...
來談談你對CSS盒模型的認識？
任何一個網頁的搭建都離不開盒模型的堆砌.應該說css模型是web的一個根基,最后呈現出來的效果不同無非就是在高寬.內容與背景刪的區別而已. 那么CSS模型有什么認識的呢? 首先,css盒模型有幾種呢? ...
IE瀏覽器和CSS盒模型【轉】
總結:css盒模型在不同瀏覽器之間(例如:ie和其他瀏覽器 如火狐)的差異只存在于ie6之前的版本中,如ie5.在ie6下,?Internet Explorer 在標準模式下渲染時使用了 CSS 規范 ...
大前端學習筆記整理【一】CSS盒模型與基于盒模型的6種元素居中方案
概覽 CSS盒模型,規定了元素框來處理元素的 內容.內邊距.邊框和外邊距的方式 元素部分是指內容部分,也是最實際的內容,包圍內容的稱之為內邊距,內邊距外圍是邊框,邊框外圍就是外邊距:且外邊距是透明的, ...
隨機推薦
EXTJS 動態改變Gird 列值
var me = this.getView('EditProProductQrcodePanel'); var grid = me.down("[name=mallQrcodeGrid] ...
Linux/Ubuntu下 靜態編譯Qt程序
一般情況下,我們用Qt編譯出來的程序是要依賴于系統Qt庫的,也就是這個程序移到別的沒有安裝Qt庫的系統上是不能使用的.會提示缺少……庫文件之類的錯誤.這就是動態編譯的結果. 但是如果我們想編譯一個程序 ...
彈飛DZY(思維，打表，還沒過全，先放著)
彈飛DZYDescription某天,機智的ZZC發明了一種超級彈力裝置,為了在他的朋友DZY面前顯擺,他邀請DZY一起玩個游戲.游戲一開始,ZZC在地上沿著一條直線擺上n個裝置,每個裝置設定初始彈力 ...
關于js中原型鏈的理解
我們創建的每個函數都有一個prototype(原型)屬性,這個屬性是一個指針,一個對象.無論什么時候,我們只要創建一個新函數,就會根據一組特定的規則為該函數創建一個prototype屬性,這個屬性對象 ...
MinerConfig.java 爬取配置類
MinerConfig.java 爬取配置類 package com.iteye.injavawetrust.miner; import java.util.List; /** * 爬取配置類 * @ ...
NET中調用存儲過程(Output、Input)
NET中調用存儲過程(Output.Input) .NET中調用存儲過程(Output.Input) 帶輸入輸出參數的存儲過程 帶輸入輸出參數的存儲過程 create?procedure?itemCo ...
QT error LNK2019: 無法解析的外部符號
一個見到那的錯誤,困擾了好幾天了,今天才解決,記錄下. 使用QT Creator建立項目,添加一個QT設計界面widget,命名為TestWidget.有ui,頭文件(.h),源碼文件(.cpp).在 ...
win32api win32gui win32con 窗口句柄 發送消息 常用方法
Pywin32是一個Python庫,為python提供訪問Windows API的擴展,提供了齊全的windows常量.接口.線程以及COM機制等等. 1.通過類名和標題查找窗口句柄,并獲得窗口位置和 ...
[svn]顯示日志很慢 點擊文件查看更改記錄也賊慢
特此記錄,防止以后忘記. 解決辦法: 在?C:\Windows\System32\drivers\etc (win7) 中加入 即可 亦或將代碼的url中pc名字改為ip地址也可以解決問題 對文件夾點 ...
總結
以上是生活随笔為你收集整理的简要介绍css的盒模型,CSS盒模型的介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 软考高级 真题 2012年下半年 信息系
- 下一篇： CSS盒子模型总结