IFE 基础学院 第七天到第八天:布局(定位、对齐、flexbox、响应式)

2018/10/10 FrontEnd

学习目标:通过大量练习,来学习布局的各种方式。

[TOC]

学习 CSS 布局

第七天到第八天:学习布局

日期,今天的学习总用时,今天学习的目标是什么,是否达成

  • 2018.09.24 - 2018.10.10
  • 零碎的几段时间,大概十几个小时吧

学习内容

  • 定位
  • 对齐
  • Flexbox
  • 左侧固定,右侧自适应
  • 宽度自适应布局
  • 圣杯布局

学习笔记

定位

学习笔记:CSS 学习之 position 定位

居中对齐

CSS布局(六) 对齐方式

  • 水平居中
  • 垂直居中
  • 水平、垂直居中

主要分为行内元素和块状元素两种类型,另外元素的宽高是否确定也影响。

text-align: center; 是让子元素水平对齐,名字有点误导人,不仅用于文字,别的元素也可以。

vertical-align: middle 呢?感觉像是在父元素中垂直居中?

设置父容器的 font-size: 0 的作用:消除 div 之间的空格,以实现准确地应用计算出来的宽度。

Flexbox 弹性盒子

学习笔记:CSS 学习之 flexbox 入门

响应式布局

自适应布局

七种实现左侧固定,右侧自适应两栏布局的方法

实现左侧固定、右侧自适应两栏布局的思路:

  1. 利用 block 元素的宽度能随父容器调节的流动特性
  2. 利用 CSS 中的 calc() 方法来动态设定宽度
  3. 利用 CSS 中的新型布局 flex layoutgrid layout

flex 可以说是最好的方案了,代码少,使用简单。有朝一日,大家都改用现代浏览器,就可以使用了。

圣杯布局和双飞翼布局

学习笔记:CSS 学习之 三栏布局(圣杯布局、双飞翼布局)

回顾

请反复确认你是否掌握了以下概念:

  1. 5 种定位方式及使用场景
  2. 3 个定位例子
  3. 弹性盒子的概念及使用场景
  4. Position 相关概念及使用 Postion 进行布局的场景和方法
  5. Flexbox 相关概念及使用 Flexobx 进行布局的场景和方法
  6. 掌握常用的两栏、三栏布局的各种方式

其他

坑爹啊!calc() 函数用于动态计算长度值,需要注意的是,运算符前后 都需要保留一个空格,例如:``width: calc(100% - 10px);`

  1. calc 括号中的运算符前后都要有一个空格!
  2. calc 括号中的运算符前后都要有一个空格!
  3. calc 括号中的运算符前后都要有一个空格!

重要的事说三遍,太坑了!

CSS 框架

box-sizing 是个很新的属性,目前你还应该像我上面例子中那样使用 -webkit--moz-m 前缀。

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

使用这些带前缀的,是为了兼容老版本或者不同浏览器。

列表的子项 li 默认原来是 block 的,占一行;手动修改它为 inline-block 就可以让多行列表跑到一行了。

也有 button:

    <div>
      <button>Smile</button>
      <button>Laugh</button>
      <button>Wink</button>
      <button>Shrug</button>
      <button>Blush</button>
    </div>

问题

  • display:table-cell 的意思??
  • 宽度使用 calc 计算不管用的原因?
  • 绝对定位元素的盒模型特性??

下面的这个图片垂直居中实现的很奇怪,为什么设置行高,结合 vertical-align: middle 就能实现垂直居中了呢?不理解 - -。

		.center-img-parent {
			text-align: center;
			line-height: 140px;
			/*height: 140px;*/
			width: 400px;
			background: grey;
		}

		.center-img-child {
			width: 140px;
			height: 100px;
			vertical-align: middle;
		}

Search

    Table of Contents