【CSS】【7】CSS的盒子模型-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

【CSS】【7】CSS的盒子模型

简介:
一、margin与padding的区别:    
   当我们把网页想像成一面墙时,网页中的内容总可以概括为由一个个的盒子所构成的,如图:

225730696.jpg

   这里单独地把一个盒子拿出来,就会发现由外边距、边框、内边距和内容四部分构成:

225742649.jpg

   这里面红线所标识的为外边距(margin)、再向里灰色的标识为边框(border)、蓝色线所标识的为内边距(padding)、再向里是具体的内容(content),是否与照片非常相似?此时也可以认为盒子模型中的盒子就是一个块(div),它是由相片框、相片及相片框与外面墙的距离、相片框和相片之间的距离所构成。

二、举例:

1、

div
{

   margin:3px 5px 6px;
   padding:4px 6px;
   border-width:6px;
   border-color:black;
   width:500;
   heigth:300;
}

这段CSS定义描述了这么一个盒子:

它的外边距与顶部的距离为3像素、外边距与左右部的距离为5像素,外边距为底部的距离为6像素;

它的边框宽度为6像素,边框颜色为黑色;

它的内边距与上下边框的距离为4像素,与左右边框的距离为6像素;

照片的大小为500*300

2、盒子缺省值的说明,以margin为例:

  margin:4px;

  表示盒子与上右下左边距的距离均为4像素;

  margin:4px 6px;

  表示盒子与上下边距的距离为4像素,右左边距的距离为6像素;

  margin:4px 5px 6px;

  表示盒子与上边距的距离为4像素,与右左边距的距离为5像素,与下边距的距离为6像素;

  margin:4px 5px 6px 7px;

  表示盒子与上边距的距离为4像素,与右边距的距离为5像素,与下边距的距离为6像素,与左边距的距离为7像素;

3、了解了盒子的概念之后,自己再实现一遍《【CSS】【6】CSS学习的一些前提》。





     本文转自qingkechina 51CTO博客,原文链接:http://blog.51cto.com/qingkechina/1261738,如需转载请自行联系原作者




版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章