WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>前端样式>>CSS区块(盒子)属性详解

CSS区块(盒子)属性详解

[ 录入者:91ctc | 时间:2012-04-22 02:09:46 | 作者: 91ctc| 来源:本站原创 | 浏览: 次 ]

在格式化页面时,CSS会将所有对象都放置在一个容器里面,这个容器被称为区块(盒子)。就是将每个元素都当做一个长方形盒子,用这个假象的盒子设置各元素与网页之间的空白距离,如元素的边框宽度,颜色,样式,以及元素内容与边框之间的空白距离。

区块属性

width  设定对象的宽度

height 设定对象的高度

float 让文字环绕在一个元素的四周

clear 指定在某一个元素的某一边是否允许有环绕的文字会对象

padding 决定了究竟在边框与内容之间应该有多少空间距离

margin 设置一个元素在4个方向上与浏览器窗口边界或上一级元素边界的距离

在CSS里使用矩形区块,并搭配margin属性,border属性以及padding属性,来控制元素的样式,上述三种属性通常用于文档段落、图片及表格网页边距的空白距离,或者设置表格内的边框及空白样式等。

区块(盒子)的基本信息:

width:value
height:value
float:value
clear:value

范例:

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>      
  3. <style type="text/css">      
  4. <!--       
  5. .self{       
  6. width:500px;   
  7. height:300px;    
  8. float:left;   
  9. clear:both;   
  10. }       
  11. -->      
  12. </style>  
  13. </head>  
  14. <body>  
  15. ……   
  16.   <div class="self">  
  17.   ……   
  18.   </div>  
  19. ……   
  20. </body>  
  21. </html>  

区块(盒子)的边缘信息:

基本语法:padding:value

margin:value

padding和margin的属性值

top上填充距离
right右填充距离
bottom下填充距离
left左填充距离

注意:margin和padding的区别是

margin:指定了元素边界与其他盒子外元素的空白距离(即当前盒子的外边距
padding:指定了元素边界与盒子内元素的空白距离(即当前盒子的内边距

范例:

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>      
  3. <style type="text/css">      
  4. <!--       
  5. .self{       
  6. width:500px;height:300px; float:left;clear:both; margin-top:20px; margin-right:30px; margin-bottom:20px; margin-left:30px; padding:20px; background-color:#336699;   
  7. }       
  8. -->      
  9. </style>  
  10. </head>  
  11. <body>  
  12. ……   
  13.   <div class="self">  
  14.   ……   
  15.   </div>  
  16. ……   
  17. </body>  
  18. </html>  

 

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号