資訊專欄INFORMATION COLUMN
摘要：概覽尺寸屬性允許你控制元素的高度和寬度。使用等單位定義高度。該屬性值會對元素的高度設置一個最低限制。不允許指定負值?？蛇x的值使用等單位定義元素的最小寬度值，默認值取決于瀏覽器。尺寸與盒模型有部分關聯，稍后會補充盒模型的相關筆記。
概覽
CSS 尺寸屬性允許你控制元素的高度（height）和寬度（width）。
| 屬性 | 描述 |
|---|---|
| height | 設置元素的高度。 |
| width | 設置元素的寬度。 |
| max-height | 設置元素的最大高度。 |
| max-width | 設置元素的最大寬度。 |
| min-height | 設置元素的最小高度。 |
| min-width | 設置元素的最小寬度。 |
我們一般所指的高度和寬度是指下圖中紅線標示的區域。
IE 5.X 和 6 這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。簡單知道就行了。
heightheight 屬性設置元素的高度。行內非替換元素（如：,,影響他們高度的是line-height屬性）會忽略這個屬性。
可選的值：
auto 默認。瀏覽器會計算出實際的高度。
length 使用 px, cm, mm, em 等單位定義高度。
% 基于包含它的塊級對象的百分比定義高度。
div.normal {
height: auto
}
div.big {
height: 160px
}
div.small {
height: 30px
}
width
width 屬性設置元素的寬度。行內非替換元素（如：,）會忽略這個屬性。
可選的值：
auto 默認。瀏覽器會計算出實際的寬度。
length 使用 px, cm, mm, em 等單位定義寬度。
% 基于包含它的塊級對象的百分比定義寬度。
div.normal {
width: auto
}
div.big {
width: 160px
}
div.small {
width: 30px
}
max-height
max-height 屬性設置元素的最大高度。
該屬性值會對元素的高度設置一個最高限制。因此，元素可以比指定值矮，但不能比其高。不允許指定負值。
可選的值：
none 默認。對元素的高度沒有限制。
length 使用 px, cm, mm, em 等單位定義元素的最大高度值。
% 基于包含它的塊級對象的百分比定義最大高度。
p {
padding: 0;
margin: 0;
max-height: 10px;
overflow: none;
}
設置最大高度后，段落的高度不會超過最大高度，但文本會溢出，其他部分可以覆蓋到溢出的部分。
max-widthmax-width 定義元素的最大寬度。
該屬性值會對元素的寬度設置一個最高限制。因此，元素可以比指定值窄，但不能比其寬。不允許指定負值。
可選的值：
none 默認。對元素的寬度沒有限制。
length 使用 px, cm, mm, em 等單位定義元素的最大寬度值。
% 基于包含它的塊級對象的百分比定義最大寬度。
p {
max-width:100px;
}
min-height
min-height 屬性設置元素的最小高度。
該屬性值會對元素的高度設置一個最低限制。因此，元素可以比指定值高，但不能比其矮。不允許指定負值。
可選的值：
length 使用 px, cm, mm, em 等單位定義元素的最小高度值，默認值是0。
% 基于包含它的塊級對象的百分比定義最小高度。
p {
min-height:100px;
}
min-width
min-width 屬性設置元素的最小寬度。
該屬性值會對元素的寬度設置一個最小限制。因此，元素可以比指定值寬，但不能比其窄。不允許指定負值。
可選的值：
length 使用 px, cm, mm, em 等單位定義元素的最小寬度值，默認值：取決于瀏覽器。
% 基于包含它的塊級對象的百分比定義最小寬度。
p {
min-width:100px;
}
小結
CSS 尺寸就是指元素內容的高度和寬度，雖然說非常簡單，但卻是必會知識，從屬性的字面意思基本就可以領會其意思，沒什么深入不深入可談。
CSS 尺寸與盒模型有部分關聯，稍后會補充盒模型的相關筆記。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111150.html
摘要：影響著其中元素的尺寸和定位。在標準中，元素的稱為。當的寬度高度使用百分數的值時，這個百分數的基準就是的尺寸。例子其中就溢出了的區域。造成以上不同的原因是，在桌面端的縮放和在移動端的縮放有不同的性質。這兩個數值的單位是設備獨立像素。 前言 本篇文章修改、整理自我以前寫的一篇文章。 在閱讀這篇文章之前，你需要了解設備像素、邏輯像素（設備獨立像素）和CSS像素的區別，見我的前一篇文章理解設備...
摘要：常用單位在中可以用很多不同的方式來設定字體的尺寸。當你為一個元素添加單位時，應當考慮到所有父元素的字體尺寸。例寬度是中新提出的一個單位，通過寬度來計算字體尺寸。 個人翻譯，轉載請注明出處 英文原文：CSS Font Sizing 寫在前面 上一篇文章如何做好移動端的響應式設計：Viewport控制討論到了CSS像素，于是我決定研究一下如何用不同的方式來在CSS中設定字體...
摘要：一流體布局引出的幾種網頁布局方式布局方式描述特點場景靜態布局，傳統設計，網頁上的所有元素的尺寸一律使用作為單位。世界中，提出了流體布局的概念所謂流體布局，指的是利用元素流的特性實現的各類布局效果。 下一篇：《CSS世界》筆記二：盒模型四大家族 寫在前面 初讀《CSS世界》還是在深圳，屬于換工作前的充能。那時候除了工作，其他時間基本都在這本書里了，因為它的確吸引人。之前看過《CSS揭密》...
摘要：基本上，等高布局只能滿足欄的情況，除非正好是等比例的，那還可以使用實現最多欄布局上一篇世界筆記一流元素尺寸下一篇世界筆記三內聯元素與對齊 上一篇：《CSS世界》筆記一：流/元素/尺寸下一篇：《CSS世界》筆記三：內聯元素與對齊 寫在前面 在讀《CSS世界》第四章之前，粗淺的認為盒模型無非是margin/border/padding/content而已，再多無非在不同box-sizing...
摘要：它能給予一個關于你使用何種設備的正式結論，并且能通過獲得。寬度兩倍，高度兩倍，總體四倍。視口的作用是限制元素，元素是所有網頁塊元素中最高一級的元素。視口并非一個結構，其不受控制。重點是上訴結論是在縮放的條件下成立的。 原文地址：http://quirksmode.org/mobile/... 這篇小短文中，我將會介紹關于viewport與諸如html元素，window 對象，scree...
閱讀 1642·2019-08-30 15:44
閱讀 2566·2019-08-30 11:19
閱讀 394·2019-08-30 11:06
閱讀 1557·2019-08-29 15:27
閱讀 3077·2019-08-29 13:44
閱讀 1621·2019-08-28 18:28
閱讀 2353·2019-08-28 18:17
閱讀 1978·2019-08-26 10:41
