width/height

发表于 更新于 分类于 阅读次数：

width/height

宽、高属性： 对于块级元素来说就像个盒子，那么盒子的尺寸宽和高是可以设定的。没有设定时，盒子会根据内部存放内容的大小自动调整。如果设定了宽度，那么内容超过后会自动换行。如果设定高度后，宽度自动到最大或设定值都不能容纳内部内容则内容会溢出。 1. width (500px;50%) 2. height (300px;20%) 因为终端浏览器视口大小不一致，有些时候建议还是设置成比例比较好。 举例： 
1
2
3
<h5>下面这段只指定了宽度为80%，未指定高度。那么块容器的高度会根据内部内容的高度来自动适应。</h5>
<p style="font: normal 100 1.2em 等线light;background-color:#bcd68d;line-height:8mm;padding:1em;text-indent: 0em;text-align:justify;color:#0078d7;border:1px solid red;width:80%;margin-left:8%">跟着我来复习HTML相关知识,这将有助于我将来的学习工作中的文字编辑和排版。特别是我对文档的高要求准的人，甚至于在中方面有些强迫症。平常使用中多加练习，熟能生巧，相信假以时日必将熟练掌握。这些技能虽然不能当饭吃，换来钱。但是在我平常的工作和个人爱好上得心应手，带来愉悦的心情。
</p>
下面这段只指定了宽度为80%，未指定高度。那么块容器的高度会根据内部内容的高度来自动适应。

跟着我来复习HTML相关知识,这将有助于我将来的学习工作中的文字编辑和排版。特别是我对文档的高要求准的人，甚至于在中方面有些强迫症。平常使用中多加练习，熟能生巧，相信假以时日必将熟练掌握。这些技能虽然不能当饭吃，换来钱。但是在我平常的工作和个人爱好上得心应手，带来愉悦的心情。 

1
2
<p style="font: normal 100 1.2em 等线light;background-color:#bcd68d;line-height:8mm;padding:10px;text-indent: 1em;text-align:justify;color:#0078d7;border:2px solid red;width:80%;height:80px;margin-left: 5%">跟着我来复习HTML相关知识,这将有助于我将来的学习工作中的文字编辑和排版。特别是我对文档的高要求准的人，甚至于在中方面有些强迫症。平常使用中多加练习，熟能生巧，相信假以时日必将熟练掌握。这些技能虽然不能当饭吃，换来钱。但是在我平常的工作和个人爱好上得心应手，带来愉悦的心情。
</p>
下面这段既指定了宽度为80%，高度80px。那么块容器内部内容如果放不下就会往下溢出。

跟着我来复习HTML相关知识,这将有助于我将来的学习工作中的文字编辑和排版。特别是我对文档的高要求准的人，甚至于在中方面有些强迫症。平常使用中多加练习，熟能生巧，相信假以时日必将熟练掌握。这些技能虽然不能当饭吃，换来钱。但是在我平常的工作和个人爱好上得心应手，带来愉悦的心情。