-
居中
|
类型 |
方法 |
对应属性 |
|
|
水平 垂直 水平&垂直 |
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; |
|||
|
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，right
TODO * 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%（向左移动一行） ， 相对自己左移动100px
TODO 8.right - 左外边距距center-100px向左移动100px ， 浮动后排不下本应在center右边 ，相对自己右移动100px
4.双飞翼布局
思路：
TODO 思路：1.创建header头 、div容器及其3个子元素div,语义化 - 用nav/article/aside分别替代三个子元素div
TODO 2.给父级设置class属性值随意，子级class属性分别设置为center，left，right
TODO * 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正确显示内容
