!
也想出现在这里? 联系我们
广告位
当前位置:首页>技术分享>编程技术>CSS 常见布局方式学习及总结

CSS 常见布局方式学习及总结

对于很多前端er 来说,CSS 布局应该是日常工作中碰到最多的东西之一。一个好的布局不仅可以减少代码的书写量,而且有助于我们理解页面结构,更好地实现多种页面效果。而一般情况下我们对页面布局最常用到的当属float、display、position 这三个属性了,本文将对这三个属性做简单的说明并给出几种常见的布局方式。

CSS 常见布局方式学习及总结

float、display、position 基本知识点

float——控制元素浮动

  • none :元素不浮动;
  • left :元素左浮动;
  • right :元素右浮动。

display——控制元素生成的框的类型

  • none :元素不显示;
  • inline :内联显示;
  • inline-block :行内块元素;
  • block :块元素;
  • flex :弹性盒子,响应式地实现页面布局,-webkit-flex;inline-flex。

position——控制元素定位方式

  • static :默认值,没有定位。
  • relative :相对定位,相对其正常位置定位;
  • absolute :绝对定位,相对于其第一个非 static 定位的父元素;
  • fixed :绝对定位,相对于可视窗口定位。

常规布局方式

要理解页面常规布局,首先我们要知道:

  • 所有的 HTML 元素默认都是不浮动的;
  • 所有的 HTML 元素默认分为内联元素和块元素;
  • 所有的 HTML 元素默认定位方式是跟随文档流的。

CSS 常见布局方式学习及总结

如上图所示,一般情况下我们会选择使用块元素 (display: block;) 固定好布局的大体框架,灰色部分,然后在其内添加内联元素 (display: inline;),绿色部分 ,由于内联元素无法控制宽高等属性,对于一些特殊的需求可能需要将其转换为行内块元素 (display: inline-block;) 进行操作,橘色部分。对于需要左右排列的,我们一般会使用 float 属性控制其左右浮动。一般我们不会修改元素的 position 属性,而对于一些特殊要求,比如侧栏固定,底部广告条,蓝色部分。可能需要修改 position 为 fixed 或其他值使其相对于其定位参照偏移一定位置进行定位。

特殊布局方式

常规的布局方式可以应付大部分的日常工作,对于一些稍微学习过前端的同学应该问题不大,而且常规的布局方式一般固定页面大小,无法做到有效自适应。针对于此,这里主要介绍几种特殊的布局方式。

Flex 弹性布局

flex 布局是一种弹性布局,每一个 Flex 容器默认存在两根轴:水平的主轴和垂直的交叉轴。其内部元素根据这两条轴进行排列,使用 Flex 布局除了要设置 display: flex; 或者 display: inline-flex; 将其转换为 Flex 布局外,还需要注意一下几个属性:

父容器属性
  • flex-direction:控制主轴(元素排列)方向,row (→)| row-reverse (←)| column (↓)| column-reverse (↑) ;
  • flex-wrap:控制元素是否换行,nowrap (不换行)| wrap (换行)| wrap-reverse (首行在下) ;
  • flex-flow:flex-direction 和 flex-wrap 的简写形式,默认 row nowrap ;
  • justify-content:控制项目在主轴上的对齐方式,flex-start (起点对齐)| flex-end (终点对齐)| center (居中对齐)| space-between (两端对齐,项目间隔)| space-around(两端对齐,四周间隔) ;
  • align-items:控制交叉轴上的对齐方式,flex-start (起点对齐)| flex-end (终点对齐)| center (居中对齐)| baseline (基线对齐)| stretch(占满容器) ;
  • align-content:控制多根轴线的对齐方式,flex-start (起点对齐)| flex-end (终点对齐)| center (居中对齐)| space-between (两端对齐,项目间隔)| space-around(两端对齐,四周间隔)| stretch(占满容器) ;
子项目属性
  • order:控制项目的排列顺序,整数;
  • flex-grow:控制项目的放大比例,设置比例可控制不同项目空间占比;
  • flex-shrink:控制项目的缩小比例,设置比例可控制不同项目空间占比;
  • flex-basis:控制分配多余空间之前,项目占据的主轴空间;
  • flex:flex-grow, flex-shrink 和 flex-basis的简写;
  • align-self:控制当前项目有与其他项目不一样的对齐方式;
实例-自适应均匀排布

demo地址:https://demo.zibuyu.life/frontend/html-css-js/css-layout/css-flex-layout.html

