<ul id="cqmku"></ul>

CSS網頁布局：盒子模型

Dr_Noooo 發布于2019-04-23 13:44 / 1964人閱讀

摘要：一盒子模型標準盒子模型盒子不論是標準盒模型還是盒子模型，都有四個部分組成，但從上圖也可以看出盒子和盒子主要區別在與寬度上的區別中的盒子模型的寬包括中的盒子模型的也包括上面的兩個寬度相加的屬性是一樣的。

一、盒子模型

標準盒子模型（W3C盒子）

不論是標準盒模型還是IE盒子模型，都有content、padding、border、margin四個部分組成，但從上圖也可以看出W3C盒子和IE盒子主要區別在與content寬度上的區別

w3c中的盒子模型的寬:包括margin+border+padding+width;

??? width:margin*2+border*2+padding*2+width;

??? height:margin*2+border*2+padding*2+height;

iE中的盒子模型的width:也包括margin+border+padding+width;

上面的兩個寬度相加的屬性是一樣的。不過在ie中content的寬度包括padding和border這兩個屬性；

舉例說明的話：

例如一個盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解釋，那么這個盒子模型占用的

?寬度為：20*2+10*2+10*2+200=280px;

?高度：20*2+10*2+20*2+50=130px;

?盒子的實際寬度大小為:10*2+10*2+200=240px;

?實際高度：10*2+10*2+50=90px;

用ie的盒子模型解釋：盒子在網頁中占據的大小為20*2+200=240px; 高：20*2+50=90px;

盒子的實際大小為：寬度:200px, 高度:50px;

CSS3中增加了box-sizing屬性可用于調整盒子

box-sizing屬性可以為三個值之一：content-box（default），border-box，padding-box。

content-box，border和padding不計算入width之內? 默認的標準盒子

padding-box，padding計算入width內

border-box，border和padding計算入width之內，其實就是IE盒子了

云服務器 GPU云服務器盒子模型 html盒子的布局 css布局 css布局教程

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

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

H5多列布局

摘要：多列布局基本概念多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局字體顏色背景和其它效果實現更加精確的控制。多列布局基本概念 1、多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數量 /*列數*/ -webkit-column-count: 3; /*分割線*/ -webkit...

Jingbin_ 2019-08-29 16:15 評論0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局字體顏色背景和其它效果實現更加精確的控制。多列布局基本概念 1、多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數量 /*列數*/ -webkit-column-count: 3; /*分割線*/ -webkit...

mayaohua 2019-08-02 11:08 評論0 收藏0
《CSS世界》筆記一：流/元素/尺寸

摘要：一流體布局引出的幾種網頁布局方式布局方式描述特點場景靜態布局，傳統設計，網頁上的所有元素的尺寸一律使用作為單位。世界中，提出了流體布局的概念所謂流體布局，指的是利用元素流的特性實現的各類布局效果。下一篇：《CSS世界》筆記二：盒模型四大家族寫在前面初讀《CSS世界》還是在深圳，屬于換工作前的充能。那時候除了工作，其他時間基本都在這本書里了，因為它的確吸引人。之前看過《CSS揭密》...

hizengzeng 2019-08-30 15:54 評論0 收藏0
CSS 布局方式

摘要：中間左欄右欄清除浮動如下圖缺點結構不正確多了一層標簽布局左欄中間右欄如下圖缺點兼容性問題參考文章 W3C標準由萬維網聯盟制定的一系列標準，包括：結構化標準語言（HTML和XML）表現標準語言（CSS）行為標準語言（DOM和ECMAScript） CSS中的定位機制在CSS中存在三種定位機制：標準文檔流（Normal flow）浮動（Floats）絕對定位（Abs...

LancerComet 2019-08-29 15:27 評論0 收藏0
前端面試（知識點）整理（一）

摘要：接受個參數事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發上綁定的自定義事件觸發元素上綁定事件事件的委托代理的原理以及優缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。一、頁面布局 1.問題：假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應。解決方案一：使用浮動布局` Document ...

zhichangterry 2019-08-22 11:06 評論0 收藏0