碼上歡樂
相關內容    簡體    繁體

CSS 盒子大小

本文轉載自   查看原文   2019-03-22 11:55   1581 

盒子的寬和高

盒子的大小通過寬和高來指定。

默認情況下，盒子的大小剛好容納其中的內容。

兩個屬性設置盒子的寬和高

  • width 設置寬
  • height 設置高

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >盒子的寬和高</ title >
     < style >
         div{ 
             width:200px;
             height:200px;
            
         }
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< div >學編程，上利永貞網</ div >
< p >study hard, improve every day</ p >
</ body >
</ html >

盒子寬和高的單位通常使用像素，也可以使用EM和百分比。

使用百分比時，盒子的大小會隨着瀏覽器的大小改變。

使用EM為單位時，盒子的大小以盒子中文本大小為基准進行縮放。

限制高度和寬度

為了適應用戶屏幕的大小，有些設計會適時地展開或收縮頁面。為了讓盒子的內容全部顯示或隱藏，有必要指定盒子的寬高限制。

有4個屬性：

  • min-width 最小寬度
  • max-width 最大寬度
  • min-height 最小高度
  • max-height 最大高度

這4個屬性的單位通常是像素。

示例：

限制盒子的寬

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >限制盒子寬</ title >
     < style >
         table,
         td{
             border:1px solid #555;
         }  
         td.discription{
             min-width:200px;
             max-width:500px;
         }
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< table >
< tr >
     < td >圖像</ td >
     < td >說明</ td >
</ tr >
< tr >
     < td >< img class = "a" src = "https://www.liyongzhen.com/liyongzhen/docs/images/downloadmediazip.png" /> </ td >
     < td class = "discription" >一日，許褚走馬入東門，正迎許攸，攸喚褚曰：“汝等無我，安能出入此門乎？”褚怒曰：“吾等千生萬死，身冒血戰，奪得城池，汝安敢誇口！”攸罵曰：“汝等皆匹夫耳，何足道哉！”褚大怒，拔劍殺攸，提頭來見曹操，說“許攸如此無禮，某殺之矣。”操曰：“子遠與吾舊交，故相戲耳，何故殺之！”深責許褚，令厚葬許攸。乃令人遍訪冀州賢士。冀民曰：“騎都尉崔琰，字季珪，清河東武城人也。數曾獻計於袁紹，紹不從，因此托疾在家。”操即召琰為本州別駕從事，而謂曰：“昨按本州戶籍，共計三十萬眾，可謂大州。”琰曰：“今天下分崩，九州幅裂，二袁兄弟相爭，冀民暴骨原野，丞相不急存問風俗，救其塗炭，而先計校戶籍，豈本州士女所望於明公哉？”操聞言，改容謝之，待為上賓。</ td >
</ tr >
< tr >
     < td >< img class = "a" src = "https://www.liyongzhen.com/liyongzhen/docs/images/downloadmediazip.png" /> </ td >
     < td class = "discription" >一日，許褚走馬入東門，正迎許攸，攸喚褚曰：“汝等無我，安能出入此門乎？”褚怒曰：“吾等千生萬死，身冒血戰，奪得城池，汝安敢誇口！”攸罵曰：“汝等皆匹夫耳，何足道哉！”褚大怒，拔劍殺攸，提頭來見曹操，說“許攸如此無禮，某殺之矣。”操曰：“子遠與吾舊交，故相戲耳，何故殺之！”深責許褚，令厚葬許攸。乃令人遍訪冀州賢士。冀民曰：“騎都尉崔琰，字季珪，清河東武城人也。數曾獻計於袁紹，紹不從，因此托疾在家。”操即召琰為本州別駕從事，而謂曰：“昨按本州戶籍，共計三十萬眾，可謂大州。”琰曰：“今天下分崩，九州幅裂，二袁兄弟相爭，冀民暴骨原野，丞相不急存問風俗，救其塗炭，而先計校戶籍，豈本州士女所望於明公哉？”操聞言，改容謝之，待為上賓。</ td >
</ tr >
</ table >
 
</ p >
</ body >
</ html >

示例：

