“盒子的基本属性”的版本间的差异

来自CloudWiki
跳转至： 导航， 搜索
第3行： 第3行：
 
== 宽度与高度 ==
 
== 宽度与高度 ==
 
*详见[[盒子模型的实现]]
 
*详见[[盒子模型的实现]]
−
 
+
*注：为了保证盒子的运行效果在各大浏览器中是一致的，只要盒子中内容的总高度不确定，就不要将height设置为固定值
 
== 边框属性 ==
 
== 边框属性 ==
  
 
== 内填充属性 ==
 
== 内填充属性 ==
 +
*设置 p 元素的 4 个内边距：
 +
<nowiki>p{
 +
  padding:2cm 4cm 3cm 4cm;
 +
}</nowiki>
 +
*可能的值：
 +
<nowiki>length 规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
 +
% 规定基于父元素的宽度的百分比的填充</nowiki>
 +
*可以使用综合的样式属性padding同时设置四个方向的填充，具体用法如下：
 +
**padding:四个方向统一值;
 +
**padding:上下值 左右值;
 +
**padding:上 左右 下; 值1设置上填充，值2设置左右填充，值3设置下填充。
 +
**padding:上 右 下 左; 四个值分别设置上、右、下、左四个方向的填充。
 +
*想一想：以下分别在哪个方向设置填充值？
 +
**padding:10px 5px 15px 20px;
 +
**padding:10px 5px 15px;
 +
**padding:10px 5px;
 +
**padding:10px;
 +
*试一试：[http://www.w3school.com.cn/tiy/t.asp?f=csse_padding W3C实例]
 +
*'''终极大杀器'''：如果忘了padding几个方向的排放次序，可以用下面的几个属性：
 +
**padding-top:  上填充;
 +
**padding-bottom:下填充;
 +
*padding-left:  左填充;
 +
**padding-right:  右填充;
 +
== 外边距属性 ==
  
−
== 外边距属性 ==
 
 
*思考：
 
*思考：
 
**如何让网页页面随着浏览器窗口的缩小而缩小？
 
**如何让网页页面随着浏览器窗口的缩小而缩小？

2017年10月16日 (一) 07:09的版本

  • 盒子属性是盒子模型的关键

宽度与高度

  • 详见盒子模型的实现
  • 注：为了保证盒子的运行效果在各大浏览器中是一致的，只要盒子中内容的总高度不确定，就不要将height设置为固定值

边框属性

内填充属性

  • 设置 p 元素的 4 个内边距：
p{
   padding:2cm 4cm 3cm 4cm;
}
  • 可能的值：
length 	规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
% 	规定基于父元素的宽度的百分比的填充
  • 可以使用综合的样式属性padding同时设置四个方向的填充，具体用法如下：
**padding:四个方向统一值;	
**padding:上下值 左右值;	
**padding:上 左右 下;	值1设置上填充，值2设置左右填充，值3设置下填充。
**padding:上 右 下 左;	四个值分别设置上、右、下、左四个方向的填充。
  • 想一想：以下分别在哪个方向设置填充值？
**padding:10px 5px 15px 20px;
**padding:10px 5px 15px;
**padding:10px 5px;
**padding:10px;
  • 试一试：W3C实例
  • 终极大杀器：如果忘了padding几个方向的排放次序，可以用下面的几个属性：
    • padding-top: 上填充;
    • padding-bottom:下填充;
  • padding-left: 左填充;
    • padding-right: 右填充;

外边距属性

  • 思考：
    • 如何让网页页面随着浏览器窗口的缩小而缩小？
    • 如何让网页页面在页面窗口居中？

阴影和背景属性

返回 网页设计与开发

取自“http://www.openbrains.net/mediawiki/index.php?title=盒子的基本属性&oldid=1130”