实例-圣杯布局

demo地址:https://demo.zibuyu.life/frontend/html-css-js/css-layout/css-flex-layout-2.html

实例-水平等高瀑布流布局

demo地址:https://demo.zibuyu.life/frontend/html-css-js/css-layout/css-flex-layout-3.html

Grid 网格布局

Grid 布局是一种网格布局,它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。不过目前该布局方式兼容性存在一定问题,慎用!同样的,处理定义父容器 display: grid; 或者 display: inline-grid; 将其转换为 Grid 布局方式外,我们还需要了解如下属性:

父容器属性

  • grid-template-columns:控制网格的列宽,px、%、fr、repeat()、auto-fill、minmax()、auto、[];
  • grid-template-rows:控制网格的行高,px、%、fr、repeat()、auto-fill、minmax()、auto、[];
  • grid-row-gap:控制网格的行间距;
  • grid-column-gap:控制网格的列间距;
  • grid-gap:grid-column-gap和grid-row-gap的简写;
  • grid-template-areas:定义区域,一个区域由单个或多个单元格组成;
  • grid-auto-flow:控制单元格排列顺序,row (按行)| column (按列)| row dense (行稠密)| column dense (列稠密);
  • justify-items:控制单元格内容的水平位置,start | end | center | stretch ;
  • align-items:控制单元格内容的垂直位置,start | end | center | stretch ;
  • place-items:align-items 和 justify-items 的简写;
  • justify-content:控制整个内容区域在容器里面的水平位置,start | end | center | stretch | space-around | space-between | space-evenly ;
  • align-content:控制整个内容区域在容器里面的垂直位置,start | end | center | stretch | space-around | space-between | space-evenly ;
  • place-content:align-content 和 justify-content 的简写;
  • grid-auto-columns:控制浏览器自动创建的多余网格的列宽;
  • grid-auto-rows:控制浏览器自动创建的多余网格的行高;
  • grid-template:grid-template-columns、grid-template-rows 和 grid-template-areas的简写;
  • grid:grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow 的 简写。
子项目属性
  • grid-column-start:指定单元格列的起始位置网格线(左);
  • grid-column-end:指定单元格列的终止位置网格线(右);
  • grid-row-start:指定单元格行的起始位置网格线(上);
  • grid-row-end:指定单元格行的终止位置网格线(下);
  • grid-column:grid-column-start 和 grid-column-end 的简写;
  • grid-row:grid-row-start 和 grid-row-end 的简写;
  • grid-area:指定项目放在哪一个区域,还可用作 grid-row-start、grid-column-start、grid-row-end、grid-column-end 的简写;
  • justify-self:控制当前单元格内容的水平位置,start | end | center | stretch ;
  • align-self:控制当前单元格内容的垂直位置,start | end | center | stretch ;
  • place-self:align-self 和 justify-self 的简写。
实例-嵌套盒子布局

demo地址:https://demo.zibuyu.life/frontend/html-css-js/css-layout/css-grid-layout.html

Multi-column 多列布局

Multi-column 多列布局是 CSS3 中新出现的一种布局方式,它能轻松的让文本呈现多列显示,就像报纸上的新闻排版一样。与 Flex 及 Grid 不同的是,Multi-column 布局不会影响子元素在其文档流中的正常显示方式,最后 Muti-column 需要了解的属性有:

  • column-count:控制列的数量;
  • column-width:控制列的宽度,最小宽度;
  • columns:column-count 和 column-width 的简写;
  • column-gap:控制列与列之间的间隙;
  • column-rule-color:控制列与列之间的边框颜色;
  • column-rule-style:控制列与列之间的边框样式;
  • column-rule-width:控制列与列之间的边框宽度;
  • column-rule:column-rule-color 、column-rule-style 和 column-rule-width 的简写;
  • column-span:控制对象元素是否横跨所有列,可应用于子项目;
  • column-fill:控制内容是如何分割成列;
实例-垂直等宽瀑布流布局

demo地址:https://demo.zibuyu.life/frontend/html-css-js/css-layout/css-multi-column-layout.html

以上。

给TA打赏
共{{data.count}}人
人已打赏
编程技术

CSS 实现项目名称两端对齐

2022-9-7 16:31:38

编程技术

Windows 系统移除 IE 增强的配置

2022-9-7 16:32:30

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 admin@s9h.cn 或点击右侧 私信:少羽 反馈,我们将尽快处理。
0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索