CSS布局&居中&媒体查询(11)

饥人谷学习第11天

什么是布局

现有样式

• 文档流
• 浮动
• 定位
  不能满足人们的需求
  人们需要
• 导航栏+内容
• 导航栏+内容+广告栏
• 从上到下、从左到右、定宽、自适应...

---

• 单列布局
  一栏布局
  一栏布局（通栏）
  实现方式：定宽+水平居中
  注意：max-width和width的差别

• 双列布局
  一列固定宽度，另一列自适应
  实现方式：浮动+普通元素margin
  注意：浮动元素要写到前面先去渲染

• 三栏布局
  类似双栏布局

• 水平等距排列
  用到了浮动和负margin

• 圣杯布局

• 双飞翼布局

• 流式布局

• 弹性布局flex
  Flexbox为CSS提供了强大的弹性布局方式
  适合移动端场景

• grid布局

• 移动端布局
  设置meta
  适配 媒体查询 or 动态 rem

元素居中

水平居中

• text-align
  在父元素上设置 text-align: center 式文字/图片水平居中
• margin
  块级元素设置宽度，左margin和右margin设置为相同

垂直居中

• 绝对定位实现居中
  绝对定位之后设置 left: 50% 和 top: 50% 以及 margin-left: 负自身宽度的一半 和 margin-top: 负自身高度的一半
  前提：高度和宽度是固定的
  高度宽度不确定的前提下可以用 transform: translate(-50%, -50%)
• vertical-align实现居中

.box:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

然后给box里要垂直居中的文字/图片设置 vertical-align: middle;

• table-cell居中

.box{
  width: 300px; /* 宽度不加的话会自动收缩 */
  height: 200px;
  border: 1px solid ;
  display: table-cell; /* 不是块级元素 */
  vertical-align: middle;/* 对表格元素的居中特别明显 */
  text-align: center;
}

• display: flex

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

flex讲解：https://blog.csdn.net/linda_417/article/details/51507176

媒体查询

响应式布局以及响应式布局的引入

资料：http://book.jirengu.com/fe/%E5%89%8D%E7%AB%AF%E8%BF%9B%E9%98%B6/HTML5%E5%92%8CCSS3/media_query.html