HTML和CSS基本布局,html和css简单的布局方式

在写网站时，一个好的布局会直接影响到这个网站的好坏。而很多人刚刚学前端的人对CSS的布局都有一定的困惑，实际上的应用场景中，会由于多种原因而造成布局种类多而难以选择。现在我就说说自己对CSS布局的理解，分析下了解各种布局的优劣，如果有那些地方总结的不好，欢迎大家指正。

而水平居中的布局方式就是非常常见的一种，这种布局方式常常用于页面的头部、内容区、页脚，作用就是控制盒子在整个页面水平居中。

1.使用外边距margin：(盒子宽度) auto来实现

优势：兼容性好 劣势：需要对盒子指定一个宽度才行

2..使用inline-block和text-align来实现

先将元素变成行内块级元素 display:inline-block;

在讲元素居中 text-align:center;

优势：兼容性好  劣势：需要设置父子两个元素

3.使用绝对定位absolute来实现

使用绝对定位使元素实现水平居中的效果。这种布局方法一般有两种情况，一种是子容器无宽度时，另一种是子容器有宽度。

无宽度的子容器可以用一下代码，如果是有宽度，则可以设置margin-left负值为容器宽度的一半。

先给父级设置position:relative

在对需要居中的元素设置, position:absolute; left:50%; transform:transleteX(-50%);

优势：无需给元素设置宽度就可以居中，可以在移动端使用

劣势：兼容性比较差，需要IE9和以上的浏览器才能给支持