常见CSS布局

2019-01-07 本文已影响0人 Grit0821

左右布局
左中右布局
水平居中
垂直居中

- 左右布局

左右布局.png

方法1：利用float实现左右布局

给所有子元素加 float: left
给父元素加 clearfix 类，清除浮动影响

html代码：

<body>
  <div class="wrap clearfix">
    <div class="left-box">
     左边
    </div>
    <div class="right-box">
     右边
    </div>
  </div>
</body>

CSS:

body{
  margin: 0;
}
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
.wrap{
  width: 1000px;
  margin: 50px auto 0;
}
.left-box{
  float: left;
  background: #ff9e2c;
  font-size: 30px;
  width: 50%;
  text-align: center;
  height: 300px;
  color: #fff;
  line-height: 300px;
}
.right-box{
  float: left;
  background: #b6701e;
  font-size: 30px;
  width: 50%;
  text-align: center;
  height: 300px;
  color: #fff;
  line-height: 300px;
}

方法2：使用绝对定位实现

子元素绝对定位 position:absolute;
父元素相对定位 position:relative;

html同上
CSS

body{
  margin: 0;
}
.wrap{
  position: relative;
  width: 1000px;
  margin: 50px auto 0;
}
.wrap div{
  position: absolute;
  font-size: 30px;
  width: 50%;
  text-align: center;
  height: 300px;
  color: #fff;
  line-height: 300px;
}
.left-box{ 
  top: 0;
  left: 0;
  background: #ff9e2c;
}
.right-box{
  top: 0;
  right:0;
  background: #b6701e;
}

方法3：使用表格样式

将父容器转换为表，给父容器设置display: table
通过display: table-cell，将子容器转换为表中的单元格

html同上
CSS

使用假表格
body{
  margin: 0;
}
.wrap{
  display: table;
  width: 1000px;
  margin: 50px auto 0;
}
.wrap div{
  display: table-cell;
  font-size: 30px;
  width: 50%;
  text-align: center;
  height: 300px;
  color: #fff;
  line-height: 300px;
}
.left-box{
  background: #ff9e2c;
}
.right-box{
  background: #b6701e;
}

方法4：使用inline-block

给父元素中的子元素添加display: inline-block;
需要将两个div靠在一起，具体请看下面的代码，因为如果不靠在一起的话，会产生一个空格间隔，导致布局发生改变

html同上
CSS

body{
  margin: 0;
}
.wrap{
  width: 1000px;
  margin: 50px auto 0;
}
.wrap div{
  display: inline-block;
  font-size: 30px;
  width: 50%;
  text-align: center;
  height: 300px;
  color: #fff;
  line-height: 300px;
}
.left-box{
  background: #ff9e2c;
}
.right-box{
  background: #b6701e;
}

方法5：使用Flexbox

Flexbox是一种非常棒的方式，只需注意它仅限于IE 10及以上版本，可能需要使用前缀和值来获得最佳支持

将父容器转换为一个灵活的盒子
子容器占用相同的空间份额。无需设置宽度或高度
为了确保它们是正确的，设置flex: 1;在两侧是一个很好的计划。

body{
    margin: 0;
}
.wrap{
    display: flex;
    width: 1000px;
    margin: 50px auto 0;
}
.wrap div{
    flex: 1;
    font-size: 30px;
    width: 50%;
    text-align: center;
    height: 300px;
    color: #fff;
    line-height: 300px;
}
.left-box{
    background: #ff9e2c;
}
.right-box{
    background: #b6701e;
}

方法6：使用网格布局grid

定义一个容器，然后将其拆分成可以用子元素灵活填充的列和单元格

body{
  margin: 0;
}
.wrap{
  display: grid;
  width: 1000px;
  margin: 50px auto 0;
}
.wrap div{
  font-size: 30px;
  text-align: center;
  height: 300px;
  color: #fff;
  line-height: 300px;
}
.left-box{
  grid-column: 1;
  background: #ff9e2c;
}
.right-box{
  grid-column: 2;
  background: #b6701e;
}

