資訊專欄INFORMATION COLUMN
摘要：什么是盒模型盒模型是布局的基石，它規定了網頁元素如何顯示以及元素間相互關系。盒模型填充內邊距的使用方法填充在設定頁面中一個元素內容到元素的邊緣邊框之間的距離。
什么是盒模型
盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關系。css定義所有的元素都以擁有可像盒子一樣的外形和平面空間，即都包含邊框、邊界、補白、內容區，這就是盒模型。盒模型
填充（內邊距）
padding的使用方法
填充：padding,在設定頁面中一個元素內容到元素的邊緣(邊框) 之間的距離。 也稱補白。
用法：
1）用來調整子元素在父元素中的位置關系。
注：padding屬性需要添加在父元素上。
2）padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉后添加的padding屬性值。
屬性值的4種方式：
四個值：上 右 下 左 {padding:10px 20px 30px 40px;}
三個值：上 左右 下 {padding:10px 20px 30px ;}
二個值：上下 左右 {padding:10px 20px ;}
一個值：四個方向 padding:2px;/*定義元素四周填充為2px*/
說明：
可多帶帶設置一方向填充，如：
上方向padding-top:10px;
右方向pahdding-right:10px;
下方向padding-bottom:10px;
左方向padding-left:10px;
外邊距
margin的使用方法
邊界：margin,在元素外邊的空白區域，被稱為邊距。
margin-left:左邊界
margin-right:右邊界
margin-top:上邊界
margin-bottom:下邊界
屬性值的4種方式：
四個值：上 右 下 左
三個值：上 左右 下
二個值：上下 左右
一個值：四個方向
margin:2px;/*定義元素四邊邊界為2px*/
margin:2px 4px;/*定義元素上下邊界為2px，左右邊界為4px/
margin:2px 4px 6px;/*定義元素上邊界為2px，左右邊界4px下邊界為6px，*/
margin:2px 4px 6px 8px;/*定義元素上、右邊界為2px，下右邊界為6px，左邊界為8px*/
margin:0 auto;/*在瀏覽器中橫向居中。*/
說明：可多帶帶設置一方向邊界，如：margin-top:10px;
*margin值的解析：左右邊界累加，上下邊界重合。
*子元素（塊）直接寫margin-top時，會將margin-top屬性值加上父元素身上,(不設置任何浮動及定位的屬性的前提下)
邊框
border的使用方法
border:邊框寬度 邊框風格 邊框顏色; 例如：border:5px solid #f00 邊框：border,網頁中很多修飾性線條都是由邊框來實現的。 邊框寬度：border-width: 邊框顏色：border-color: 邊框樣式：border-style:solid(實線)/dashed(虛線)dotted(點劃線)double(雙線) 可多帶帶設置一方向邊框， 如：border-bottom:邊框寬度 邊框風格 邊框顏色;底邊框 border-left:邊框寬度 邊框風格 邊框顏色;左邊框 border-right:邊框寬度 邊框風格 邊框顏色;右邊框 border-top:邊框寬度 邊框風格 邊框顏色;上邊框
盒子的實際大小
1）盒子的實際大?。?/p>
寬 =左右border+左右padding+width 高 =上下border+上下padding+height 例如：一個盒子的 border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px 寬= border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px 高= border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px
2）溢出屬性
overflow:visible/hidden(隱藏)/scroll/auto(自動)/inherit; visible:默認值，內容不會被修剪，會成現在元素框之外； hidden：內容會被修剪，并且其余內容是不可見的； scroll：內容會被修剪，但是瀏覽器會顯示滾動條，以便查看其余的內容; auto：如果內容被修剪，則瀏覽器會顯示滾動條，以便查看其他的內容; inherit：規定應該從父元素繼承overflow屬性的值。
3）空余空間
white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit 該屬性用來設置如何處理元素內的空白； normal：默認值，空白會被瀏覽器忽略， pre：空白會被瀏覽器保留，其行為方式類似HTML中的pre標簽； nowrap:文本不會換行，文本會在同一行上繼續，直到遇到
標簽為止； pre-wrap：保留空白符序列，文字超出邊界時會正常換行； pre-line:合并空白符序列，但是保留換行符； inherit：規定應該從父元素繼承White-space屬性的值；(ie瀏覽器不支持此屬性值)
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114339.html
摘要：什么是盒模型盒模型是布局的基石，它規定了網頁元素如何顯示以及元素間相互關系。盒模型填充內邊距的使用方法填充在設定頁面中一個元素內容到元素的邊緣邊框之間的距離。 什么是盒模型 盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關系。css定義所有的元素都以擁有可像盒子一樣的外形和平面空間，即都包含邊框、邊界、補白、內容區，這就是盒模型。 盒模型 填充（內邊距） pad...
摘要：為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動產生，元素周圍的內容轉換為圍繞元素排列。 選擇器注意點 屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節點 A + B - 下一個兄弟節點 A...
摘要：前言多行文本超出高度限制出現省略號移動端多為內核的有擴展屬性但并不是規范中的屬性端往往要借助去實現這一效果，但麻煩且不是很靠譜，今天就用純來實現一個完全兼容的多行省略。 前言 多行文本超出高度限制出現省略號 , 移動端多為webkit內核的 , 有擴展屬性-webkit-line-clamp , 但并不是CSS規范中的屬性 , PC端往往要借助js去實現這一效果，但麻煩且不是很靠譜，今...
摘要：規范里的一些事前言以下內容總結于規范，一盒子模型以上圖形說的是盒子模型中的邊界。，，和屬性失效盒的位置是根據常規流計算的被稱為常規流中的位置，然后盒相對于其常規位置偏移。 CSS規范里的一些事 前言：以下內容總結于CSS2.1規范，http://www.ayqy.net/doc/css2-1/cover.html 一、盒子模型 showImg(https://segmentfault...
閱讀 3323·2021-11-25 09:43
閱讀 3008·2021-10-15 09:43
閱讀 1965·2021-09-08 09:36
閱讀 2918·2019-08-30 15:56
閱讀 742·2019-08-30 15:54
閱讀 2684·2019-08-30 15:54
閱讀 2973·2019-08-30 11:26
閱讀 1237·2019-08-29 17:27