限制盒子高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >限制盒子高</ title >
     < style >  
         h2, p {
             width: 400px;
             font-size: 90%;
             line-height: 1.2em;}
         h2 {
             color: #324567;
             border-bottom: 1px solid #324567;}
         p {
             min-height: 10px;
             max-height: 40px;
         }
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< h2 >利永貞網</ h2 >
< p >一日，許褚走馬入東門，正迎許攸，攸喚褚曰：“汝等無我，安能出入此門乎？”褚怒曰：“吾等千生萬死，身冒血戰，奪得城池，汝安敢誇口！”攸罵曰：“汝等皆匹夫耳，何足道哉！”褚大怒，拔劍殺攸，提頭來見曹操，說“許攸如此無禮，某殺之矣。”操曰：“子遠與吾舊交，故相戲耳，何故殺之！”深責許褚，令厚葬許攸。乃令人遍訪冀州賢士。冀民曰：“騎都尉崔琰，字季珪，清河東武城人也。數曾獻計於袁紹，紹不從，因此托疾在家。”操即召琰為本州別駕從事，而謂曰：“昨按本州戶籍，共計三十萬眾，可謂大州。”琰曰：“今天下分崩，九州幅裂，二袁兄弟相爭，冀民暴骨原野，丞相不急存問風俗，救其塗炭，而先計校戶籍，豈本州士女所望於明公哉？”操聞言，改容謝之，待為上賓。</ p >
< h2 >學編程上利永貞網</ h2 >
< p >一日，許褚走馬入東門，正迎許攸，攸喚褚曰：“汝等無我，安能出入此門乎？”褚怒曰：“吾等千生萬死，身冒血戰，奪得城池，汝安敢誇口！”攸罵曰：“汝等皆匹夫耳，何足道哉！”褚大怒，拔劍殺攸，提頭來見曹操，說“許攸如此無禮，某殺之矣。”操曰：“子遠與吾舊交，故相戲耳，何故殺之！”深責許褚，令厚葬許攸。乃令人遍訪冀州賢士。冀民曰：“騎都尉崔琰，字季珪，清河東武城人也。數曾獻計於袁紹，紹不從，因此托疾在家。”操即召琰為本州別駕從事，而謂曰：“昨按本州戶籍，共計三十萬眾，可謂大州。”琰曰：“今天下分崩，九州幅裂，二袁兄弟相爭，冀民暴骨原野，丞相不急存問風俗，救其塗炭，而先計校戶籍，豈本州士女所望於明公哉？”操聞言，改容謝之，待為上賓。</ p >
< h2 >快樂CSS</ h2 >
< p >一日，許褚走馬入東門，正迎許攸，攸喚褚曰：“汝等無我，安能出入此門乎？”褚怒曰：“吾等千生萬死，身冒血戰，奪得城池，汝安敢誇口！”攸罵曰：“汝等皆匹夫耳，何足道哉！”褚大怒，拔劍殺攸，提頭來見曹操，說“許攸如此無禮，某殺之矣。”操曰：“子遠與吾舊交，故相戲耳，何故殺之！”深責許褚，令厚葬許攸。乃令人遍訪冀州賢士。冀民曰：“騎都尉崔琰，字季珪，清河東武城人也。數曾獻計於袁紹，紹不從，因此托疾在家。”操即召琰為本州別駕從事，而謂曰：“昨按本州戶籍，共計三十萬眾，可謂大州。”琰曰：“今天下分崩，九州幅裂，二袁兄弟相爭，冀民暴骨原野，丞相不急存問風俗，救其塗炭，而先計校戶籍，豈本州士女所望於明公哉？”操聞言，改容謝之，待為上賓。</ p >
</ body >
</ html >

內容溢出

上面的例子，因限制高度，段落之間的內容相互重疊。

CSS的解決辦法叫內容溢出，它使用兩種方式處理內容多過盒子的情況，一是隱藏盒子內的內容，二是在盒子內加滾動條，讓用戶可以滑動滾動條查看。

CSS 內容溢出屬性叫overflow，它有兩個屬性：

  • hidden 把溢出盒子的內容隱藏
  • scroll 在盒子上加滾動條，讓用戶可以滑動滾動條查看

 我們將上面的示例進行修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >限制盒子高</ title >
     < style >  
         h2, p {
             width: 400px;
             font-size: 90%;
             line-height: 1.2em;}
         h2 {
             color: #324567;
             border-bottom: 1px solid #324567;}
         p {
             min-height: 10px;
             max-height: 40px;
             // overflow:hidden;
             overflow:scroll;
         }
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< h2 >利永貞網</ h2 >
< p >一日，許褚走馬入東門，正迎許攸，攸喚褚曰：“汝等無我，安能出入此門乎？”褚怒曰：“吾等千生萬死，身冒血戰，奪得城池，汝安敢誇口！”攸罵曰：“汝等皆匹夫耳，何足道哉！”褚大怒，拔劍殺攸，提頭來見曹操，說“許攸如此無禮，某殺之矣。”操曰：“子遠與吾舊交，故相戲耳，何故殺之！”深責許褚，令厚葬許攸。乃令人遍訪冀州賢士。冀民曰：“騎都尉崔琰，字季珪，清河東武城人也。數曾獻計於袁紹，紹不從，因此托疾在家。”操即召琰為本州別駕從事，而謂曰：“昨按本州戶籍，共計三十萬眾，可謂大州。”琰曰：“今天下分崩，九州幅裂，二袁兄弟相爭，冀民暴骨原野，丞相不急存問風俗，救其塗炭，而先計校戶籍，豈本州士女所望於明公哉？”操聞言，改容謝之，待為上賓。</ p >
< h2 >學編程上利永貞網</ h2 >
< p >一日，許褚走馬入東門，正迎許攸，攸喚褚曰：“汝等無我，安能出入此門乎？”褚怒曰：“吾等千生萬死，身冒血戰，奪得城池，汝安敢誇口！”攸罵曰：“汝等皆匹夫耳，何足道哉！”褚大怒，拔劍殺攸，提頭來見曹操，說“許攸如此無禮，某殺之矣。”操曰：“子遠與吾舊交，故相戲耳，何故殺之！”深責許褚，令厚葬許攸。乃令人遍訪冀州賢士。冀民曰：“騎都尉崔琰，字季珪，清河東武城人也。數曾獻計於袁紹，紹不從，因此托疾在家。”操即召琰為本州別駕從事，而謂曰：“昨按本州戶籍，共計三十萬眾，可謂大州。”琰曰：“今天下分崩，九州幅裂，二袁兄弟相爭，冀民暴骨原野，丞相不急存問風俗，救其塗炭，而先計校戶籍，豈本州士女所望於明公哉？”操聞言，改容謝之，待為上賓。</ p >
< h2 >快樂CSS</ h2 >
< p >一日，許褚走馬入東門，正迎許攸，攸喚褚曰：“汝等無我，安能出入此門乎？”褚怒曰：“吾等千生萬死，身冒血戰，奪得城池，汝安敢誇口！”攸罵曰：“汝等皆匹夫耳，何足道哉！”褚大怒，拔劍殺攸，提頭來見曹操，說“許攸如此無禮，某殺之矣。”操曰：“子遠與吾舊交，故相戲耳，何故殺之！”深責許褚，令厚葬許攸。乃令人遍訪冀州賢士。冀民曰：“騎都尉崔琰，字季珪，清河東武城人也。數曾獻計於袁紹，紹不從，因此托疾在家。”操即召琰為本州別駕從事，而謂曰：“昨按本州戶籍，共計三十萬眾，可謂大州。”琰曰：“今天下分崩，九州幅裂，二袁兄弟相爭，冀民暴骨原野，丞相不急存問風俗，救其塗炭，而先計校戶籍，豈本州士女所望於明公哉？”操聞言，改容謝之，待為上賓。</ p >
</ body >
</ html >


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 css3 彈性盒子 CSS盒子定位 CSS彈性盒子的基本用法 css 盒子陰影 css知多少（7）——盒子模型 聊聊css盒子模型 【CSS】盒子模型的計算 css 盒子模型理解 CSS屬性（CSS盒子模型） CSS系列：CSS中盒子的浮動與定位
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM