中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

html的盒子模型有哪些

發布時間:2021-12-23 17:34:25 來源:億速云 閱讀:207 作者:iii 欄目:web開發

本篇內容主要講解“html的盒子模型有哪些”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“html的盒子模型有哪些”吧!

html的盒子模型有2種:1、w3c的盒子模型,其padding和border不被包含在定義的width和height之內;2、IE的盒子模型,其padding和border被包含在定義的width和height之內。

本教程操作環境:windows7系統、HTML5版、Dell G3電腦。

一、引入

  • 在網站的制作中,一個復雜的頁面,被劃分為一個一個的小塊。

  • 通過這種劃分,把網站的開發過程化整為零、化繁為簡,以達到減少開發工作,減輕維護壓力的目的。

  • 在網頁中,把這種劃分后的小塊形象的看成一個個的盒子。只有理解了盒子模型才能更好的排版,更好的編寫網站界面


二、盒子的布局

把HTML中的元素看做是一個矩形的盒子(盛裝內容的的容器),每個容器都是由元素內容、內邊距(padding)、邊框(border)和外邊距(margin)組成。

html的盒子模型有哪些

ps:瀏覽器默認的margin值為8px!


三、兩種盒子模型

  • w3c的盒子模型: padding和border不被包含在定義的width和height之內。對象的實際寬度等于設置的width值和border、padding之和,即 ( Element width = width + border + padding ) 此屬性表現為標準模式下的盒模型。


html的盒子模型有哪些

  • IE的盒子模型: padding和border被包含在定義的width和height之內。對象的實際寬度就等于設置的width值,即使定義有border和padding也不會改變對象的實際寬度,即 ( Element width = width ) 。

html的盒子模型有哪些

ps:一般都使用標準的w3c盒子模型,如果需要使用IE的盒子模型,可以使用box-sizing屬性進行修改。

  • w3c的盒子模型

.test1{
	box-sizing:content-box;
	width:200px;
	padding:10px;
	border:15px solid #eee;
}
  • IE的盒子模型

.test1{
	box-sizing:border-box;
	width:200px;
	padding:10px;
	border:15px solid #eee;
}

到此,相信大家對“html的盒子模型有哪些”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

安乡县| 临桂县| 洛阳市| 奉化市| 白朗县| 库伦旗| 吉安市| 仁化县| 即墨市| 新津县| 根河市| 海安县| 乡宁县| 阿拉善左旗| 库车县| 盐池县| 廉江市| 庆安县| 阿鲁科尔沁旗| 蓝山县| 江西省| 新宾| 陇南市| 重庆市| 石阡县| 滨海县| 古丈县| 隆林| 潜山县| 建始县| 南投县| 扎赉特旗| 紫金县| 吉隆县| 白水县| 兴城市| 保德县| 翁牛特旗| 高碑店市| 五大连池市| 南汇区|