站長(zhǎng)資訊網(wǎng)
css3定義盒子高度的屬性：1、height屬性，可設(shè)置元素盒子的高度；2、max-height屬性，可設(shè)置元素盒子的最大高度；3、min-height屬性，可設(shè)置元素盒子的最小高度。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
盒子的布局
把HTML中的元素看做是一個(gè)矩形的盒子（盛裝內(nèi)容的的容器），每個(gè)容器都是由元素內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。
css3中定義盒子高度的屬性：
-
height屬性
-
max-height屬性
-
min-height屬性
height屬性
height屬性可設(shè)置元素盒子的高度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p{ background-color: #FFC0CB; } p.ex { height:100px; width:100px; } </style> </head> <body> <p class="ex">這個(gè)段落的高和寬是 100px.</p> <p>這是段落中的一些文本。這是段落中的一些文本。 這是段落中的一些文本。這是段落中的一些文本。 這是段落中的一些文本。這是段落中的一些文本.</p> </body> </html>
max-height屬性
max-height屬性可設(shè)置元素盒子的最大高度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p { max-height: 50px; background-color: yellow; } </style> </head> <body> <p>這一段的最大高度設(shè)置為50 px。這一段的最大高度設(shè)置為50 px。這一段的最大高度設(shè)置為50 px。這一段的最大高度設(shè)置為50 px。這一段的最大高度設(shè)置為50 px。這一段的最大高度設(shè)置為50 px。這一段的最大高度設(shè)置為50 px。這一段的最大高度設(shè)置為50 px。</p> </body> </html>
min-height屬性
min-height屬性可設(shè)置元素盒子的最小高度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p { min-height: 100px; background-color: yellow; } </style> </head> <body> <p>這段的最小高度設(shè)置為100 px。</p> </body> </html>
