前端知識整理 CSS盒模型

2022-03-09 07:43:17 字數 507 閱讀 8110

我們先來說說 什麼是css的盒模型呢?

想象乙個盒子,它有:外邊距(margin)、邊框(border)、內邊距(padding)、內容(content)四個屬性;

行 但是我們還有兩個小概念 乙個是標準模型(content-box) 和ie模型  (border-box)

這兩個有什麼區別呢?就是乙個塊的寬高 標準乙個是 content  乙個 還要加上 內邊距和邊框 (字面意思)

那麼,我們怎麼來獲得盒子模型的寬和高呢?

1. dom.style.width (只適用於內聯樣式)

2. dom.currentstyle.width(不相容)

3. window.getcomputedstyle(dom).width(不太懂)

4.dom.getboundingclientrect().width(不太懂)

CSS屬性 盒模型知識點整理

感覺好像markdown編輯器在移動端顯示貌似有點問題,很多列表編號都沒有了,好奇怪.由於剛剛開始學習寫部落格,可能很多地方都存在不足,希望看到的朋友可以給些建議 謝謝 主流瀏覽器 核心internet explorer trident google chrome webkit blink oper...

前端 關於CSS盒模型

矩形區域中各個屬性的取值只有margin可以取負值,只有width和margin可以取auto關鍵字,border不能為百分數,其他屬性都只能取 正的數字或者正的百分數。其中margin和padding設定的值是乙個塊區域的垂直高度,這塊區域的長和寬是隨著內容的width和height變化 而變化的...

Web前端篇 CSS盒模型

常用塊元素由 p,h1 h6,div,ul,ol,tr,li,form常用內聯元素由 a,span,em,i,strong,u,常見的內聯塊元素 上面三句 相當於一句 border 3px solid red 同樣,也可以分別設定邊框四個方向的粗細 線性樣式 顏色,跟padding的四個方向一樣。上...