网页布局基础（1）－自动居中一列布局

基础知识

W3C标准：结构化标准语言（HTML / XML）

                 表现标准语言（CSS）

                 行为标准语言（DOM / ECMAScript）

倡导：结构、样式、行为分离。

1、CSS定位机制

1. 标准文档流（Normal flow）

        从上到下、从左到右，输出文档内容；由块级元素和行级元素组成。

2. 浮动（Float）

        可以实现多列布局；经过设置float属性设置。​

3. 绝对定位（Absolute positioning）

2、块级元素 / 行级元素

1. 块级元素:

          从左到右撑满页面，独占一行；

          触碰到页面边缘时自动换行。

          Eg:div、ul、li、dl、dt、p...​

2.行级元素

          能在同一行内显示；

          不会改变HTML文档结构。

          Eg:span、stong、input、img...(大部分表单标签)​

3、盒子模型



盒子模型尺寸=边框+外边距+内边距+盒子中内容尺寸​​​​