CSS 盒子大小

盒子的宽和高

盒子的大小通过宽和高来指定。

默认情况下，盒子的大小刚好容纳其中的内容。

两个属性设置盒子的宽和高

  • 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>
posted @ 2019-03-22 11:55  乱世以外  阅读(3922)  评论(0)  编辑  收藏  举报