CSS常用布局学习

最近开始学习CSS，了解了一些基础和常规写法。CSS的知识十分复杂，是值得不断发掘和完善的一个前端模块。对于新人来说，最好的方法就是尝试，去模仿，遇到问题再去深入，一点一点得增加对CSS的基础的理解。

CSS布局对于新人来说，是一个比较基础的难点，首先我们应该理解一些常用的布局属性

学习CSS布局 通过这以网站，学习'display'，'position' 以及 'float' 等属性，加深对其认识。

---

下面介绍几种常用的布局方法

1.左右布局

1.1.用 'float' 实现左右布局

'float' 实现左右布局

只要设定两个布局块的宽度总和为 'container'(容器) 的宽，那么俩个class的float属性可均为 'float:left;' 

也可以用以下方法让右边块级元素自适应左边达到左右布局

自适应左右布局

即给 'right' 的宽度加上 'margin-left'

1.2.用 'position' 实现左右布局

'position' 实现左右布局

父元素设置为position:relative;

left设置固定宽度，设定为绝对定位'position:absolute'。

right设置为相对定位'position:relative'。

right设置左边距，'margin-left' 为左侧栏的宽度。

2.左中右布局

2.1.用 'float' 实现左右布局

'float' 实现左右布局

其原理与 'float' 左右布局一样，且也可以用自适应。

值得注意的是 'middle' 所在块与 'left' 所在块一样，要用 'float:left;' 

而 'right' 所在块可以用 'float:left' 或 'float:right;' 以及自适应。

2.2.用 'position' 实现左中右布局

'position' 实现左中右布局

原理与前面类似，值得注意的是，我们要调整一下html的布局，保证 'right' 列div在 'middle' 列div前，不然会出现第三块换行显示的情况，此问题涉及文档流

文档流：文档内元素的流动方向：内联元素从左往右，宽度不够另起一行继续；块级元素，每一块占一行，从上到下依次往下

所以同理，2.1.中'middle' 若用自适应，也要调整html与上面一样

3.水平居中

其实前面已经用到了水平居中的方法

margin: 0 auto; 常用于块级元素

margin: 0 auto; 

当然还有其他水平居中及垂直居中的方法，网上有很多相关博客。如16种方法实现水平居中垂直居中

---

另外，如何实现将垂直元素变成水平，也可以用'float:left;'

方法如下：

1.给所有的子元素加 float:left

float：left

2.给父元素加 clearfix 类 （其目的是去掉float:left 产生的bug，一定会有bug，因此一定要加上）

bug

clearfix 类写法如下

clearfix 写法

---

通过上述知识，相信你对'display'，'position' 以及 'float' 等属性已经有所认识。后续学习过程中了解了 'flex'属性（其实学习CSS布局里提到了，有兴趣可以看MDN文档，但是看文档很多时候不能快速理解）推荐看看大佬们的博客，这里推荐阮一峰老师关于'flex'布局的博客，上述1，2种布局方式现已经不提倡，'flex'是个强大的属性，'flex'布局应作为布局的首选。

 

本文主要用于个人学习使用，如有侵权请联系我删除

 

主要参考：

学习CSS布局

CSS常见布局

DIV+CSS页面基本布局总结

16种方法实现水平居中垂直居中

 转自https://www.jianshu.com/p/59c9477816b8