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