深入浅出CSS：Div（一）

这个系列是学习笔记，简明记录结论性的知识。

新建一个层时，border为零，margin为0，padding为0，如果不指定宽度（width），则自动100%填充父元素。

三、层与父元素的关系

1. 举例，直接建立一个新层div1，则它的父元素就是body，当给新层添加内外补白或边框等等时，body的宽度并未发生变化。

当层不断的扩张，比如增加margin,padding或border时，它的总长或总宽=本身+扩张的长/宽。

当层扩张后的宽度到达极限等于body的宽度时，就不能继续扩张，因为父元素的宽度不会变，这时再增加宽度，只能在内部压缩。

原理1：层无论怎么扩张，都不会超过父元素的宽度。如果想让一个层的宽度固定不变（层A），利用这个原理，就在这个层的内部再套一个内部层（层B），则层B无论怎么扩张都不会超过层A。*也就是栏高限制内容

原理应用实例1：

如图所示，外层wrapper包裹三个内部层ABC，并且三个内部层的宽度之和正好等于wrapper层宽度。

当扩大内部层的宽度时，比如层B，由于宽度大于外部层，所以会将最右边的层C挤落。

解决方法：

1.进行精确计算，扩张多少，内部层就减少多少宽度，缺点：需要不停的精确计算。

2.在需要改变的层内再套一个内部层，然后将内容放在内部层中（前面原理的应用）

3.用CSS3的新功能。

 

转载于:https://www.cnblogs.com/tinaluo/p/7099057.html