- 左中右布局

上面实现左右布局的方法都可以实现左中右布局，这里就挑3个比较实用的方法

左中右布局

方法一： float

html

<div class="wrap clearfix">
    <div class="left-box">左边</div>
    <div class="middle-box">中间</div>
    <div class="right-box">右边</div>
</div>

body{
  margin: 0;
}
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
.wrap{
  width: 1000px;
  margin: 50px auto 0;
}
.wrap div{
  float: left;
  height: 300px;
  font-size: 30px;
  text-align: center;
  color: #fff;
  line-height: 300px;
}
.left-box{
  width: 30%;
  background: #ff9e2c;
}
.middle-box{
  width: 36%;
  background: orange;
  margin: 0 2%;
}
.right-box{
  width: 30%;
  background: #b6701e;
}

方法二：使用Flexbox

body{
    margin: 0;
}
.wrap{
    display: flex;
    width: 1000px;
    margin: 50px auto 0;
}
.wrap div{
    height: 300px;
    font-size: 30px;
    text-align: center;
    color: #fff;
    line-height: 300px;
}
.left-box{
    width: 30%;
    background: #ff9e2c;
}
.middle-box{
    width: 36%;
    background: orange;
    margin: 0 2%;
}
.right-box{
    width: 30%;
    background: #b6701e;
}

方法三：使用网格布局

body{
    margin: 0;
}
.wrap{
    display: grid;
    width: 1000px;
    margin: 50px auto 0;
}
.wrap div{
    height: 300px;
    font-size: 30px;
    text-align: center;
    color: #fff;
    line-height: 300px;
}
.left-box{
    grid-column: 1;
    background: #ff9e2c;
}
.middle-box{
    grid-column: 2;
    background: orange;
    margin: 0 15px;
}
.right-box{
    grid-column: 3;
    background: #b6701e;
}

- 水平居中

1. 内联元素水平居中

在块级父元素内水平居中内联元素

.center-children {
  text-align: center;
}

2. 块级元素水平居中

margin设置左右auto

.center-me {
  margin: 0 auto;
}

3. 多个块级元素水平居中

方法一：使用inline-block,给元素设置display: inline-block;,设置父级元素的属性width: 100%; text-align: center;
方法二：使用flexbox,给父级元素设置display: flex; justify-content: center;

-垂直居中

1.inline 或 inline-* 元素单行垂直居中

方法一: 上下使用相同的padding(推荐)
上下和左右使用相同的padding可以不用设置宽高,既可以在修改文本内容是自适应,又可以减少出现BUG的几率

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

方法二:设置line-height与高度相同

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
/*nowrap文本内的换行无效内容只能在一行显示*/
}

2. 多行文本垂直居中

方法一：方法一:display: table;和vertical-align: middle;

.center-table {
  display: table;
}
.center-table p {
  display: table-cell;
  vertical-align: middle;
}

方法二：使用flex布局多行文本居中

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

3. block元素垂直居中

已知block元素高度
原理是绝对定位,top: 50%;然后 margin-top设置为负边距且值为他本身高度的一半.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

block元素高度未知垂直居中
借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

使用flex布局block元素高度未知垂直居中

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

常见CSS布局

- 左右布局

方法1：利用float实现左右布局

方法2：使用绝对定位实现

方法3：使用表格样式

方法4：使用inline-block

方法5：使用Flexbox

方法6：使用网格布局grid

- 左中右布局

方法一： float

方法二：使用Flexbox

方法三：使用网格布局

- 水平居中

1. 内联元素水平居中

2. 块级元素水平居中

3. 多个块级元素水平居中

-垂直居中

1.inline 或 inline-* 元素单行垂直居中

2. 多行文本垂直居中

3. block元素垂直居中

猜你喜欢

热点阅读