2. 程式人生 > >CSS-標準盒模型和怪異盒模型box-sizing

CSS-標準盒模型和怪異盒模型box-sizing

阿新 • • 發佈：2019-01-03

盒模型


以上圖為例： 在w3c標準盒模型下， 元素實際寬等於width + padding-left + padding-right + border-left + border-right + margin-left + margin-right 元素實際高等於height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

怪異盒模型box-sizing

box-sizing；以特定的方式定義匹配某個區域的特定元素。 box-sizing可以取以下三個值：
1、border-box 邊框的寬度和padding的寬度都在width內，將採用怪異模式解析計算，怪異盒模型；不會破壞整體位置佈局。 但是border和padding給的值的總和，不能超過width，否則元素的實際寬度就會被撐開 2、content-box，border和padding不計算入width之內，將採用標準模式解析計算，也是預設模式 3、padding-box，padding計算入width內 ie8+瀏覽器支援content-box和border-box； ff 則支援全部三個值。

兩種模式的區別：

　　標準模式會被設定的padding撐開，而怪異模式則相當於將盒子的大小固定好，再將內容裝入盒子。盒子的大小並不會被padding所撐開。


相關推薦

css的標準盒模型和怪異盒模型

大多數瀏覽器採用W3C標準模型，而IE中則採用Microsoft自己的標準。 在標準盒模型：一個div的內容區 = width + border +padding + margin 怪異盒模型：div的內容區 = width + margin   width = paddin

CSS-標準盒模型和怪異盒模型box-sizing

盒模型 以上圖為例： 在w3c標準盒模型下， 元素實際寬等於width + padding-left + padding-right + border-left + border-right

CSS中的標準盒模型 和 怪異盒模型

CSS中Box model分類 CSS中Box model是分為兩種:: W3C標準 和 IE標準盒子模型。 大多數瀏覽器採用W3C標準模型，而IE中則採用Microsoft自己的標準。 怪異模式是“部分瀏覽器在支援W3C標準的同時還保留了原來的解析模

div的標準盒模型和怪異盒模型

img 圖片 src http .com pad nbsp png ima （1）標準盒模型 標準盒模型寬高不會被padding和margin撐開 （2）怪異盒模型 怪異盒模型寬高會被padding和margin撐開 div的標準盒模型和怪異盒

瀏覽器的標準相容模式和怪異呈現模式以及盒模型

