css盒子模型
来源:互联网 发布:数据库程序设计难吗 编辑:程序博客网 时间:2024/05/24 06:34
在HTML的编写中,一直知道margin、padding、border,但却不知道什么是盒子模型。偶尔被人问起,却没有答出来。回到家赶紧上网查了一下,以下是整理的内容。
CSS中, Box Model叫盒子模型(或框模型),即定义了内容(content)、填充(padding)、边框(border)、边界(margin)。在HTML文档中,每个元素(element)都有盒子模型。
下面是Box Model的图示:
说明:上图中,由内而外依次是
元素内容(content)、
内边矩(padding-top、padding-right、padding-bottom、padding-left)、
边框(border-top、border-right、border-bottom、border-left)、
外边距(marging-top、margin-right、margin-bottom、margin-left)。
内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。而且,外边距可以是负值,而且在很多情况下都要使用负值的外边距。
内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器(*)对所有元素进行设置,如下:
/*设置所有元素的外边距和内边矩为0*/* { margin: 0; padding: 0;}
下面我们来具体的说一下margin和padding。
1、margin: 包括margin-top、margin-right、margin-bottom、margin-left,控制块级元素之间的距离,它们是透明不可见的。根据上、 右、下、左的顺时针规则,可以写为
margin: 10px 10px 10px 10px;
为便于记忆,请参考下图:
当上下、左右margin值分别一致, 可简写为:
margin: 10px 10px;
前一个10px代表上下margin值,后一个10px代表左右margin值。
当上下左右margin值均一致,可简写为:
margin: 10px;
2、Padding: 包括padding-top、padding-right、padding-bottom、padding-left,控制块级元素内部,content与border之间的距离。它的写法规则如下:
margin: 10px 10px 10px 10px;
具体用法如下:
body { padding: 36px;} //对象四边的补丁边距均为36px body { padding: 36px 24px; } //上下两边的补丁边距为36px,左右两边的补丁边距为24px body { padding: 36px 24px 18px; } //上、下两边的补丁边距分别为36px、18px,左右两边的补丁边距为24px body { padding: 36px 24px 18px 12px; } //上、右、下、左补丁边距分别为36px、24px、18px、12px
那么,我们已经基本了解margin和padding属性的基本用法。就自己动手试试吧。
参考文章:http://www.cnblogs.com/linjiqin/p/3556497.html
http://www.cnblogs.com/sunyunh/archive/2012/09/01/2666841.html
- 理解CSS盒子模型
- 盒子模型 css
- css盒子模型
- CSS盒子模型
- CSS核心--盒子模型
- CSS核心--盒子模型
- CSS盒子模型
- CSS盒子模型
- DIV+CSS盒子模型
- CSS盒子模型
- css盒子模型
- CSS盒子模型介绍
- CSS+DIV 盒子模型
- CSS盒子模型
- CSS 盒子模型
- CSS盒子模型
- CSS盒子模型详解 .
- css中的盒子模型
- Lotus Notes/Domino 的理解
- Guava不可变集合
- 给个人分配权限的时候有的功能未在权限列表中如何处理
- C语言获取文件的SHA1哈希值(文件校验)
- Linux 下 Make 命令
- css盒子模型
- Linux下pthread简单样例
- RSA加解密初体验--证书
- 2017年网易互联网内推笔试题-数字游戏
- 漫谈SOA(面向服务架构)
- 从JVM内存管理的角度谈谈静态方法和静态属性
- jQ函数after、append、appendTo的区别
- openstack-I版启动虚拟机XML文件
- vs2013多个项目中设置单独启动