本文共 2197 字，大约阅读时间需要 7 分钟。
居中
类型 | 方法 | 对应属性 | |
水平 垂直 水平&垂直 | 1.父元素使用外边距自动 2.子元素显示行内块级元素，写入内容，父元素设置文本居中 3.给父元素开启非绝对和固定定位作为子元素开启绝对定位的参考脱离文档流 3-1.设置相对偏移量50% 3-2.使用平移设置水平偏移量适当修改 3-3.此属性是当对于子元素位置平移，括号值正值向右平移，负值向左平移 | 水 平 | margin: 0 auto ; |
display: inline-block; text-align: center; | |||
position: relative; position: absolute; transform的translateX（） | |||
垂 直 | margin: 0 auto ; | ||
display: inline-block; vertical-align: middle; | |||
position: relative; position: absolute; transform的translateY（） | |||
水平 & 垂直 | margin: 0 auto ; | ||
display: inline-block; vertical-align: middle; text-align: center; | |||
position: relative; position: absolute; transform的translate（x，y） | |||
布局
1.两列布局：两个块级元素显示水平排列效果
定宽 —— 两列定宽 两个子元素浮动 父级设置高度避免塌陷
定宽 —— 一列定宽，一列自适应【根据定宽的列适应剩余所有空间】一起浮动
– 前面元素开启相对定位，后面元素设置左内边距向右移动，怪异盒子
– 相对定位优先级比浮动的优先级高
2.三列布局
定宽 —— 左边与中间定宽，右边自适应
定宽 —— 左右定宽，中间自适应
– 中间为页面主题内容利于被搜索引擎抓取靠前排
3.圣杯布局（3行3列）
header（1st row）
nav（1st col.） article（2nd col.） aside（3rd col.） { 2nd row }
footer（3rd row）
TODO 思路：1.创建header头 、div容器及其3个子元素div,语义化 - 用nav/article/aside分别替代三个子元素div
TODO 2.给父级设置class属性值随意，子级class属性分别设置为center，left，rightTODO * center为页面主体内容利于搜索引擎抓取，排列要靠前TODO * 设置样式 - 头、尾、父级及3个子级高度设置一样TODO * 父级宽度减去left与right的宽度TODO 3.header与footer设置宽高、背景色、外边框、外边距自动-居中TODO 4.left与right设置宽高、背景色 ； center设置宽100%自适应高与前面一致TODO 5.3个子元素一起左浮动TODO 6.容器内边距留白给左右TODO 7.left - 左外边距值为-100%（向左移动一行） ， 相对自己左移动100pxTODO 8.right - 左外边距距center-100px向左移动100px ， 浮动后排不下本应在center右边 ，相对自己右移动100px
4.双飞翼布局
思路：
TODO 思路：1.创建header头 、div容器及其3个子元素div,语义化 - 用nav/article/aside分别替代三个子元素divTODO 2.给父级设置class属性值随意，子级class属性分别设置为center，left，rightTODO * center为页面主体内容利于搜索引擎抓取，排列要靠前TODO * 设置样式 - 头、尾、父级及3个子级高度设置一样TODO * 父级宽度减去left与right的宽度TODO 3.header与footer设置宽高、背景色、外边框、外边距自动-居中TODO 4.left与right设置宽高、背景色 ； center设置宽100%自适应高与前面一致TODO 5.3个子元素一起左浮动TODO 6.left - 左外边距值为-100%（向左移动一行）TODO 7.right - 左外边距距center-100px向左移动100px ， 浮动后排不下本应在center右边TODO 8.容器的宽度改为800px***************************************************************************************TODO * 双飞翼优化了center两边被覆盖问题TODO 9 - 在center中再加一个子元素inner作为内容区，使center这个容器覆盖而内容区不被覆盖TODO 10 - 设置inner的内边距左右100px正确显示内容
转载地址：http://irkkz.baihongyu.com/