html和css简单的布局方式
2021-06-28 15:03
标签：选择 absolute lock 兼容 水平 使用 常见 代码 应用 在写网站时，一个好的布局会直接影响到这个网站的好坏。而很多人刚刚学前端的人对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和以上的浏览器才能给支持 html和css简单的布局方式 标签：选择 absolute lock 兼容 水平 使用 常见 代码 应用 原文地址：http://www.cnblogs.com/qiu822/p/7142746.html