CSS布局与定位入门

声明：本文为转载
如何使用CSS做出：

1. 左右布局
2. 左中右布局
3. 水平居中
4. 垂直居中
5. 等其他小技巧

---

一、水平居中

1.margin: 0 auto

适用于块级元素

2.text-align: center

适用于内联元素,inline-block元素，文字，使用方法是为目标的父元素添加该样式。（可使用包裹器技巧）

3.调整padding,margin

如不方便直接调整，可以使用包裹器包住元素，然后让包裹器代为调整

二、垂直居中

1.line-height=height

大多数情况下管用

2.调整padding,margin

如果不方便直接调整，可以使用包裹器包住元素，然后让包裹器代为调整

三、左右布局

1.float+clearfix

块级元素（尤其是列表元素）固定套路

step1.float+clearfix将列表元素调为横向布局

step2.列表元素宽度设为50%

2.绝对定位

step1.用一个relative父元素包裹住所有元素

step2.子元素absoulte调整位置

四、左中右布局

1.float+margin

image

2.float+absolute

image

五、等其他小技巧

1.如何让内联元素产生位移：

内联元素margin与padding左右有效，上下无效，解决办法就是inline-block

image

实例：

image

2.包裹器wrapper的技巧

使用方式：在xx元素外面写一个div命名为xx-wrapper，将其包裹起来。

使用情形：

• 内联元素居中：包裹一个父元素，添加text-align样式
• 元素不好利用padding调整位置：包裹一个父元素，在父元素上添加padding

3.对块级元素设置inline-block会发生什么？

答：至少发生两件事

第一件事：块级元素宽度收缩

块级元素不写宽度的情况下，默认宽100%（毕竟占据一行）。

加入inline-block，宽度自动适合内容

第二件事： 块级元素下方会产生空隙

解决方法→vertical-align:top;

image

4.状态机

使用情形：需要可变地切换一个元素的状态时

实现方法：

css文件里写入三个状态类xxx-state1,xxx-state2,xxx-state3

script标签修改 作用对象.className="xxx-state?"

技巧：配合transition:all 0.2s可让状态切换不显突兀

5.box-sizing:border-box

作用：在计算宽度的时候，将border和padding算入其中，使我们写的宽度是加入border、padding后的宽度（不至于因它们撑破父元素，破坏左右布局）

使用情形：

image