css 兩種盒模型

2021-08-19 23:17:52 字數 340 閱讀 4053

w3c 模型

box-sizing: border-box

content-box

這是由 css2.1 規定的寬度高度行為。

寬度和高度分別應用到元素的內容框。

在寬度和高度之外繪製元素的內邊距和邊框。

border-box

為元素設定的寬度和高度決定了元素的邊框盒。

就是說,為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。

通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

inherit

規定應從父元素繼承 box-sizing 屬性的值。

CSS 兩種盒模型

第一種是w3c標準的盒子模型 標準盒模型 第二種ie標準的盒子模型 怪異盒模型 標準盒模型width指的是內容區域content的寬度 height指的是內容區域content的高度 w3c標準盒模型下盒子的大小 width content border padding margin 怪異盒模型中的...

CSS的兩種盒模型

關於css的盒子模型相信學習前端的同學都有所耳聞,因為它太基礎太重要了。提起盒子模型,大家可能會想到content,padding,border,margin這些詞彙,還有也許還會想起盒子模型有兩種,比如ie的盒子模型與w3c的盒子模型,那麼我們怎麼來區分呢?先來看看w3c的盒子模型 w3c 盒子模...

css的兩種盒模型

前言 初學 css 的時候 div 的一些寬高問題經常會引起一些不好理解的問題,這裡做乙個關於css盒模型的分享。問題下面的 可以直接複製出去執行哦 lang en charset utf 8 css盒模型title head type text css content style class co...