国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

CSS3盒子模型

2年前作者：黎明寄波瀾*分類：Toy博客閱讀(30)違法舉報

這篇具有很好參考價值的文章主要介紹了CSS3盒子模型。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

盒子模型（Box Modle）可以用來對元素進行布局，包括內(nèi)邊距，邊框，外邊距，和實際內(nèi)容部分

盒子模型分為兩種:

第一種是 W3C 標(biāo)準(zhǔn)的盒子模型（標(biāo)準(zhǔn)盒模型）

第二種 IE 標(biāo)準(zhǔn)的盒子模型（怪異盒模型）

標(biāo)準(zhǔn)盒模型與怪異盒模型的表現(xiàn)效果的區(qū)別之處：

1、標(biāo)準(zhǔn)盒模型中 width 指的是內(nèi)容區(qū)域 content 的寬度

height 指的是內(nèi)容區(qū)域 content 的高度

標(biāo)準(zhǔn)盒模型下盒子的大小 = content + border + padding + margin

CSS3盒子模型,css3,前端,html

2、怪異盒模型中的 width 指的是內(nèi)容、邊框、內(nèi)邊距總的寬度（content + border + padding）；height 指的是內(nèi)容、邊框、內(nèi)邊距總的高度

怪異盒模型下盒子的大小=width（content + border + padding） + margin

CSS3盒子模型,css3,前端,html

除此之外，我們還可以通過屬性 box-sizing 來設(shè)置盒子模型的解析模式

可以為 box-sizing 賦兩個值：

1、box-sizing: content-box：默認(rèn)值，border 和 padding 不算到 width 范圍內(nèi)，可以理解為是 W3c 的標(biāo)準(zhǔn)模型(default)?？倢?width+padding+border+margin

2、box-sizing: border-box：border 和 padding 劃歸到 width 范圍內(nèi)，可以理解為是 IE 的怪異盒模型，總寬=width+margin

1.相鄰塊元素垂直外邊距的合并

CSS3盒子模型,css3,前端,html

2.嵌套塊元素垂直外邊距的塌陷

CSS3盒子模型,css3,前端,html 文章來源地址http://www.zghlxwxcb.cn/news/detail-832981.html

到了這里，關(guān)于CSS3盒子模型的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費用

h5(html5)+css3前端筆記二
一、表格標(biāo)簽表格的主要作用：表格主要用于顯示、展示數(shù)據(jù) ，因為它可以讓數(shù)據(jù)顯示的非常的規(guī)整，可讀性非常好。特別是后臺展示數(shù)據(jù)的時候，能夠熟練運用表格就顯得很重要。一個清爽簡約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理。 1. table/table 用來定義表格的標(biāo)簽
2024年02月14日
瀏覽(32)
【前端基礎(chǔ)篇】HTML5 + CSS3 入門知識
萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用超文本標(biāo)記語言（HTML）的第五次重大修改（這是一項推薦標(biāo)準(zhǔn)、外語原文：W3C Recommendation） HTML5是HTML最新的修訂版本，2014年10月由萬維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定。 HTML5的設(shè)計目的是為了在移動設(shè)備上支持多媒體。 HTML5 簡
2024年02月09日
瀏覽(24)
前端 | （十一）CSS3簡介及基本語法（上） | 尚硅谷前端html+css零基礎(chǔ)教程2023最新
學(xué)習(xí)來源：尚硅谷前端html+css零基礎(chǔ)教程，2023最新前端開發(fā)html5+css3視頻系列筆記：【HTML4】（一）前端簡介【HTML4】（二）各種各樣的常用標(biāo)簽【HTML4】（三）表單及HTML4收尾【CSS2】（四）CSS基礎(chǔ)及CSS選擇器【CSS2】（五）CSS三大特性及常用屬性【CSS2】（六）CSS盒子模型
2024年02月16日
瀏覽(58)
CSS3中盒子居中
（1）利用定位（子絕父相）、margin-left、和margin-top實現(xiàn) （2）利用定位（子絕父相）、transfrom屬性實現(xiàn) （3）利用flex布局實現(xiàn)盒子居中
2024年02月22日
瀏覽(23)
HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標(biāo)簽詳解
排版標(biāo)簽用于對網(wǎng)頁內(nèi)容進行布局和樣式的調(diào)整。下面是對常見排版標(biāo)簽的詳細介紹：標(biāo)題使用至標(biāo)簽進行定義。定義最大的標(biāo)題，定義最小的標(biāo)題。具有align屬性，屬性值可以是：left、center、right。將給定的HTML代碼轉(zhuǎn)換為Markdown格式的標(biāo)題標(biāo)簽如下所示：效果演示： H3：
2024年02月07日
瀏覽(40)
前端 | （十二）CSS3簡介及基本語法（中）| 變換、過渡與動畫 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新
學(xué)習(xí)來源：尚硅谷前端html+css零基礎(chǔ)教程，2023最新前端開發(fā)html5+css3視頻系列筆記：【HTML4】（一）前端簡介【HTML4】（二）各種各樣的常用標(biāo)簽【HTML4】（三）表單及HTML4收尾【CSS2】（四）CSS基礎(chǔ)及CSS選擇器【CSS2】（五）CSS三大特性及常用屬性【CSS2】（六）CSS盒子模型
2024年02月16日
瀏覽(28)
[HTML]Web前端開發(fā)技術(shù)7（HTML5、CSS3、JavaScript ）CSS的定位機制——喵喵畫網(wǎng)頁
希望你開心，希望你健康，希望你幸福，希望你點贊！最后的最后，關(guān)注喵，關(guān)注喵，關(guān)注喵，佬佬會看到更多有趣的博客哦！??！喵喵喵，你對我真的很重要！目錄前言 CSS的定位機制文檔流定位元素類型?? 浮動定位 float的用處 float的特點 clear屬性層定位 position屬性
2024年02月05日
瀏覽(41)
css如何給盒子底部加陰影,CSS3 --添加陰影（盒子陰影、文本陰影的使用）
CSS3?-?給div或者文字添加陰影(盒子陰影、文本陰影的使用) CSS3定義了兩種陰影：盒子陰影和文本陰影。其中盒子陰影需要IE9及其更新版本，而文本陰影需要IE10及其更新版本。下面分別介紹兩種陰影的使用： 1，盒子陰影 (1)盒子陰影的屬性是?box-shadow 1 box-shadow:5px?5px?10px?g
2024年02月10日
瀏覽(86)
CSS系列之盒子陰影box-shadow（CSS3）
用于在元素的框架上添加陰影效果。你可以在同一個元素上設(shè)置多個陰影效果，并用逗號將他們分隔開。該屬性可設(shè)置的值包括陰影的X軸偏移量、 Y軸偏移量、模糊半徑、擴散半徑和顏色。當(dāng)給出兩個、三個或四個 length 值時。如果只給出兩個值, 那么這兩個值將會被
2023年04月08日
瀏覽(94)
[HTML]Web前端開發(fā)技術(shù)9（HTML5、CSS3、JavaScript ）——喵喵畫網(wǎng)頁
希望你開心，希望你健康，希望你幸福，希望你點贊！最后的最后，關(guān)注喵，關(guān)注喵，關(guān)注喵，佬佬會看到更多有趣的博客哦?。。?喵喵喵，你對我真的很重要！目錄前言 CSS顏色與背景顏色color屬性背景background屬性 1. 背景顏色background-color 2. 背景圖像background-image 3. 背景
2024年02月03日
瀏覽(39)