css布局方式

王布尔

已于 2024-04-26 10:54:11 修改

阅读量1.1k

点赞数 21

分类专栏： CSS 文章标签： css css3 前端

于 2024-04-08 18:46:43 首次发布

本文链接：https://blog.csdn.net/m0_67011584/article/details/137515088

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 流动布局

流动布局是HTML默认的布局方式，流动布局随文档流自上而下按顺序动态分布。流动布局只根据元素排列的先后顺序决定显示位置。如果要改变元素的显示位置，只能通过改变HTML文档结构实现。

流动布局有以下两个比较典型的特征:

块状元素都会在包含元素内自上而下按顺序堆叠分布。在默认状态下，块状元素的宽度为100%，占据一行显示，不管这个元素是否包含内容，宽度是否为100%
行内元素都会在包含元素内从左到右水平分布显示，类似于文本流，超出一行后会自动换行显示，然后继续从左到右按顺序流动，以此类推。

2. 表格布局

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格是以行和列的形势显示信息，常用于显示网格结构的数据。

表格常用标签:

标签	描述
<table>	表格标签
<thead>	表头
<tbody>	表体
<tfoot>	表尾
<th>	标题
<tr>	行
<td>	列

常用的table属性:

属性名	属性值	描述
width	number	表格宽度
height	number	表格高度
align	left \| right \| center	单元格里的文字对齐方式
bgcolor	string	背景色
background	string	背景图片
border	string	边框
cellpadding	number	边距
cellspacing	number	间距
rowspan	number	跨行合并
colspan	number	跨列合并
border-collapse	collapse	合并边框线

3. 浮动布局

一旦标准流中元素被加了float:left或float:right样式，则元素就变为了浮动元素，脱离文档流。

浮动元素之间共享一行
浮动元素的width、height默认由元素内容决定，而不是由父级决定
浮动元素支持通过width、height、padding、border、margin来指定盒子内容区、内外边距、边框大小
浮动元素之间不会因为空格、换行产生空隙，浮动元素之间是紧密贴合的

浮动元素之间紧密贴合，不会发生覆盖现象。
如果目前顶部的行的剩余宽度不足以放下新的浮动元素，则新的浮动元素自动另起一行排列。
容易出现高度塌陷问题

属性名	属性值	描述
float	none	默认无浮动
	left	左浮动
	right	右浮动
clear	left	清除当前元素前面的，左浮动元素脱标后带来的影响（高度塌陷）
	right	清除当前元素前面的，右浮动元素脱标后带来的影响（高度塌陷）
	botn	清除当前元素前面的，左、右浮动元素脱标后带来的影响（高度塌陷）

4. 定位布局

定位布局可以精确控制网页对象的显示位置，布局精准，不会出现错行和误差问题；

缺点是缺乏灵活性，栏目之间不能够协同变化，还会存在叠加等风险

属性名	属性值	描述
postion	relative	相对定位，相对于元素本身
	absolute	绝对定位，相对于开启定位的父元素
	static	不定位、默认值
	fixed	固定定位，相对于窗口

5. 弹性布局(flex布局)

作用： 和浮动一样都用于网页布局，但flex比浮动要更强大。flex不会产生脱标现象，布局网页更灵活、更简单（推荐使用）。
组成： 弹性容器+弹性盒子+主轴+侧轴

父元素属性：

属性名	属性值	描述
display	flex	开启弹性布局
justify-content 主轴对齐方式	flex-start	左对齐(默认)
	flex-end	右对齐
	center	居中对齐
	space-between	均匀分布、左右不留
	space-around	均匀分布、左右少许间隙
	space-evenly	均匀分布、左右相等间隙
align-items 侧轴对齐方式	flex-start	上对齐
	flex-end	下对齐
	center	居中对齐
	stertech	拉伸铺满(默认)
	inline	根据内容文字对齐
