CSS—盒子模型(a)


W3C组织,建议把所有网页上的对象都放在一个“盒子”中—盒子模型。
盒子模型主要适用于块级元素。
盒子模型主要定义元素的四个区域:内容,内边距,边框,外边距;分别对应元素的四个属性:content、padding、border、margin。
设计师,通过控制盒子的属性,进而完成网页设计。
盒子模型的在页面中所占的宽度是:左外边距+左边宽+左内边距+内容+右内边距+右边框+右外边距。
以上是盒子模型的定义,如果笔试问道,在画一个图,应该就可以了。


理解了盒子模型的构成,还需要知道如何为盒子模型的属性赋值,以控制盒子模型的大小位置。

  • height、width
    <style type="text/css">
    div{
    height: 100px;
    width: 100px;
    background: red;
    padding: 20px;
    border: 5px solid blue;
    }
    </style>
    <div>
    content
    </div>

    左侧IE5.x效果,右侧非IE5.x效果

    如图,可以发现,在IE5.x版本height与width包括了border、padding、content。当新增padding值时,其实就是向内占据空间。
    其他版本,height与width则只是指代content部分的大小。
    【验证默认:height、width】
    【观察】
    左:IE5.x 中:IE6、7 右:IE8及现代浏览器

    【结论】width自动占据整个父元素的宽度,高度根据自身内容而定。

  • margin、padding
    定义:设置一个元素所有外边距的宽度。
    <style type="text/css">
    body{

              border: 1px solid red ;//目的:标识
          }
          div{
              height: 100px;
              width: 100px;
              background: red;
              border: 5px solid blue;
          }
      </style>
    

左:IE5.x 中:IE6、7 右:IE8及现代浏览器

上面这三个对比是在不设置marginpadding之后的对比图。
【验证:padding】
*{padding:0;}
【观察】以上三个图没有变化。
【结论】浏览器未对body、div设置默认padding值。
【验证:margin】
body{margin:0;}
【观察】
左:IE5.x 中:IE6、7 右:IE8及现代浏览器

【结论】浏览器未对div设置margin,对body设置了margin,但是在IE5.xbody默认margin的方式有点诡异。当对IE5.x的body设置margin时,也是向内增加边距。
接下来设置分别设置margin、padding观察区别。
【设置:margin】
div{margin:20px;}
【观察】
左:IE5.x 中:IE6、7 右:IE8及现代浏览器

【结论】ie5.x内部div对于margin的设置与其对于父元素bodymargin的设置效果一样。IE6、7对于div下外边距的设置不是很好。IE8、及现代浏览器可以满足。
【设置:padding】
body{padding:10px;}
【观察】
左:IE5.x 中:IE6、7 右:IE8及现代浏览器

【结论】
对于padding的兼容还是不错的。
\
通过以上对于margin、padding的对比,我认为,学习设置之前,还是有必要了解一下,浏览器对于各个元素默认的padding、margin的设置。
这里有关于元素的默认边距值。实际上,在我们编写代码时,我还是建议
body p ol ul form h1 h2 {
padding: 0;
margin: 0;
}
尽可能将这些被设了默认边距的元素,进行初始标准化设置,有些人会问可以用通配符统一设置,效率低啊,原因之前介绍过啦。

11.22日补充
默认定位??情况下,margin的垂直外边距会相互重叠,元素之间的垂直间距,会等于=max((上)magin-bottom,(下)margin-top)
但是元素被设置了float后,与其他元素的垂直外边距不会重叠,元素之间的垂直间距,会等于=(上)magin-bottom+(下)margin-top

需要注意的是,以上的设置均是在普通流定位模型下的情况。关于定位,我马上就要写这一篇啦。

欢迎补充与指正☺
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,792评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,327评论 0 11
  • Ø JavaScript 3 1. HTML对象获取问题 32. const问题 33. event.x与even...
    横冲直撞666阅读 3,210评论 0 7