CSS布局 与 元素居中

什么是布局

现有样式的布局，不能满足需求

• 文档流
• 浮动
• 定位

现实需要的布局：

• 导航栏+内容
• 导航栏+内容+广告栏
• 从上到下、从左到右、定宽、自适应
  
  

单列布局

单列布局

实现方式： 定宽 + 水平居中

width: 1000px; //或 max-width: 1000px;
margin-left: auto;
margin-right: auto;

注意 max-width和width的区别
max-width屏幕变窄的时候没有拉动条，width在屏幕变窄的时候下方会出现拉动条
范例 和 code

  
头部
  
内容
  
尾部

也可有如下写法，省标签，便于控制局部 范例

头部
内容
尾部

以下是针对通栏的场景，给通栏加背景色 范例

  
头部

内容

  
尾部

查看范例效果，能发现不完美的地方吗? 对了，滚动条 bug

下面我们进行优化，给 body 设置min-width 去掉滚动背景色 bug
范例

  
头部

内容

  
尾部

双列布局

一列固定宽度，另外一列自适应宽度

双列布局

如何实现

浮动元素 + 普通元素margin 范例

  
  

    
aside
    
main
  
  
footer

如果侧边栏在右边呢？

侧边栏在右

谨记页面元素的渲染顺序 范例

  

  

    
aside
    
main
  
  
footer

三列布局

两侧两列固定宽度，中间列自适应宽度

三列布局

如何实现

范例

    
  

    
    
aside
    
aside
    
main
  
  
footer

其它布局(了解)

• 水平等距排列

范例
demo 范例
以上两个情况都是需要使用到负margin的情况，仔细分析一下为什么需要使用负margin

  

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
  

• 圣杯布局
• 双飞翼布局

• 流式布局

• 弹性布局flex
  范例

• grid
  grid相关文章

移动端布局

设置 meta ，如

适配

媒体查询 or 动态 rem

轮播图防抖动

该样式主要是防止网速过慢时页面布局的抖动。其含义是，box 宽度 100%，高度由宽度的 30% 自动撑开。

.box {
  width: 100%;
  height: 0;
  padding-bottom: 30%;
  overflow: hidden;
}

JSbin

元素居中

水平居中

text-align

在父元素上设置 text-align: center 使文字/图片水平居中。

.container {
  text-align: center;
}

margin

.container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

垂直居中

居中vs不居中

代码

.container {
  padding: 40px 0;
  text-align: center;
}

绝对定位实现居中（包含定宽高和不定宽高的块的居中）

特别注意代码里面的注释
代码

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
}

需要父元素设置过position: relative相对定位

vertical-align实现居中

特别注意代码里面的注释

代码

table-cell实现居中

特别注意代码里面的注释

代码

.container {
  width: 300px;
  height: 200px;
  border: 1px solid ;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}


/* 直接通过display: table-cell；
      vertical-align: middle;进行居中设置
但这个div必须有width和height */

同样是父级实现子元素水平居中

display: flex

用display: flex实现多图在div中居中排列
代码

.space {
  width: 100vw;
  height: 100vh;  /* 设置宽高以显示居中效果 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
}

body {
  margin: 0;
  background: rgba(0, 0, 0, .95);
}

.earth::after {
  content: '';
  font-size: 85px;
}

https://codepen.io/twhy/pen/xrrbGg

line-height

代码