css布局

2018-03-22 161 阅读2分钟

css布局

左右布局
1. 使用float布局
- 效果图
- 如果给元素添加border并且边框有宽度，从而导致两个元素的宽度加起来大于父元素的宽度，会导致元素换行。例如
使用绝对定位布局
- 效果图
flexbox布局
- 效果图

三栏布局
1. float布局
- 效果图
1. 绝对定位布局
- 效果图
flexbox布局

水平居中与垂直居中
1. 行内元素居中
- 要实现行内元素（<span>、<a>等）的水平居中，只需把行内元素包裹在块级父层元素（<div>、<li>、<p>等）中，并且在父层元素CSS设置如下：
- 效果图
1. 块状元素的水平居中
- 要实现块状元素（display:block）的水平居中，我们只需要将它的左右外边距margin-left和margin-right设置为auto，即可实现块状元素的居中，要水平居中的块状元素CSS设置如下：
1. 多个块状元素的水平居中
- 要实现多个水平排列的块状元素的水平居中，传统的方法是将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中一样的效果。
使用flexbox实现多个块状元素的水平居中
1. Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。
2. flexbox由伸缩容器和伸缩项目组成。通过设置元素的display属性为flex或者inline-flex可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。而每一个被设置为flex的容器，它的内部元素都将变成一个flex项目，即是一个伸缩项目。简单的说，flex 定义了伸缩容器内伸缩项目该如何布局。
已知高度宽度元素的水平垂直居中
1. 绝对定位与负边距实现
1. 绝对定位与margin
未知高度和宽度元素的水平垂直居中
利用Css3的transform，可以在未知元素的高宽的情况下实现元素的垂直居中。