浅谈CSS布局

2018-03-14

1.水平居中

水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍三种实现水平居中的方法:

注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素

a.使用inline-block 和 text-align实现
1
2
.parent{text-align: center;}
.child{display: inline-block;}

优点：兼容性好；
不足：需要同时设置子元素和父元素

b.使用margin:0 auto来实现
1
.child{width:200px;margin:0 auto;}

缺点: 需要指定宽度

c.使用绝对定位实现

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

/或者实用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度，但兼容性好/

2.两列定宽，一列自适应

asddsa

基本html结构为父容器为parent,自容器为left,center,right.其中，left,center定宽，right自适应

a.利用float+margin实现

1 2	.left,.center{float:left:width:200px;} .right{margin-left:400px;}

b.利用float+overflow实现
1
2
.left,.center{float:left:width:200px;}
.right{overflow:hidden;}

3.两侧定宽，中栏自适应

asddsa

a.利用float+margin实现

1
2
3

.left{width：100px;float:left;}
.center{float:left;width:100%;margin-right:-200px;}
.right{width:100px;float:right;}

b.利用table实现

.parent{width:100%;display:table;table-layout:fixed}
.left,.center,.right{display:table-cell;}
.left{width:100px;}
.right{width:100px;}

链接
来源：慕课网

4.inline和block 的区别

常见的块级元素有 div, form, table, p, h1-h6, dl, ol, ul 等。
常见的内联元素 有 span, a, strong, em, lable, input, select, textarea, img, br 等。

display:block
1.block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2.block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3.block元素可以设置margin和padding属性。

display:inline
1.inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2.inline元素设置width,height属性无效。
3.inline元素的margin和padding属性，水平方向的会产生边距效果；但竖直方向无效果

display:inline-block
将对象呈现为inline对象的内容作为block对象呈现。

5.postion

值	描述
absolute	生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位脱离文档流
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位脱离文档流
relative	生成相对定位的元素，相对于其正常位置进行定位。
static	默认值。没有定位，元素出现在正常的流中
inherit	规定应该从父元素继承 position 属性的值。

6.float

1.元素浮动后脱离了文档流，所以父元素是无法根据元素来自适应的。
关于float产生的影响以及解决方法，请查看此文档

2.浮动元素会被自动设置成块级元素，相当于给元素设置了display:block

3.多个浮动方向一致的元素使用流式排列