阅读 55

CSS布局小记

左右布局

多个元素的左右布局

1、 利用浮动

给所有需要左右布局的子元素加上属性:float: left

注意:浮动的元素的父元素要加上clearfix类清除浮动。

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
复制代码

2、使用绝对定位

子元素:position:absolute,使用left属性调整位置,

父元素:position:relative

3、使用flex布局

居中布局

行内元素的居中

水平居中:父元素:text-align: center

垂直居中:父元素:dispaly: table-cell; vertical-align: middle;

单个块级元素的居中

对于块级元素,要考虑父、子元素 高度、宽度 是否确定的情况。

父元素宽度、高度不确定

水平居中:父元素宽度不设定时,会填满父元素的父元素的宽度,所以可以看作确定。

  • 如果子元素宽度确定,就设置子元素 左右 margin: auto
  • 如果子元素宽度不确定,就设置子元素 左右margin: 相同的值
  • 其他方法参见下面父元素宽度确定的情况。

垂直居中:设置父元素的上下padding为相同的值,子元素自然就居中了。 (平时写样式时也推荐这种方法,不要设置父元素高度,方便且不容易出问题。)

父元素宽度、高度确定

1、绝对定位 + 负位移

这个方法水平、垂直居中都适用。

  • 首先将子元素绝对定位,top、left都设置为父元素宽度的一半: top: -50%

    这个时候子元素的左上角顶点已经位于父元素的中心位置,只需要子元素向上、向左移动自身宽度高度的一半即可。

  • 然后设置子元素:transform: translate(-50%, -50%)

  • 如果确定子元素的宽度、高度,还可以使用margin属性。(因为margin百分比值是相对于父元素的,所以不能使用百分比)

    • 如 子元素宽高为40px:margin-left:-20px;margin-top:-20px
.fa {
  position: relative; 
  width: 100px; 
  height: 100px; 
}
.son {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 确定宽高可以使用margin
.son {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px; 
  height: 40px;
  margin-left: -20px; 
  margin-top: -20px;
}

复制代码

2、左右 margin:auto

子元素: margin: auto;

这个方法只适用于 确定宽度 子元素 水平 居中。
当元素宽度没设定时会填满父元素宽度,垂直居中不起效。

3、左右 margin:相同的值

给子元素的左右margin设置相同的值。

适用于 不确定宽度 子元素 水平 居中,同时会影响子元素本身宽度。

4、margin:auto + 绝对定位 0

子元素:

.son {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
复制代码

适用于 确定宽度、高度 的元素的 垂直、水平 居中。
当元素宽度没设定时会填满父元素宽度,高度没设定时垂直居中不起效。

多个块级元素居中

1、把块级元素变成行内元素:

.fa {
  text-align: center; // 水平居中
  display: table-cell; // 垂直居中
  vertical-align: middle; // 垂直居中
}
.son {
  display: inline-block; // 把所有子元素都变成行内元素
}
复制代码

这种方法对于单个子元素也适用。

2、使用flex布局。

.fa {
  display: flex;
  justify-content: center;
  align-items: center;
}
复制代码

另外 flex布局 对于其他情况都是可以的。

文章分类
前端
文章标签