CSS3学习笔记(2)-CSS盒子模型
p{
font-size: 15px; text-indent: 2em;
}
.alexrootdiv>div{
background: #eeeeee; border: 1px solid #aaa; width: 99%; padding: 5px; margin: 1em 0 1em 0;
}
.alexrootdiv>div>p:first-of-type,.alextitlep{
font-size: 18px; font-weight: bold; color: red;
}
.alexrootdiv span{
color:blue;font-weight:bold;
}
.alexrootdiv table{
margin-top:10px;border-collapse:collapse;border:1px solid #aaa;width:100%;
}
.alexrootdiv table th{
vertical-align:baseline;padding:5px 15px 5px 6px;background-color:#d5d5d5;border:1px solid #aaa;text-align:left;
}
.alexrootdiv table td{
vertical-align:text-top;padding:6px 15px 6px 6px;background-color:#efefef;border:1px solid #aaa;
}
.attentationp{
font-size: 15px; text-indent: 2em; background: #ee0; color: red; font-weight: bold;
}
-->
在了解更多的CSS3知识之前,有必要重新温习下CSS的盒子模型。HTML页面上所有元素都体现为一个个的矩形盒子。每一个盒子从内到外包括:元素内容(content)、内边距(padding)、边框(border)和外边距(margin)。下面左图是W3C标准盒子模型的图示,右图是IE6盒子模型:
W3C盒子与IE6盒子的差异
W3C盒子的宽度(width):指元素内容区域content的宽度
W3C盒子的高度(height):指元素内容区域content的高度
IE6盒子的宽度(width):指元素外边距区域margin的宽度
IE6盒子的高度(height):指元素外边距区域margin的高度
TRBL参数指定顺序
从上面的图片可以看到,content、padding、border及margin的各项参数还可以明细到上下左右各位置上,在CSS中设置这些参数时,可以通过一条语句进行设置。指定参数时一般是按照TRBL依次确定的,T表示Top(上),R表示Right(右),B表示Bottom(底),L表示Left(左)。指定参数的方式有:1个参数、2个参数、3个参数和4个参数的指定方式。以下是示例说明:
指定单个参数
div{
margin:2px; //div标签的所有上下左右外边距都是2px
}
指定两个参数
p{
padding:2px 6px; //p元素的上下内边距为2px,左右边距为6px
}
指定三个参数
span{
border-width:0 2px 4px; //span标签上边框粗细为0,左右边框粗细为2px,底边框粗细为4px
}
指定四个参数
table{
margin:1px 2px 3px 4px; //table标签的上边距为1px,右边距为2px,下边距为3px,左边距为4px
}
最新文章
- GLUT的简洁OO封装
- Java for LeetCode 217 Contains Duplicate
- VS2010无法修改资源文件
- Machine Learning for hackers读书笔记(三)分类:垃圾邮件过滤
- XML的特殊字符处理
- 编辑器TP
- 认识Log4j
- git 删除分支操作
- Tempset 暴风射击
- Python内置类型(1)——真值测试
- 快速排序 Java实现的快速排序
- Java编辑PDF写入文字 插入图片
- java类加载,简单认识
- https单向认证服务端发送到客户端到底会不会加密?
- 设计模式之抽象工厂模式(Java实现)
- JS怎么计算html标签里文字的宽度
- 【剑指offer】数字在排序数组中出现的次数,C++实现
- Spring实战之装配Bean
- spring mvc从@ResponseBody取到json发现中文乱码
- shell -- sed用法