首页 > Web开发 > 详细

css基础篇(二)——盒子模型

时间:2015-12-06 20:44:16      阅读:217      评论:0      收藏:0      [点我收藏+]

1.inline,inline-block,block

说盒子模型前先说说块元素,行内元素,行内块元素的区别

  • 块元素(block): 块元素排斥其他元素与其位于同一行,可设定元素的宽和高(如:div,p,h1~h6);
  • 行内元素(inline): 不可设置宽高,可以和其他行内元素位于同一行(如:a,span,em,strong);
  • 行内块元素(inline):通过display:inline-block强行转换元素为行内块元素;可以设置宽高,但是不会排斥其它元素与其位于同一行;

2.标准模式下的盒模型和怪异模式下的盒模型

2.1 -webkit-box-sizing:content-box | border-box

技术分享

-webkit-box-sizing为css3属性:可以设置盒模型的组成模式,下面将和标准模式和怪异模式下的盒模型一起介绍两者之间的区别:

2.2 标准和怪异的区别:

技术分享

标准盒子模型(content-box):padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding );

技术分享

非标准盒子模型(border-box):padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度;

!!!目前浏览器中存在非标准盒子模型的主要是IE6,IE5,如果需要兼容到IE6,《精通CSS高级Web标准解决方案》中有介绍相关的解决方案

3.盒子模型相关问题

3.1 纵向margin叠加

技术分享

场景描述: 第一个框设置margin-bottom:10px,第二个设置margin-top:20px,按常理两者间纵向的距离应该为30px,但实际情况是两者间距为20px,就是因为纵向margin发生叠加的结果(叠加都是大的吃掉小的)

!!!只有普通文档流中块框垂直空白才会发生空白边叠加;行内框,浮动框或者绝对定位框之间的空白不会发生叠加

3.2 行内元素设置padding-bottom,padding-top

技术分享

场景描述:行内元素中设置padding-top和padding-bottom是不起作用,但是会有一定的边距重叠现象,实际上padding-top:10px是没有起作用的,因为span的父元素设置了:margin-top:20px;span的padding-top虽然不起作用,但是会和上面的边距重叠,这样背景就会显示红色

!!!行内元素设置margin-top,margin-bottom,padding-top,padding-bottom不起作用

css基础篇(二)——盒子模型

原文:http://www.cnblogs.com/zhuz/p/5024160.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!