CSS常用布局学习

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


给所有li加上float:left

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


bug

clearfix 类写法如下


clearfix 写法

通过上述知识,相信你对'display''position' 以及 'float' 等属性已经有所认识。感谢评论区指导,去看了下'flex'属性(其实学习CSS布局里提到了,有兴趣可以看MDN文档,但是看文档很多时候不能快速理解)推荐看看大佬们的博客,这里推荐阮一峰老师关于'flex'布局博客,上述1,2种布局方式现已经不提倡,'flex'是个强大的属性,大家可以看看。



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


主要参考:

学习CSS布局zh.learnlayout.com
CSS常见布局 | 前端工程师手册leohxj.gitbooks.io图标Flex 布局教程:语法篇 - 阮一峰的网络日志www.ruanyifeng.com图标DIV+CSS页面基本布局总结www.jianshu.com图标16种方法实现水平居中垂直居中louiszhai.github.io图标

编辑于 2018-09-09

文章被以下专栏收录