CSS盒模型

7人阅读 评论(0) 收藏 举报
分类:

1)盒模型结构



想象一个盒子,它有:外边距(margin)、边框(border)、内边距(padding)、内容(content)四个属性;

内容(CONTENT):盒子里装的东西;
填充(PADDING)     :怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;

边框(BORDER)       :盒子本身;至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。

下述即为盒模型的平面图:


2)盒模型属性介绍

1、margin: 包括margin-top、margin-right、margin-bottom、margin-left,控制块级元素之间的距离,它们是透明不可见的。根据上、 右、下、左的顺时针规则,可以写为 margin: 40px 40px 40px 40px;
为便于记忆,请参考下图:

 2、Padding: 包括padding-top、padding-right、padding-bottom、padding-left,控制块级元素内部,content与border之间的距离,其代码,简写请参考margin属性的写法。

备注:约定的写法中有简写规则,样例如下。
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


参考资料:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-top       //盒模型基础属性

http://www.w3school.com.cn/css3/index.asp           //css3的盒模型特性


查看评论

css盒模型css盒模型

  • 2011年04月19日 16:42
  • 9.27MB
  • 下载

CSS标准盒模型与IE盒子模型以及弹性盒模型

CSS2.1中提出了盒模型的概念,盒模型高度提炼了所有元素的基本特征,即标准盒模型,CSS3中进一步扩展,提出了弹性盒模型的概念 什么是盒模型,我们可以先直观的看一个东西 打开Chrome浏览器,...
  • qq_33858965
  • qq_33858965
  • 2017-09-13 17:58:35
  • 813

CSS中的盒模型分类

CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型。 大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准。 怪异模式是“部分浏览器在支持W3...
  • jingtian678
  • jingtian678
  • 2017-07-19 22:32:08
  • 407

css3之几种盒模型

昨晚回去花了点时间,系统的学习了一下盒模型,现总结如下。 1、盒的基本类型: 在css3中使用display属性来定义盒的类型,总体来说盒分为block类型和inline类型。 我们之前所学的d...
  • u012859748
  • u012859748
  • 2016-09-23 10:43:01
  • 3092

前端面试题之CSS盒模型

前端面试对于CSS这块不可或缺的一个考察点就是盒模型(BOX),通过对BOX的提问就可以了解你在CSS知识方面的掌握程度。本文主要介绍CSS中的盒模型在面试中可能会问到的相关问题和知识点,不足指出请指...
  • m0_37585915
  • m0_37585915
  • 2017-11-10 17:17:58
  • 681

CSS盒模型全面讲解,怪异模式盒模型,CSS3 box-sizing属性

今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理。 先不考虑css3的情况,盒模型一共有两种模式,一种是标准模式,另一种就是...
  • quguang65265
  • quguang65265
  • 2016-03-24 12:04:32
  • 1665

CSS-标准盒模型 & 怪异盒模型

CSS-标准盒模型 & 怪异盒模型
  • Dong_PT
  • Dong_PT
  • 2016-04-29 14:01:39
  • 19843

简述对CSS的盒子模型理解?

CSS盒子模型也叫做框模型,具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中,每一个元素都被视为一个框,而每个框都有三个属性: bor...
  • u012396955
  • u012396955
  • 2016-12-29 13:42:06
  • 4014

CSS属性之弹性盒模型(新)

弹性盒布局模型是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种 更加高效的方式来对容器中的 条目 进行 布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。这种布局...
  • h15882065951
  • h15882065951
  • 2017-02-21 21:47:39
  • 433

CSS2.0盒模型层次平面示意图和3D示意图

CSS2.0盒模型层次平面示意图和3D示意图3像素问题及解决办法当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左...
  • e_wsq
  • e_wsq
  • 2011-10-27 19:25:57
  • 722
    个人资料
    持之以恒
    等级:
    访问量: 2万+
    积分: 648
    排名: 7万+
    最新评论