目录 [1]宽高[2]内边距[3]外边距[4]边框
前面的话
所有文档元素都生成一个矩形框,这称为元素框(element box),它描述了一个元素在文档布局中所占的空间大小。而且,每个框影响着其他元素框的位置和大小
宽高
在CSS中,可以对任何块级元素设置显式高度。如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样;如果指定高度小于显示内容所需高度,则会向元素添加一个滚动条。如果元素内容的高度大于元素框的高度,浏览器的具体行为取决于overflow属性
宽度 width被定义为从左内边界到右内边界的距离
高度 height被定义为从上内边界到下内边界的距离
[注意]宽度和高度无法应用到行内非替换元素,且不能为负
width/height
值:
初始值: auto
应用于: 块级元素和替换元素
继承性: 无
百分数: 相对于包含块的width/height
计算值: 对于auto和百分数值,根据指定确定;否则是一个绝对长度,除非元素不能应用该属性(此时为auto)
IE6-浏览器的宽高定义的是可见元素框的尺寸,而不是元素框的内容区尺寸
内边距
对于行内元素,左内边距应用到元素的开始处,右内边距应用到元素的结尾处,上下内边距不影响行高
[注意]内边距不能是负值
padding
值:[
初始值: 未定义
应用于: 所有元素
继承性: 无
百分数: 相对于包含块的width
外边距
设置外边距margin会在元素外创建额外的空白,空白通常指不能放其他元素的区域,而且在这个区域中可以看到父元素的背景
外边距可以应用到行内元素,上下外边距对行高没有任何影响。由于上下外边距实际上是透明的,所以这个声明没有任何视觉效果。左外边距应用到元素开始处;右外边距应用到元素结束处
margin
值:[
初始值: 未定义
应用于: 所有元素
继承性: 无
百分数: 相对于包含块的width
【1个值】margin: top|right|bottom|left;【2个值】margin: top|bottom left|right;【3个值】margin: top left|right bottom;【4个值】margin: top right bottom left;
合并垂直外边距
相邻的兄弟级元素外边距合并又称为外边距叠加
包含的父子级元素外边距合并又称为外边距传递
在包含块上设置边框或内边距时,会使其子元素的外边距包含在包含块内,会阻止外边距传递
负外边距
如果垂直外边距都设置为负值,浏览器会选取两个外边距的绝对值的最大值。如果一个正外边距与一个负外边距合并,会从正外边距减去这个负外边距的绝对值
边框
元素外边距内就是元素的边框border,元素的边框是围绕元素内容的内边距的一条或多条线。边框由粗线、样式和颜色三部分组成
对于行内元素来说,边框实际上画在各行之外的下一个像素上,由于各行紧挨着,所以其边框会重叠。无论为行内元素的边框设置怎样的宽度,不会对行高有任何影响;但左右边框会分别显示在元素的开始处和结尾处
关于边框的详细信息移步至此

本文討論了HTML< Progress>元素,其目的,樣式和與< meter>元素。主要重點是使用< progress>為了完成任務和LT;儀表>對於stati

本文討論了html< datalist>元素,通過提供自動完整建議,改善用戶體驗並減少錯誤來增強表格。Character計數:159

本文討論了HTML< meter>元素,用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了< meter>從< progress>和前

本文討論了使用HTML5表單驗證屬性,例如必需的,圖案,最小,最大和長度限制,以直接在瀏覽器中驗證用戶輸入。

本文討論了視口元標籤,這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互,而濫用可能會導致設計和可訪問性問題。

本文解釋了HTML5< time>語義日期/時間表示的元素。 它強調了DateTime屬性對機器可讀性(ISO 8601格式)的重要性,並在人類可讀文本旁邊,增強Accessibilit

本文討論了< iframe>將外部內容嵌入網頁,其常見用途,安全風險以及諸如對象標籤和API等替代方案的目的。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

SublimeText3漢化版
中文版,非常好用

WebStorm Mac版
好用的JavaScript開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

SublimeText3 Linux新版
SublimeText3 Linux最新版