Question

'display', 'position', and 'float'三者对布局的影响

The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows: If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box. Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block. Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below. Otherwise, if the element is the root element, 'display' is set according to the table below, except that it is undefined in CSS 2.1 whether a specified value of 'list-item' becomes a computed value of 'block' or 'list-item'. Otherwise, the remaining 'display' property values apply as specified.

一张图:

常见布局

固定尺寸

布局可以从固定尺寸先了解，先构思好页面的主要结构，做动画的元素一般需要绝对定位，方便操作移动。

自适应布局

响应式的布局的结构其实就是多个固定尺寸的组合，元素的宽度，字体的大小一般会以半分比的形式设置。通过媒体查询进行不同分辨率下的布局。

布局方式

居中设置

关于居中，要学会设置水平居中和垂直居中。参考文章:如何只用CSS做到完全居中。

参考资料

• 学习CSS布局
• CSS 布局:40个教程、技巧、例子和最佳实践
• 详解css3弹性盒模型（Flexbox）
• CSS Grid布局：什么是网格布局
• W3c: Relationships between 'display', 'position', and 'float'