CSS布局

介绍如何使用CSS做出：

一，左右布局（两栏均为自适应宽度）

1.代码如下：

2.给两个子元素添加float left，然后给它们的父元素添加clearfix类用于清除浮动。

二，左中右布局（中间宽度自适应，侧边两栏宽度固定）

1.代码如下

2.三个元素都设置向左浮动，设置main宽度为100%，再设置两个侧栏的宽度。

设置 负边距，child2设置 负左边距 为100%，child3设置 负左边距 为负的自身宽度。

三，水平居中

1.文本和链接就直接在块级父元素上加text-align: center;。

2.只有一个块级元素就需要设置宽度并设置左右外边距为auto，margin: 0 auto; 还需要width。

     多个块元素居中

1.就需要设置包裹多个块元素的父元素text-align: center; 然后设置其中每个块元素为display: inline-block;vertical-align: top;。

2.还可以设置包裹多个块元素的父元素display: flex; justify-content: center;。

3.如果是多个块元素垂直排列的话，就利用margin: 0 auto;。

四，垂直居中

单行的内联元素或者文本、链接就使用padding-top和padding-bottom 设置为同样的值。

或者使用line-height的值和height值设置为相同。

五，等其他小技巧

1.同时使用两个类一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：

同时给P元素两个类，中间用空格格开，这样所有e0和e1两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用.

2.新手在给页面布局的时候看不见div的位置或是范围，你可以先给这个div加个border：1px solid  #00ff的实心边框，能是你很好的解决问题。

3.对于width，height，border，margin，background的尺寸和颜色不好把握时，我们可以借助一些工具或者鼠标右键打开检查这一栏进行调试，还可以检查代码是否有误。