css盒模型

cod7ce 發布于2019-08-30 15:55 / 3191人閱讀

摘要：一什么是盒模型說到盒模型大家肯定都能想到但是盒模型分為兩種標準盒模型模型，他們最主要的區別在于寬高的計算。

一：什么是盒模型

說到盒模型大家肯定都能想到content,padding,border,margin
但是盒模型分為兩種：標準盒模型 IE模型，他們最主要的區別在于寬高的計算。
1.標準盒模型的寬高不包含padding和border
2.IE模型的寬高是padding和border的總和

設置這兩種模式的方式也很簡單

標準盒模型：box-sizing:content-box
IE模型:box-sizing:border-box

二：js獲取盒模型的寬高

1.dom.style.width/height 此方法只適用于內聯元素
2.dom.currentStyle.width/height此方法解決了1的問題，但是只適用于IE
3.window.getComputedStyle(dom).width/height兼容性好，適用于大多數瀏覽器
4.dom.getBoundingClientRect().widht/height

要注意的是：dom.getBoundingClientRect()返回TextRectangle對象,這個對象包含元素相對于視窗的位置集合(left,right,top,bottom)

三：BFC的原理及如何創建BFC

BFC全稱：Block Formatting Context (塊級格式化上下文)
原理：同一個bfc下外邊距重疊，bfc外面的元素不會影響里面的元素，bfc計算高度時也包含浮動元素，bfc可以防止浮動元素被覆蓋

如圖所示，1的下邊距和2的上邊距重合

創建bfc的方法

1.float不為none
2.overflow不為visiable
3.position不為static和relative
4.display是inline-block,table-cell,table-caption

云服務器 GPU云服務器盒模型盒模型html嗎簡述html盒模型盒遙控

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117223.html

深入css布局 (1) — 盒模型 & 元素分類

摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎知識外，布局相關的知識才是比較核心和重要的點。從元素的布局特性來分，主要可以分為三類元素塊級元素，行內元素，行內塊級元素。行內級元素屬性取的元素。? 深入css布局（1）—— 盒模型 & 元素分類 ? ? ? 在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重要的點。今天我們...

ky0ncheng 2019-04-23 13:43 評論0 收藏0
深入css布局(1) — 盒模型 & 元素分類

摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎知識外，布局相關的知識才是比較核心和重要的點。規定元素和屬性是包含元素的邊框內邊距內容的。后來微軟也慢慢轉向了的標準，在以后支持了標準盒模型。行內級元素屬性取的元素。深入css布局（1）—— 盒模型 & 元素分類 ????在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重...

blankyao 2019-08-29 15:25 評論0 收藏0
【快速入門系列】CSS盒模型基礎

摘要：引言盒模型是頁面布局中經常會使用到的一種思維模型，將等概念運用日常生活中的盒子來形容，因此稱之為盒模型。一什么是盒模型我們首先來看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內容內邊距邊框外邊距組成。引言 CSS盒模型是頁面布局中經常會使用到的一種思維模型，將margin、border、padding、content等概念運用日常生活中的盒子來形容，因此稱之為盒模型。一、什么是...

Code4App 2019-08-29 15:20 評論0 收藏0
【快速入門系列】CSS盒模型基礎

摘要：引言盒模型是頁面布局中經常會使用到的一種思維模型，將等概念運用日常生活中的盒子來形容，因此稱之為盒模型。一什么是盒模型我們首先來看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內容內邊距邊框外邊距組成。引言 CSS盒模型是頁面布局中經常會使用到的一種思維模型，將margin、border、padding、content等概念運用日常生活中的盒子來形容，因此稱之為盒模型。一、什么是...

LinkedME2016 2019-08-02 10:22 評論0 收藏0
css1：盒模型

摘要：最近工作中有機會復習一下的基本知識，那么先從的盒模型開始吧，因為這是當時進現在這家公司筆試的第一題怎么把盒模型變成標準盒模型嗯，有辦法，就可以啦。具體參見鏈接描述常見的盒模型分兩類怪異盒模型和標準盒模型，兩種盒模型有著很大的不同。最近工作中有機會復習一下css的基本知識，那么先從css的盒模型開始吧，因為這是當時進現在這家公司筆試的第一題：怎么把IE盒模型變成標準盒模型？嗯，有辦法，...

TalkingData 2019-08-30 10:59 評論0 收藏0
十分鐘復習CSS盒模型與BFC

摘要：盒模型與本文為收集整理總結網上資源旨在系統復習盒模型與節省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內容區盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區別標準盒模型的寬高則為內容區域的寬高盒模型 css盒模型與BFC 本文為收集整理總結網上資源旨在系統復習css盒模型與bfc 節省復習時間閱讀10分鐘什么是盒模型每一個文檔中，每...

verano 2019-08-02 10:48 評論0 收藏0