Web页面的CSS布局 | 天一阁

Web页面的CSS布局

TL;DR div布局就是display+position。FlexBox布局其实会比div布局要方便一些。

CSS的一个重要作用是页面布局。布局就是界面元素的排布。我之前的经验对于界面布局,就是指定坐标,指定大小,这就可以了,但是那是桌面软件,手机软件的开发方式,在web页面上不行。主要是因为web页面默认是行模式,做个左右两列都费劲。另外就是web对应的屏幕尺寸千差万别,不同尺寸上展示效果就会变化。

所以,关于web页面布局,一直就是我难以理解的概念,做个多列布局,做个footer,做个导航条,这些都是让我无法理解。这次感觉好了一点,把一些重要的概念总算梳理了一遍,算是知道一点理论知识了。

盒模型

HTML的标签大部分是block模式,这类标签默认宽度是整个空间,高度是0,并且独占一行,下一个标签一定是另起一行。我学web开发的时候,还都是用表格做定位,那个年代页面全是表格,表格套表格。现在当然主流的布局方式都是div+css,但这种独占一行的模式真的是我的噩梦,让我怎么都不知道如何去做一个真实的页面。

div布局

css和html里面我觉得最大的问题就是他的命名问题,名字和含义不符。比如div标签,中文叫层,TMD,层是什么东西?还不如就叫模块,叫view,叫层,这个怎么理解呢?

所谓div标签,就是一个块,他符合盒模型。但是页面丰富多彩,经常会有多列信息排布的时候,于是就有了dispaly: inline-block 这个就是行内块,有了行内块就可以做多列布局了,最让我头疼的就是,比如ul li这个列表标签,怎么变成横向排布,真是难死我了,其实就是加个inline-block就搞定了。

除了行内块,有时候还需要根据坐标定位,于是又有了position 这个css属性,通过absolute、relative、fixed这三个值可以让任何一个块,展示在页面的任何位置。

display+position这两个属性,基本可以完成大部分页面布局的工作了,但是现在又出了新的布局方式叫flexbox,貌似更加方便一些,尤其是在垂直居中等问题上更加的方便了。

flex布局

通过display:flex就可以把一个标签变成flex容器,里面的块标签就变成了flex item,这些元素默认是通过行的方式排列。flex容器有两个坐标轴main axis和cross axis,通过justify-contentalign-items这两个属性让元素根据不同的轴,进行对齐。类似于word软件里面居左、居中的设置。

flex容器也能改变元素排列是row,还是column,还是对应的reverse,这些都是在改变main axis和cross axis的位置和方向。

flex item也有一些自身的属性比如order、align-self,flex-grow,flex-shrink等等。

页面开发其实也就是个手艺活儿,多练几个页面,肯定就能掌握了。