CSS的布局方式 | 天一阁

CSS的布局方式

CSS不只是字体,颜色的功能,还有一个重要的功能就是页面布局

盒模型,就是基础元素都是一个box的形式存在并且要占一整行。每个Box有margin,border,padding,content,通过组合盒子让网页内容丰富起来。

为了能够在一行上显示两个或多个box,就需要各种css的布局方式,第一种就是float。

float: 将box从文档流中取出, 浮动到页面的一侧,后续如果有和他要在一行的,就继续float,下一行的元素需要使用clear,来重启一行。bootstrap的col- 系列是用了float属性,来实现多列布局的。

CSS还支持position来布局,主要的方式就是relative, absolute, fixed

relative : 根据上层节点相对定位,并不改变原结构

absolute: 根据上一个relative或absolute的节点定位

fixed:相对于浏览器窗口定位,固定顶部导航条都是这样的实现

现在还有一种更加方便的flex方式,将容器类的盒子加入display: flex样式,这就变成一个flex的容器,这样可以进行分行,分列的布局了,计划用这种方式实现我的小网站

Web前端这部分我始终达不到融通的感觉,主要是觉得规则特别多,实现方式多变,框架特别多,内容太多都记不住,还没等记住呢,就又出新的了。没办法,只好能学多少学多少,用多少学多少,保持对新事物的敏感和好奇,总能有柳暗花明的一天