饥人谷作业 -- css布局及其技巧

1.左右布局

实际项目开发过程中遇到页面 DIV 左右布局的需求：左侧 DIV 固定宽度，右侧 DIV 自适应宽度，填充满剩余页面，（然后本人充当抄袭的急先锋，拾人牙慧了）

首先提供传统的方案： 左侧 DIV （可以加个div来clearfix）设置 float 属性为 left，右侧 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度,如图：

第二可以试试左侧 DIV 设置 float 属性为 left，负边距 100%，右侧 DIV 中嵌套一个 DIV，页面内容放入嵌套的 DIV 中，右侧内嵌 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度，废话不说，上图：

2.左中右布局(传说中的圣杯布局)

1.float+margin,上图：

以下效果都如这个图，就不多逼逼了

不过这种方法布置right和left得要放前面，切记

2. float+absolute：

切记，此法一定要加top,bottom,right,left,不然就看不见

3.flex来写（这个老夫也在学习中，不太理解）：

3.水平居中：

1、行内元素

设置  text-align:center

2、定宽块状元素

设置  左右  margin  值为  auto

3、不定宽块状元素

a:在元素外加入  table  标签（完整的，包括  table、tbody、tr、td），该元素写在  td  内，然后设置  margin  的值为  auto

b:给该元素设置  displa:inine  方法

c:子元素设置  position:relative  和  left:50%

另外还有flex布局，不过我也在学，先不说了

4.垂直居中:

1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行：

parentElement{

    position:relative;

}

childElement{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

}

2.若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可

parentElement{

    height:xxx;

}

.childElement{

    position:relative;

    top:50%;

    transform:translateY(-50%);

}

3.最后是flex大招：

parentElement{

    display:flex;/*Flex布局*/

    display:-webkit-flex;/* Safari */

    align-items:center;/*指定垂直居中*/

}

5.其他小技巧

clearfix清除浮动的影响：记住如下代码，一招搞定元素的浮动带来的高度塌陷

1.找他父元素，如果父元素是body，那么加一个div嵌套

2.父元素加上属性clearfix

3.在css样式开头写下如下代码：

.clearfix{

    content:"";

    display:block;

    clear:both;

}

这是目前为止我知道最好的无副作用的解决高度塌陷的方法

display:inline-block带来的宽度增加

就加一句话： vertical-align: top;反正看见inline-block就加好了