1）CSS区块介绍

HTML中所有标签，可以划分为：块级元素、非块级元素。

基本语法

display：none | block | inline | list-item | inline-block；

块级元素

1、默认，从新的一行开始
2、高度、宽度都是可控的
3、宽度没有设置时，默认为100%
常见块级元素：div、p、h、ul、ol、dl、table…

非块级元素

1、默认，不会从新的一行开始
2、高度、宽度以及内边距都是不可控的
3、宽高就是内容的高度，不可以改变
常见非块级元素：span、b、i、u、a…

功能

将元素显示为块级元素或内联元素。

2）弹性布局

基本语法

display: flex;

弹性布局flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

注：如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

功能

弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

弹性盒子由弹性容器和弹性子元素组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

3）响应式布局

基本语法

第一步：设置viewport
在head标签中添加

第二步：媒体查询
基本语法
@media mediatype and|not|only (media feature) {
CSS-Code;
}
媒体类型

not: not是用来排除掉某些特定的设备的。
only: 用来定某种特别的媒体类型。

功能

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。

示例

在可视窗口尺寸大于800 像素时修改背景颜色           
        @media screen and (min-width: 800px) {
            body {
                background-color: lightgreen;
            }
        }
        @media screen and (min-width: 800px)
        background-color: lightgreen;
        可视窗口尺寸大于800 像素时修改body的背景颜色为lightgreen