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

来自CloudWiki
跳转至： 导航， 搜索
（→‎边框属性）
第12行： 第12行：
 
*注：为了保证盒子的运行效果在各大浏览器中是一致的，只要盒子中内容的总高度不确定，就不要将height设置为固定值
 
*注：为了保证盒子的运行效果在各大浏览器中是一致的，只要盒子中内容的总高度不确定，就不要将height设置为固定值
 
== 边框属性 ==
 
== 边框属性 ==
−
*border
+
===border-style===
 +
*border-style 属性用于设置元素边框的样式。
 +
<nowiki>p
 +
  {
 +
  border-style:solid;
 +
  }</nowiki>
 +
*可能的值：
 +
dotted 定义点状边框。在大多数浏览器中呈现为实线。
 +
dashed 定义虚线。在大多数浏览器中呈现为实线。
 +
solid         定义实线。
 +
double 定义双线。双线的宽度等于 border-width 的值。
 +
*试一试：[http://www.w3school.com.cn/tiy/t.asp?f=csse_border-style 边框大集合]
 +
 
 +
===border-width ===
 +
*设置四个边框的宽度：
 +
<nowiki>p
 +
  {
 +
  border-style:solid;
 +
  border-width:15px;
 +
  }</nowiki>
 +
*"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。
 +
*可能的值：
 +
thin   定义细的边框。
 +
medium  默认。定义中等的边框。
 +
thick   定义粗的边框。
 +
length  允许您自定义边框的宽度。
 +
*试一试：[http://www.w3school.com.cn/tiy/t.asp?f=csse_border-width W3C实例]
 +
 
 +
===border-color ===
 +
 
 
== 内填充属性 ==
 
== 内填充属性 ==
 
*设置 p 元素的 4 个内边距：
 
*设置 p 元素的 4 个内边距：

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

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

宽度与高度

盒子的宽度

  1. 固定值，例如：width：700px；width:80%;
  2. auto，盒子的宽度由内部内容的宽度或者浏览器窗口宽度或者该盒子所在父元素的宽度来确定。
width：auto；

盒子的高度

  1. 固定值。盒子中内容的总高度确定，则可以将盒子的高度设置为一个固定值；例如height:300px;
  2. auto。若盒子中内容的总高度并不确定，则通常将盒子的高度设置为auto，此时，盒子的高度将根据其实际内容的多少来确定。
  • 注：为了保证盒子的运行效果在各大浏览器中是一致的，只要盒子中内容的总高度不确定，就不要将height设置为固定值

边框属性

border-style

  • border-style 属性用于设置元素边框的样式。
p
  {
  border-style:solid;
  }
  • 可能的值：
dotted 	定义点状边框。在大多数浏览器中呈现为实线。
dashed 	定义虚线。在大多数浏览器中呈现为实线。
solid 	        定义实线。
double 	定义双线。双线的宽度等于 border-width 的值。

border-width

  • 设置四个边框的宽度：
p
  {
  border-style:solid;
  border-width:15px;
  }
  • "border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。
  • 可能的值：
thin 	  定义细的边框。
medium   默认。定义中等的边框。
thick 	  定义粗的边框。
length   允许您自定义边框的宽度。

border-color

内填充属性

  • 设置 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:  右填充;

外边距属性

  • 围绕在元素边框的空白区域是外边距(margin)。设置外边距会在元素外创建额外的“空白”。
  • 设置一个p元素的所有四个边距：
p{
   padding:2cm 4cm 3cm 4cm;
}
  • 可能的值：
auto 	浏览器计算外边距。
length 	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
% 	规定基于父元素的宽度的百分比的外边距。
  • 可以使用综合的样式属性margin同时设置四个方向的边距，具体用法如下：
margin:四个方向统一值;	
margin:上下值 左右值;	
margin:上 左右 下;	值1设置上边距，值2设置左右边距，值3设置下边距。
margin:上 右 下 左;	四个值分别设置上、右、下、左四个方向的边距。
  • 想一想：以下分别在哪个方向设置填充值？
margin:10px 5px 15px 20px;
margin:10px 5px 15px;
margin:10px 5px;
margin:10px;
  • 试一试：W3C实例
  • 终极大杀器：如果忘了margin几个方向的排放次序，可以用下面的几个属性：
   margin-top
   margin-right
   margin-bottom
   margin-left
  • 思考：
    • 如何让网页页面随着浏览器窗口的缩小而缩小？
    • 如何让网页页面在页面窗口居中？

阴影和背景属性

返回 网页设计与开发

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