干货篇：揭开CSS盒模型神秘的面纱

盒模型是web布局核心，掌握基础知识，以后实战中会如鱼得水~

 

概念与历史

CSS中的元素，在浏览器的解析过程中，被当做盒状物，页面由一堆大大小小的盒子排列组成与嵌套，每个盒子都具备自己的属性。

历史：之前盒模型出现过宽度值包含了padding、border非标准的解析，CSS3新加的属性box-sizing的组成模式又实现了这一特性。

 

盒子组成

content 内容

width 宽

heigth 高

padding 内边距

margin 外边距

border 边框

outline 边框边缘之外的轮廓

box-sizing 设定盒模型的组成模式：很好的解决自适应布局不好精确留白（padding）的问题，一些业务场景用它也是最佳解决方案

box-shadow 阴影

 

那些不加样式的盒子

题：页面中只有<div></div>标签，那它的宽高分别是多少

解：宽度100%，高度0

题：<div>文字</div>，加上文字后呢

解：宽度100%，高度英文内容16px，中文17px

题：<div><p>文字</p></div> 这样的结构p元素会有些什么属性，值是多少了

解：p外边距上下分别15px，宽度100%，高度16

题：<span></span> 那span的宽高是

答：宽度0，高度16

题：<span>文字</span> 给span加上文字后呢

 

解：宽度由内容的多少决定，高度16px

 

题：众所周知span是行内元素，如何在不使用display:inline-block/block改变成块级元素的情况下让其能设置宽高

解：可以对其设置postion或float来让盒子变成块级元素~

 

给盒子们加点样式（请先想象一下盒子们在页面中的表现）

场景1：a和b设置了宽高100px，margin10px，span有同样的设置，它们在页面中的表现是，为什么

解：span设置了padding，margin都能生效，但上下不会对其它元素产生布局
上的影响，左右可以

 

场景2：两个盒子都设置了margin:10px中间距离会重叠，CSS语法设计决定了，margin左右不重，上下重，上下重的话谁的值更大取谁。

 

场景3：父和子都设置了margin，父b类为10，c类为20，最后页面中显示的距离是


父子元素重叠也是取其中最大值
，对父元素设置border/padding/overflow:hidden可解决重叠问题

 

CSS盒模型分享暂时就到这里啦，感兴趣的同学可以写写DEMO或留言交流。