这种方式最好应用于图片、按钮、文字之类的居中模式,不然就须要借助inline-block来进行居中布局。web
适用于块级元素不给出宽高的状况下(须要借助transtrom的tanslateX方法)。浏览器
#parent{ position: relative; } #child{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
方法四:利用flex弹性布局的一个属性。svg
子元素宽度已知的状况下布局
#parent{ display: flex; justify-content: center; }
1.子元素 div 绝对定位
2.父元素须要被定位
3.子元素 top、bottom、left、right 四个位置值均为 0
4.子元素 margin: auto;flex
#parent{ width: 100%; height:100%; position: fixed; } #child{ width: 400px; height: 200px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: #ccc; }
#parent{ position: fixed; width: 100%; height: 100%; } #child{ position: absolute; left: 50%; top: 50%; width: 400px; height: 200px; margin-top: -100px; margin-left: -200px; background-color: #ccc; }
对于未给出宽高的元素,又须要请transform登场了,同时须要作好各浏览器的兼容。对于我这种懒癌患者,就不给出兼容代码嘞~code
我猜吧,你们对这种布局方式最熟悉不过了,平时用的也会比较多,因此呢,大家写的应该都会比个人好~orm
这种方式必定要记得给父元素清除浮动啊,否则就尴尬了呢,这里插播一种全局性(这个词彷佛不太对)的清除浮动的伪元素方法.
.clearfix:after { content: '.'; height: 0; overflow: hidden; clear: both; display: block; visibility: hidden; } .clearfix { zoom: 1; <!--hack--> }
看起来有点小复杂啊,这里不分析这种方法的原理,记住就行了。固然你也能够直接借助触发BFC的方式来解决(偷偷告诉你,经常使用的方式就是给你的父元素设置overflow: hidden;啦)。xml
哦+语气~好像跑偏了,说好的布局呢,见下诉代码:图片
#left{ float: left; width: 100px; } #right{ margin-left: 120px; }
这就是传说中利用BFC的规则来实现两列布局啊啊啊!文档
此处作个修改,原来写的有点问题(发现这种方式父元素的高度是取决于最大子元素的高度,在左边栏高度大于右边栏的状况下不会出现问题,可是反过来就塌陷了,因此仍是须要给父元素清除浮动)
#left{ float: left; width: 100px; margin-right: 20px; <!--好歹留个空啊嘿嘿--> } #right{ overflow: hidden; }
这个方式呢也用到过,可是要考虑的比较多一点,不过其实也还好。
接下来请看实现代码:
#parent{ position: relative; } #left{ float: left; width: 100px; background-color: #ccc; } #right{ position: absolute; top: 0; left: 120px; background-color:pink; }
这种方式实现起来很简单,可是对后文是有影响的,须要本身解决一下,懒小花就不写啦~
这个呢,坑确定是比较多的,建议用在小范围的布局,固然某些时候用起来确实比较爽歪歪啦
#parent{ display: flex; } #left{ width: 100px; margin-right: 20px; } #right{ flex: 1; }
其余的吧,我暂时还没用到也没写到~网上一搜会有好多好多精讲的。
话说其实我就只写了一种方法,我都有点很差意思放上来了,无论了,小花的脸皮比较厚,不怕!
#parent { position: relative; } #left { margin-right:220px; } #right { position: absolute; right:0; top:0; width: 200px; }
其实这个布局用的也挺多的啊哈,嗯,昨天写的做业就是这个!
注意:
1.左侧元素与右侧元素优先渲染,分别向左和向右浮动
2.中间元素在文档流的最后渲染,自动插入到左右两列元素的中间,随后设置 margin 左右边距分别为左右两列的宽度,将中间元素调整到正确的位置。
.left{ float: left; width: 200px; height: 200px; } .right{ float: right; width: 100px; height: 100px; } .middle{ margin:0 120px 0 220px; }
但凡用float的时候都要想一下父元素上清除浮动这个问题!
其实感受跟float的原理差很少,都是将左右两侧的块先固定好,再对中间部分进行处理,只不过本身能够在不一样状况下选择float或者position。(补充:这种方式的父元素高度取决于中间部分的高度,当两侧高度大于中间高度时,则出现高度塌陷,除非指定父元素的高度,当两侧高度小于中间部分时,可使用。因此要考虑使用场景慎重选择不一样的方式~)
.parent{ position: relative; } .left{ position: absolute; width: 200px; height: 200px; top: 0; left: 0; } .right{ position: absolute; top: 0; right: 0; width: 100px; height: 100px; } .middle{ margin:0 120px 0 220px; }
不得不说的是其实不少布局均可以用flex来实现(简单粗暴嘿嘿),可是flex的兼容性不是很好,而且还有别问题,因此保险起见仍是选择经常使用的,这里简单介绍下。
.parent{ display: flex; } .left{ width: 200px; height: 200px; } .right{ width: 100px; height: 100px; } .middle{ flex: 1; margin:0 20px; }
要注意的是这种布局方式须要将主栏优先渲染,而后再加上两边的翅膀,即双翼,不过话又说话来,虽然小花是按照这个套路写的,但也不肯定本身写的就是双翼布局。
为了避免误人子弟,在这先说明只是参考参考哟(欢迎大佬纠正)~
第一步,先将主栏左浮动,并设宽度为100%,即铺满父元素 第二步,将左栏左浮动,并设左外边距为-100% 第三步,将右栏左浮动,并设左外边距为负的自身宽度 第四步,设置主栏,嘿嘿,这时候无论你使用什么方法都达不到效果,解决办法就是给主栏的内容加一个包裹层,并设左右外边距为左右两侧的宽度。 第五步,好了,完美!(可是别忘了,要清除浮动哦~)