摘要：
栅格(grid)是一种自适应布局，能根据不同终端自动伸缩容器的宽高。flex根据轴线(axis)布局，看起来像是一维布局；而grid针对网格线(grid line)布局，看起来更像是二维布局。 跟flex一样，grid由栅格容器(grid container)和栅格项目(grid item)组成。 阅读全文
摘要：
Flex(弹性布局)，是一种响应式布局，能自动伸缩盒模型达到自适应的效果。 弹性布局由弹性容器(flex container)和弹性项目(flex item)组成。 在弹性容器中，水平方向称为主轴(main axis)(起点main start,终点main end)；垂直方向称为纵轴(cross 阅读全文
摘要：
布局(layout),指各个元素在网页里如何摆放以形成最终的页面,默认布局是从左到右、从上到下。改变元素的默认布局方式有很多种，浮动(float)就是其中一种。 1. 浮动(float) 浮动类似于word里面文字围绕图片的效果，可设置为向左(left)或向右(right)浮动。 // 元素默认没有 阅读全文
摘要：
定位布局(Position)指元素可以脱离原来的位置，定位到页面中的任意位置。 定位布局以内边距(padding)区域的左上角为定位原点，分为相对定位(包括static及relative)和绝对定位(包括absolute及fixed)。 1. 静态定位(static) 静态定位是默认的文档布局方式， 阅读全文
摘要：
元素有行内元素(inline)、块级元素(block)以及行内块元素(inline-block)之分，对应地它们之间的盒模型也会有不同。 1. 行内元素(inline) 通过display: inline可将元素声明为行内元素，顾名思义指在行里面的元素，因此没有换行的行为。 1.1 宽度和高度 行内 阅读全文
摘要：
每个HTML标签都会生成一个盒模型，盒模型是正常流布局非常重要的概念。盒模型由内边距(padding)+长度(width)+高度(height)+边框(border)+外边距(margin)组成。 1. 宽度(width)和高度(height) 盒模型有2种类型，怪异盒模型和标准盒模型，在不同盒模型 阅读全文