CSS布局

CSS布局

盒模型

当浏览器展示一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。

• Margin（外边距）：清除边框外的区域，外边距是透明的。
• Border（边框）：围绕在内边距和内容外的边框。
• Padding（内边距）：清除内容周围的区域，内边距是透明的
• Content（内容）：盒子的内容，显示文本和图像。

浮动

div{ float: left; }

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。浮动的元素在普通文档流的上面一层，更靠近屏幕的上层。

定位

CSS的三种基本的定位机制：普通流、浮动和定位。

• static静态定位：HTML元素的默认值，即没有定位，元素出现在正常的流中。
• fixed固定定位：脱离标准流，在页面中不占位置，永远相对于浏览器的边框来定位。
• relative相对定位：不脱离标准流，在页面中占位置，相对于自己原来的位置来进行定位。
• absolute绝对定位：脱离标准流，在页面中不占位置（浮起来），绝对于已经定位的上层元素，若没有则绝对于页面主体 body。