css布局实践心得总结

一、摘要：

今天在写一个页面，对css中的BFC（块级格式化范围）有了一点体会，今天把遇到的问题和解决方案总结下来，额外还总结一下强大的负外边距的使用心得。

二、总结：

 

主体部分整体居中显示，主体部分看上去像是三列，实质上只有一列，两边的内容都是放在中间的文本里面，这里就是用了强大的负外边距达到的效果。

html结构：

 

1.关于负外边距：

因为要保证两边的容器和中间的容器按要求对齐，所以把它们都放在中间的容器里面，然后再浮动，再设置负外边距达到想要的效果：

左边内容显示的css代码：

先让它左浮动，然后再让其向左移动一定的距离；因为只是想让容器向左移一定的距离，采用负外边距，只要知道当前要移动的容器的宽度，一般就很明确的知道了要移动的距离；特别是当我们不能很直观的知道当前容器与最外层的容器的外边距是多少的时候，采用负外边距可以避免复杂的计算。

 

右边内容显示的css代码：

 

2.关于BFC：

目前资料参照的是一位博主总结的关于BFC的文章：关于Block Formatting Context－－BFC和IE的hasLayout

我遇到的问题：如何让红框中的内容在容器中居中显示（其实也算是如何让div居中的问题，这里关键问题是要居中的div外面还有一个div）：

采用position的方式来实现布局，先左右居中：

效果：

 

加一段css代码，再让它垂直方向也居中：

 

效果：

采用position定位这个容器原则上是，想让其先在垂直方向偏移父容器的50%，然后再向上移动自己宽度的一般达到居中的效果。

然而在这里子元素的布局完全是影响到了父容器的布局，并不是我们预期达到的效果。

要想让子元素的布局不影响父容器的布局，就需要让子元素和父元素处在不同的环境中。在普通流中的 Box(每一个元素都是一个盒子) 属于一种 formatting context(格式化上下文) ，如果将元素设置成block formatting context(块级格式化上下文)就让元素处在了不同的环境中，BFC它是一个独立容器，这个容器里box的布局，和容器外的毫不相干。

如何将元素设置成BFC容器：

 

我这里将父容器设置了绝对布局，让其成为BFC的容器，从而布局不受到子元素的影响：

css代码：

 

效果：

 

补充：

主要是子元素中的margin-top这个属性值影响到了父容器的布局

 

转载于:https://www.cnblogs.com/yy95/p/5724091.html