第19章 设置尺寸

19.1设置宽度
    宽度的语法形式如下:
    width:auto|length
    auto为根据浏览器窗口调节宽度,也是默认值,
    length为具体值加单位标识符表示。
 实例:
<html>
<head>
<title>设置宽度</title>
<style type="text/css">
.box
{
/*设置宽度边框*/
width:200px;
/*边框红色1像素实线型*/
border:1px solid red;
}
.box2
{
/*设置宽度为100像素*/
width:100px;
/*设置边框*/
border:3px solid red;
/*设置对像与上一对象距离为10*/
margin-top:10px;
}
.box3
{
/*设置宽度为50像素*/
width:50px;
/*设置边框*/
border:1px solid red;
/*设置对象的外补丁,与上面对象距离值*/
margin-top:10px;
}
</style>
</head>
<body>
<div class="box">
这是第一层,宽度为200px.
</div>
<div class="box2">
这是第二层,宽度为100px.
</div>
<div class="box3">
这是第三层,宽度为50px.
</div>
</body>
</html>
19.2设置高度
   语法形式:
   height:auto|length
   auto:根据浏览器窗口调节高度,第二值是用具体的值加单位标识符表示,可以
是百分数。
实例:
<html>
<head>
<title>设置高度</title>
<style type="text/css">
.box
{
    /*设置宽度和边框*/
 height:30px;
 /*设置边框*/
 border:1px solid red;
}
.box2
{
    /*设置高度为60像素*/
 height:60px;
 border:1px solid red;
 /*设置顶部外补丁*/
 margin-top:10px;
}
.box3
{
    /*设置高度为50%*/
 width:50%;
 border:1px solid red;
 /*设置顶部外补丁*/
 margin-top:10px;
}
</style>
</head>
<body>
     <div class="box">
  这是第一层,高度为30px.
  </div>
  <div class="box2">
  这是第二层,高度为60px.
  </div>
  <div class="box3">
  这是第三层,高度为50%.
  </div>
</body>
</html>
 

你可能感兴趣的:(html,职场,休闲)