css盒子模式

呵,第一次听到这个叫法,觉得有趣,转一下:

CSS 中有个重要的概念,就是盒子模式 (Box model)。
胡戈的"一个馒头引发的血案"中有个圆圈套圆圈娱乐城,而这个盒子模式套用这句话来说,就是方块套方块。
先看看下面这个图,黑框包围的一个方块,就是一个盒子 (Box)。
 
盒子里由外至里依次是:
• margin 边距
• border 边框
• padding 间隙 (也有人称做补丁)
• content (内容,比如文本,图片等)
CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
CSS 边框属性 (border) 用来设定一个元素的边线。
CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。
CSS 背景属性指的是 content 和 padding 区域。
CSS 属性中的 width 和 height 指的是 content 区域的宽和高。

转自:http://www.phpchina.com/html/81/n-14881.html

.x-form .x-btn{ height:25px; width:95px; line-height:25px; color:#000; background:#414143 url(images/btn_02.jpg); border:0px; margin-left:5px; } .x-form .x-brnull{ border-right:0px; } .x-msg{ background:#EEF5FF; margin:0px auto; color:#000; border:1px solid #ccc; } .x-msg A{ text-decoration:none; color:red; } .x-form .x-blnull{ border-left:0px; } .x-form-title,.x-form-title td{ font-weight:bold; color:#000; background:#eee; border:1px solid #dcdcdc; } .x-form-bBack td{ background:url(images/bg6.jpg) repeat-x; color:#FFF; border:1px solid #4D4D4D; } .x-form-bGreen td{ background:url(pic/bg14.jpg) repeat-x; } .x-form-title span,.x-form-title td span{ margin-left:10px; } /**列表***/ .x-list{ width:100%; font-size:12px; } /***列表Head**/ .x-list .x-head td,.x-list .x-head th{ /***background:url(images/head_bg.gif) repeat-x;**/ background:url(pic/bg14.jpg) repeat-x; height:27px; line-height:27px; text-align:center; font-weight:bold; } /**行的默认颜色**/ .x-list td{ padding-left:3px; height:27px; line-height:27px; border:1px solid #dcdcdc; } .x-list .x-sRow td{ background:#F8F8F8; } /**偶数行背景颜色***/ .x-list .x-dRow td{ background: #FBECC6; } /**选TD背景颜色**/ .x-list .x-stRow td{ background:#d5effc url(images/td_over.png) repeat-x; } /**内容显示位置 left center right**/ .x-list .x-l{ text-align:left; } .x-list .x-c{ text-align:center; } .x-list .x-l{ text-align:right; } /**分页**/ .x-list .x-page{ height:35px; line-height:35px; background:#eee; text-align:center; } .x-list .x-page A{ margin-left:5px; text-decoration:none; color:#004A9B; } .x-list .x-page A:hover{ color:#404040; } .x-list td .x-a A{ text-decoration:none; color:#000; } .x-list td .x-a A:hover{ text-decoration:underline; color:#999; } 比较实用的box样式表单
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值