简介
当我们刚刚学完CSS就去做静态页面的时候会出现难以下手的情况，因为看到了效果图，但是不知道这些元素要怎么摆放才显得合理。如果摆放不合理，那么后面的代码将难以维护，对于页面的扩展性也大大减少。这篇文章主要讲讲基本的CSS布局，让大家在做静态页面的时候提供一些思路和灵感
左右布局
最常见的就是左右布局了，如在一个导航栏里放左边一个logo，右边放一些导航元素。
.parent {
margin: 300px auto;
width: 400px;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.left, .right {
height: 100px;
width: 100px;
}
.left {
float: left;
background: blue;
}
.right {
float: right;
background: red;
}
- 首先在父div里放两个div
- 在父div里的两个子div分别设置浮动，左边向左浮右边向右浮
- 最后在这个父div清除浮动即可，注意这步很重要，如果不做清除浮动的操作将会父元素高度为0，因为两个子div都脱离文档流了。
image.png
变形
当然，如果不想做清除浮动，可以在右子div向右浮就行了，而左边的子div有高度可以将父元素的高度撑开。但是因为左边的div是block，所以会占用一行，所以这里要将左右子div的顺序反转一下。
<div class="parent">
<div class="right"></div>
<div class="left"></div>
</div>
.parent {
margin: 300px auto;
width: 400px;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.left, .right {
height: 100px;
width: 100px;
}
.left {
/* float: left; */
background: blue;
}
.right {
float: right;
background: red;
}
左中右布局
左中右布局和左右局不同在于多了一个div，而这个div会影响一些bug。对于这个布局，我们很自然地想到左边向左浮，右边向右浮，所以现在代码是这样的。
<div class="parent">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
.parent {
margin: 300px auto;
width: 400px;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.left, .right, .middle {
height: 100px;
width: 100px;
}
.left {
float: left;
background: blue;
}
.right {
float: right;
background: red;
}
.middle {
background: yellow;
}
效果如下
image.png
布局全乱了，而且中间的黄色div也不见了。
解决方法
为什么黄色的div不见了呢？因为左边的div向左浮动了，脱离了文档流，它都不在文档流里了，就不会占parent的div的空间，你可以理解为提升起来了，所以黄色的div跟它重叠了。
现在就简单地将黄色的div水平居中吧，用 margin: 0 auto，现在的效果就变这样了。
image.png
还是不对，红色下去了。还记得刚刚的左右布局变形么，我们只要调换一下中间的div和右边的div就好了。
所以完整的代码如下
<div class="parent">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
.parent {
margin: 300px auto;
width: 400px;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.left, .right, .middle {
height: 100px;
width: 100px;
}
.left {
float: left;
background: blue;
}
.right {
float: right;
background: red;
}
.middle {
margin: 0 auto;
background: yellow;
}
水平居中
居中是前端开发的一个很烦的问题，我刚开始学的时候，总想着如果有一个属性 xxx: center | left | right 多好呀，什么都不用想。然后找了好久真的没有，居中还要分很多种情况来说，唉。这里就做一个简单的总结吧，网上的居中方法很多，但是常用的就几个。
内联元素居中
如果一个p元素，你想让里面的东西居中，很简单 text-align: center 就好了
<p>Hello world</p>
p {
text-align: center;
}
注意：这里的居中是指让p元素里面的东西居中。
块级元素居中
<div class="inner">Hello</div>
.inner {
margin: 0 auto;
width: 50%;
background: red;
}
注意：这里的居中是指让叫inner的div在父容器里居中。
万能大法
现在CSS3有一种布局叫flex布局，用这个布局基本上就是无脑地居中啦，很舒服。
- 先在父元素上display为flex
- 在父元素上设置justify-content为center，搞定！
<div class="outer">
<div class="inner">Hello</div>
</div>
.outer {
display: flex;
justify-content: center;
}
.inner {
width: 50%;
background: red;
}
垂直居中
垂直居中还是挺麻烦的，因为一般来说我们尽可能不去定死一个元素的高度，所以导致设置子元素的height: 50%是不行的，因为父元素不设置高度，就会去问子元素高度，而子元素又说我的高度依赖于你，搞得大家都不清楚自己高度该是怎么样的。这里就简单介绍三种垂直居中的方法吧。
line-height
如果都于简单的垂直居中，比如就垂直居中一行字，可以用行高加字体大小来完成。将行高设置成字体大小即可。
相当于说我房子高度是100，我自己身高也100，那我自己的中点就是整个房子的中点了嘛。
p {
font-size: 20px;
line-height: 20px;
}
定位大法
这里的定位大法也可以用于水平居中，一般在父元素设置相对定位，子元素设置绝对定位，然后再去调top,bottom, left, right 四个值就好了。
不过要注意的是，50%是指基线的50%，而不是中点的50%，所以一般来说还要用 transform: translate(-50%, -50%) 去完成，相当于说你超了，我把你再拉回来一点。
<div class="outer">
<div class="inner"></div>
</div>
.outer {
width: 100%;
height: 300px;
position: relative;
background: black;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
transform: translate(-50%, -50%);
background: red;
}
万能大法
这个flex真的好用，水平居中可以，垂直居中也可以，语法还简单，没错，就是这么舒服。
- 首先在父元素加flex
- 然后设置
align-items: center，搞定！
<div class="outer">
<div class="inner"></div>
</div>
.outer {
display: flex;
align-items: center;
width: 100%;
height: 300px;
background: black;
}
.inner {
height: 100px;
width: 100px;
background: red;
}
其他一些 Tips
画一个三角形
- 设置一个粗border
- 宽高都为0
- 再设置四个位置的border为不同颜色即可
div {
border: 10px solid red;
width: 0;
height: 0;
border-top-color: red;
border-right-color: blue;
border-left-color: yellow;
border-bottom-color: black;
}
脱离文档流
- 脱离文档流的元素会往内缩起来。
- 如果设置了宽度为100%，那么如果还有padding，那么会比原来父元素的宽度还要大，一般要用
box-sizing: border-box来解决这个问题。
清除浮动
将.clearfix加到浮动元素的parent元素上
.clearfix::after {
content: '';
display: block;
clear: both;
}
网友评论