由於歷史的原因，各個瀏覽器在對頁面的渲染上存在差異，甚至同一瀏覽器在不同版本中，對頁面的渲染也不同。在W3C標準出臺以前，瀏覽器在對頁面的渲染上沒有統一規範，產生了差異(Quirks mode或者稱為Compatibility Mode)；由於W3C標準的推出，瀏覽器渲染頁面有了統一的標準(CSScomp

盒模型——標準盒模型與怪異盒模型

inter 所有 ges 讓我 圖片 生活 -s idt div2 盒模型是CSS中一種重要的思維模型，理解了盒模型才能進行更好的頁面布局。顧名思義，我們把頁面上所有的元素都看做是一個生活中常見的盒子，它具備內容（content），內邊距（padding），邊框（borde

標準盒模型和IE盒模型

一個div他的css樣式為"width:100px;border:1px solid #000;padding:50px"請問在使用標準文件聲明後IE6中這個div實際所佔用的寬度為？去除文件聲明後div在ie6中實際佔用的寬度為？

快速理解W3C盒模型和IE盒模型的區別

1、CSS盒模型概述 CSS 盒模型規定了元素框處理元素內容（content）、內邊距（padding）、邊框 （border）和 外邊距 （margin）的方式. CSS盒模型分為W3C盒模型和IE盒模型  2、通過程式碼直觀感受以下兩者區別 定義兩個div

css3盒模型、彈性盒模型、怪異盒模型

一、CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。CSS盒模型本質上是一個盒子，它包括：邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的圖片說

標準盒子模型與怪異盒子模型的不同 和 浮動的講解

標準盒子 與 怪異盒子的模型是一樣的,如下: 在來一套程式: <style type="text/css">.box{width: 200px;height: 200px;border: solid red 2px;margin: 10px;float: le

W3C的標準DOM事件模型和IEDOM事件模型的區別

在瀏覽器解析事件的時候，有兩種觸發方式，一種叫做Bubbling(冒泡)，另外一種叫做Capturing(捕獲)。由上圖可以看出來，冒泡的方式效果就是當一個DOM元素的某事件例如click事件被fire時，依次它的父元素的click事件也被fire(觸發)，一直

星型模型和雪花型模型比較

業務層 事務所 討論 解決方案 數據優化 特性 個數 數據庫結構 完整 每個數據倉庫都包含一個或者多個事實數據表。事實數據表可能包含業務銷售數據，如現金登記事務所產生的數據，事實數據表通常包含大量的行。事實數據表的主要特點是包含數字數據（事實），並且這些數字信息可以匯總，以

c理解提高（3）程式的記憶體四區模型和函式呼叫模型

程式的記憶體四區模型 記憶體四區的建立流程 流程說明 1、作業系統把物理硬碟程式碼load到記憶體 2、作業系統把c程式碼分成四個區 3、作業系統找到main函式入口執行   各區元素分析 函式呼叫模型 基本原理

Linux環境下實現LVS-NAT模型和LVS-DR模型

一、實現LVS-NAT模型 1、LVS主機yum -y install ipvsadm 防火牆關閉，RS1、RS2安裝httpd，新增index.html，路由器新增到達172.20.0.123的路由表 2、各主機配置 RS1 並存在 RS2 並同時有 router，開

基於JVM原理、JMM模型和CPU快取模型深入理解Java併發程式設計

許多以Java多執行緒開發為主題的技術書籍，都會把對Java虛擬機器和Java記憶體模型的講解，作為講授Java併發程式設計開發的主要內容，有的還深入到計算機系統的記憶體、CPU、快取等予以說明。實際上，在實際的Java開發工作中，僅僅瞭解併發程式設計的建立、啟動、管理和通訊等基本知識還是不夠的。一

機器學習之判別式模型和生成式模型

https://www.cnblogs.com/nolonely/p/6435213.html   判別式模型（Discriminative Model）是直接對條件概率p(y|x;θ)建模。常見的判別式模型有線性迴歸模型、線性判別分析、支援向量機SVM、神經網路、boosting

基於JVM原理JMM模型和CPU快取模型深入理解Java併發程式設計

許多以Java多執行緒開發為主題的技術書籍，都會把對Java虛擬機器和Java記憶體模型的講解，作為講授Java併發程式設計開發的主要內容，有的還深入到計算機系統的記憶體、CPU、快取等予以說明。實際上，在實際的Java開發工作中，僅僅瞭解併發程式設計的建立、啟動、管理和通訊等基本知識還是不夠的。一方面，如果

keras函式式模型和序貫模型的使用

文章目錄 函式式模型和序貫模型 序貫模型例項 函式式模型例項 混合模型例項 官方例項 函式式模型和序貫模型 在 Keras 中有兩類主要的模型：Sequential 順序模型 和 使用函式式 API

BAT面試題9：談談判別式模型和生成式模型？

BAT面試題9：談談判別式模型和生成式模型？ https://mp.weixin.qq.com/s/X7zWJCMN7gbCwqskIIpLcw 判別方法：由資料直接學習決策函式 Y = f（X），或者由條件分佈概率 P（Y|X）作為預測模型，即判別模型。 生成

詞袋模型和詞向量模型

在自然語言處理和文字分析的問題中，詞袋（Bag of Words, BOW）和詞向量（Word Embedding）是兩種最常用的模型。更準確地說，詞向量只能表徵單個詞，如果要表示文字，需要做一些額外的處理。下面就簡單聊一下兩種模型的應用。 所謂BOW，就是將文字/Query看作是一系列詞的集合