[DIV/CSS] CSS页面布局笔记

居中布局 水平居中

父元素和子元素的宽度都未知

inline-block + text-ailgn

1. .child{display:inline-block;}
2. .parent{text-align:center;}

复制代码

优点：兼容性好 
缺点：子元素文本继承了text-align属性，子元素要额外加text-align:left;

---

table + margin

1. .child{display:table; margin:0 auto;}http://www.kmrlyy.com/gjjb/33480.html

复制代码

优点：只需要设置子元素的样式

---

absolute + transform

1. .parent{position:relative;}
2. .child{position:absolute; left:50%; transform: translateX(-50%);

复制代码

优点：居中子元素不会对其他元素产生影响
缺点：transform是CSS3的属性，存在兼容性问题

---

flex + justify-content

1. .parent{display:flex; justify-content:center;}http://www.kmrlyy.com/yindaoyan/33481.html

复制代码

优点：只需要设置父元素的样式
缺点：兼容性问题

---

flex + margin

1. .parent{display:flex;}
2. .child{margin:0 auto;}http://www.kmrlyy.com/gongwaiyun/33482.html

复制代码

垂直居中

父容器和子容器的高度都未知

table-cell + vertical-align

1. .parent{display:table-cell; vertical-align:middle;}

复制代码

优点：兼容性好

---

absolute + transform

1. .parent{position:relative;}http://www.kmrlyy.com/gongjingmilan/33483.html
2. .child{position:absolute; top:50%; transform:translateY(-50%);}

复制代码

优点：子元素不会干扰其他元素
缺点：兼容性

---

flex + align-item

1. .parent{display:flex; align-items:center;}

复制代码

优点：只需要设置父元素
缺点：兼容性问题

水平垂直居中

父容器和子容器的高度都未知

inline-block + text-align + table-cell + vertical-align

1. .parent{text-align:center; display:table-cell; vertical-align:middle;}
2. .child{display: inline-block;}

复制代码

---

absolute + transform

1. .parent{position:relative;}http://www.kmrlyy.com/gongjingyan/33484.html
2. .child{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

复制代码

---

flex + justify-content + align-item

1. .parent{display:flex; justify-content:center; align-items:center;}

复制代码

---

多列布局 定宽-自适应 float+margin

1. .left{float:left; width:100px;}
2. .right{margin-left:120px;}

复制代码

float+margin+fix

1. <div class="left"></div>
2. <div class="right-fix">
3. <div class="right"></div>
4. </div>www.kmrlyy.com

复制代码

外层在包裹一个容器

1. .left{float:left; width:100px; position: relative;}
2. .right-fix{float:right; width:100%; margin-left:-100px;}
3. .right{margin-left:120px;}

复制代码

兼容性很好，但是多了层right-fix的结构

float+overflow

1. .left{float:left; width:100px; margin-right: 20px;}
2. .right{overflow:hidden;

复制代码

---

table

1. .parent{display:table; width:100%; table-layout:fixed;}
2. .left,.right{display:table-cell;}
3. .left{width:100px; padding-right:20px;}

复制代码

---

flex

1. .parent{display:flex;}
2. .left{width:100px; margin-right:20px;}
3. .right{flex:1;}

复制代码

---

不定宽-自适应 float + overflow

1. .left{float:left; margin-right:20px;}
2. .right{overflow:hidden;}

复制代码

table

1. .parent{display:table; width:100%;}
2. .left,.right{display:table-cell;}
3. .left{width:0.1%; padding-right:20px;}

复制代码

flex

1. .parent{display:flex;}
2. .left{margin-right:20px;}
3. .right{flex:1;}