align-content 行对齐方式只有1行时不生效	flex-start	上对齐
	flex-end	下对齐
	center	居中对齐
	space-between	均匀分布、上下不留
	space-around	均匀分布、上下少许间隙
	space-evenly	均匀分布、上下相等间隙
flex-dirction 改变主轴方向	row	从左往右(默认)
	row-reverse	从右往左
	column	从上到下
	column-reverse	从下到上
flex-wrap 换行	nowrap	不换行(默认)
	wrap	换行
	wrap-reverse	向上换行

子元素属性:

属性名	属性值	描述
flex	0 \| 1 \| auto	放大比例 \| 缩小比例 \| 分配多余空间之前占比
order	number	权重、控制排列顺序
align-self 侧轴对齐方式	auto	默认使用父元素的align-items
	flex-start	上对齐
	flex-end	下对齐
	center	居中对齐
	baseline	文字对齐
	stretch	拉伸铺满

6. 栅格布局(grid布局)

CSS的栅格布局也被称为网格布局(Grid Layout)，它是一种新兴的布局方式。

栅格布局是一个二维系统，这意味着它可以同时处理列和行，与弹性布局相似，栅格系统也是由栅格容器包裹栅格元素进行使用。

对于栅格布局来说，它的思想实际上非常简单，将一块区域绘制成格子，然后将元素填进去即可

父元素属性：

属性名	属性值	描述
display	grid	开启块元素栅格布局
display	inline-grid	开启行内块元素栅格布局
grid-template	100px 100px; 20% 20%; 1fr 2fr 1fr; repeat(12, 1fr); repeat(auto-fill, 100px); repeat(3, minmax(50px, 100px))	划分行和列(先行后列)
grid-template-rows		划分行
grid-template-columns		划分列
gap	定义行和列的间距
rows-gap	行间距
columns-gap	列间距
grid-auto-flow	column	按列排序
grid-auto-flow	row	按行排序(默认)

子元素属性：

属性名	举例	描述
grid-area	2 / 1 / span 1 / span 3	定位( 行开始 / 列开始 / 行结束 / 列结束 )
grid-row	2 / span 1	定位行开始和结束位置( 开始位置 / 结束位置 )
grid-column	2 / span 1	定义列开始和结束位置( 开始位置 / 结束位置 )
grid-row-start	1	定位行开始位置
gird-colunm-start	1	定位列开始位置
gird-row-end	span 1	定位行结束位置
gird-colnum-end	span 1	定位列结束位置

7. 圣杯布局和双飞翼布局

圣杯布局和双飞翼布局最终效果相同，具有相同的特点

两侧宽度固定，中间宽度自适应（三栏布局）
中间部分在DOM结构上有限，以便先行渲染
允许三列中的任意一列成为最高列
只需要使用一个额外的div标签

圣杯布局代码

<div class="header"></div>
<div class="container">
  <div class="center"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>
<div class="footer"></div>

双飞翼布局代码

<body>
  <div id="header"></div>
  <div id="container" class="column">
    <div id="center"></div>
  </div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
  <div id="footer"></div>
<body>

最终效果

圣杯布局代码结构上更加自然和直观，在平时的开发中更容易形成这样的布局结构；
双飞翼布局由于不使用定位，所以代码更加简洁，允许页面的最小宽度小于圣杯布局。

王布尔

关注

21
点赞
踩
28

收藏

觉得还不错? 一键收藏
打赏
0
评论
css布局方式

流动布局是HTML默认的布局方式，流动布局随文档流自上而下按顺序动态分布。在默认状态下，块状元素的宽度为100%，占据一行显示，不管这个元素是否包含内容，宽度是否为100%行内元素都会在包含元素内从左到右水平分布显示，类似于文本流，超出一行后会自动换行显示，然后继续从左到右按顺序流动，以此类推。栅格布局是一个二维系统，这意味着它可以同时处理列和行，与弹性布局相似，栅格系统也是由栅格容器包裹栅格元素进行使用。CSS的栅格布局也被称为网格布局(Grid Layout)，它是一种新兴的布局方式。
复制链接

扫一扫