2019-04-04

关于如何使用css布局

 左右布局

在页面开发过程中要对页面进行左右布局排版，如何使用css的相关知识来做到呢？

以实际代码编辑为例

我们需要网页中的某一块内容是以左右布局方式呈现的

1.新建一个`div`在其内部在创建两个`div`标签表示为页面的左右两部分

2.给两个`div`写入一些`css`样式，使其呈现出效果来

3.可以看到由于两个`div`标签是属于块级元素，在文档流中独占一行，不能并列一行显示。

4.所以可以使用`css`中的浮动属性`float`来改变其正常文档流，使其左浮动，并列为一行，达到我们想要的效果。

5.浮动后的效果

 左中右布局

左中右布局和左右布局其实是一样的.都可以使用`css`中的`float`属性来达到效果，如下图：

以实际代码为例

1.创建三个`div`分别为左中右三块

2.给其写入一些css样式

可以给中间的`middle`的宽度设置为100%，使其能够页面自适应

3.效果如下：

4.然后给三个`div`分别加入`float:left`使其左浮动，并列为一行显示

5.浮动后效果如下：

 水平居中

在页面开发中，我们遇到需要将页面中的部分内容进行水平居中展示；

以实际代码为例

1.创建三个块级元素`div`，使其为内包含的结构

2.加入`css`样式

3.得到如下效果

4.现在需要将它们设置为水平居中的显示状态，我们可以通过设置他们的`margin`外边距属性来达到效果；

  我们将每一个`div`的外边距设为`{margin:0 auto} `

  `0`表示为上下外边距离为0

  `auto`表示左右外边距离为自适应，相等，也就是居中的意思

5.然后会发现效果如下：

每一个块级元素，都相对应自己的左右距离是相等的，实现了水平居中的效果

 垂直居中

在`css`中除了能设置内外边距来调整结构布局，还能通过`position`定位属性来实现整个页面中的元素位置移动布局：

如下图，将绿色元素水平垂直于红色背景下；

1创建`div`结构

2.写入`css`样式，将背景设置为宽1000px 高为500px;

里面的`middle`设置为宽200px 高100px;

3.效果如下

4.设置`position`定位属性，

“父相子绝”  父级元素加上相对定位，子元素加上绝对定位

首先给父级元素加上相对定位属性`{position:relative;}`

然后给`middle`设置绝对定位属性`{  position: absolute;}`

`top:200px`意为`middle`元素距离父级元素`div`的上部距离为`200px`

`left:400px`意为`middle`元素距离父级元素`div`的左边距离为`400px`

5.得到效果如下

 清除浮动副作用

在页面布局中给元素使用`float`浮动属性后，会导致元素脱离正常的文档流，影响结构的高度

例如；

1.创建三个块级元素，写入css样式 ,得到如下效果

2.给`middle`元素加上`float`浮动属性，使其左浮动,

发现父级元素的高度收到了影响

3.使用`clearfix`清除浮动的副作用

给父级元素`mian`加上`clearfix`

给`clearfix`写入css样式

发现效果如下：

父元素的高度回复正常了