第八章 使用CSS设置网站格式（二）

8.7 边框

a {border width:1px;border-style:solid;border-color}

border-style是设置边框的格式的

还可以设置边框一条边的样式：

a{
border-left-width:3px;
border-left-color:green;
border-left-style:dotted;
}

8.7.2 外边距和内边距

   

.outer{border:2px solid black}
.inner{border:2px dotted black;
padding:0;
margin:0;}

padding就是内部边框元素与外边框之间的距离

margin就是设置内部边框与外部边框的距离

要将盒子内部的文字的居中，可是使用属性text-align:center

如果

.inner{
 margin-left:auto;
 margin-right:auto;
}

边框里面的元素将会水平居中

8.7.3 控制大小和元素显示

设置元素的最大宽度和高度

#container
{
  min-width:600px;
  max-width:600px;
}

这样就会把页面的尺寸限制在一个范围里面

如果边框里面的元素在盒子里面不够放，那么使用overflow

可以取以下的值

     hidden

     scroll

     auto

     inherit

具体看点击打开链接

8.7.4  浮动

 属性：float

float:right

这样就会将元素向右浮动，其他元素围绕它

如果出现

.right{
border:3px solid black;
float:right;
}
.botton{
clear:both;
}

下面使用时是：

<p class="right">
...
</p>
<p class="botton">
....
</p>

那么下面的botton里面的文字将不会围绕上面的文字，因为clear属性已经设置成both，这个是指可以消除浮动的影响，如果想消除左浮动的影响，那么可以

clear:left;