HTML,CSS基本布局方式

白里征途

于 2023-08-27 20:08:18 发布

阅读量113

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_75151863/article/details/132526977

版权

HTML,CSS基本布局方式

1.流式布局：

流式布局 (Flow Layout): 这是默认的布局方式，元素会根据父容器自上而下、从左到右进行流式排列。

代码：

<div style="width: 100%; height: auto;">
    <p>这是一个流式布局的段落。</p>
</div>

2.盒子模型布局：

盒子模型布局是指使用CSS的盒子模型来对元素进行布局。元素被看作是一个矩形盒子，可以通过设置盒子的宽度、高度、边距和内边距等属性来进行布局。

代码：

<style>
.box {
 	 width: 300px;
  	height: 200px;
  	margin: 10px;
      padding: 20px;
}
</style>
<div class="box">
  <p>内容</p>
</div>

3.定位布局：

定位布局 (Positioning Layout): 使用相对定位（position: relative;）和绝对定位（position: absolute;）来控制元素的位置。

代码：

<div style="position: relative;">
    <p style="position: absolute; top: 20px; left: 30px;">这是绝对定位的段落。</p>
</div>

3.浮动布局：

浮动布局 (Float Layout): 使用浮动（float: left; 或 float: right;）来使元素在父容器内浮动排列。
浮动布局是通过将元素浮动到指定的方向来进行布局。浮动元素会脱离正常的文档流，周围的内容会环绕在其周围。浮动布局常用于创建多栏布局和实现图文混排效果。

代码：

<style>
.left {
  float: left;
  width: 30%;
}

.right {
  float: right;
  width:   }

.content {
  margin: 0 35%;
}
</style>
<div class="left">左侧栏</div>
<div class="right">右侧栏</div>
<div class="content">内容区域</div>

4.弹性盒子布局：

弹性盒子布局 (Flexbox Layout): 使用弹性盒子容器（display: flex;）和相关属性来实现灵活的布局。

代码：

<style>
.container {
  display: flex;
  justify-content: space-between;
}
</style>
<div class="container">
  <div>元素1</div>
  <div>元素2</div>
  <div>元素3</div>
</div>

5.栅格布局：

栅格布局 (Grid Layout): 使用网格容器（display: grid;）和网格项将页面划分为均匀的行和列来划分布局。

代码：

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
		<div>第一列</div>
		<div>第二列</div>
		<div>第三列</div>
</div>

6.多列布局：

多列布局 (Multi-column Layout): 使用多列布局属性来创建多列文本布局。

代码：

<div style="column-count: 2;">
    <p>这是多列布局的段落。</p>
</div>

7.网格布局：

网格布局 (Masonry Layout): 使用 JavaScript 或 CSS3 的列布局来创建瀑布流式的布局。

代码：

<div class="container">
  <div>元素1</div>
  <div>元素2</div>
  <div>元素3</div>
  <div>元素4</div>
</div>

<style>
.container {
  	display: grid;
 	grid-template-columns: repeat(2, 1fr);
  	grid-template-rows: 100px 100px;
}
</style>

8.双飞翼（圣杯）布局：

1.两侧固定，中间自适应的布局模式

利用定位实现两侧固定中间自适应

父盒子设置左右 padding 值
给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.
中间盒子自适应

基本代码：

html基本代码：

<div class="father">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</div>

css基本代码：

.father {
	height: 400px; background-color: pink; position: relative; padding: 0 200px; 
}
.left,.right {
    width: 200px; height: 300px; background-color: yellow; position: absolute; top: 0; 
}
.left {
	left: 0; 
}
.right {
	right: 0; 
}
.center {
	background-color: blue; height: 350px; 
}

利用 flex 布局实现两侧固定中间自适应

父盒子设置 display:flex;
左右盒子设置固定宽高

中间盒子设置 flex:1 ;

html基本代码：

<div class="father">
        <div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</div>

css基本代码：

.father {
	height: 400px; background-color: pink; display: flex; 
}
.left {
	width: 200px; height: 300px; background-color: yellow;
}
.right {
	width: 200px; height: 300px; background-color: yellow;
}
.center {
	flex: 1; background-color: blue; 
}

利用 bfc 块级格式化上下文, 实现两侧固定中间自适应

左右固定宽高，进行浮动
中间 overflow: hidden;

html基本代码：

<!-- 注意:left 和 right 必须放在 center 前面 -->
<div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>

css基本代码：

.father {
	height: 500px; background-color: pink;
}
.left {
	float: left; width: 200px; height: 400px; background-color: blue;
}
.right {
	float: right; width: 200px; height: 400px; background-color: blue; 
}
.center {
	height: 450px; background-color: green; overflow: hidden;
}

9.粘性布局：

粘性布局 (Sticky Layout): 使用 position: sticky 在特定位置将元素固定，但在滚动到一定位置后会变为固定定位。
粘性布局是一种介于相对定位和固定定位之间的布局方式，元素在特定位置变为固定定位，但在滚动到一定位置后会恢复到相对定位。主要用于创建悬浮的导航栏、工具栏等效果。

代码：

.sticky-element {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0; /* 元素在顶部固定 */
    /* 或者 bottom: 0; 元素在底部固定 */
    background-color: lightgray;
}

10.层叠布局：

层叠布局 (Layered Layout): 使用 z-index 属性来控制元素的层叠顺序，实现图层叠加效果。通常用于创建覆盖弹出框、提示框等效果

代码：

.layered-element {
    position: relative; /* 确保元素在同一上下文中 */
    z-index: 2; /* 设置层叠顺序 */
    background-color: rgba(255, 0, 0, 0.5);
}

.another-layered-element {
    position: relative;
    z-index: 1; /* 较低的层叠顺序 */
    background-color: rgba(0, 0, 255, 0.5);
}

11.表格布局：

表格布局 (Table Layout): 使用 HTML 表格元素来实现布局，不过这种方式在现代布局中很少使用。
1. 创建一个包含表格行（<tr>) 的表格（<table>）。
2. 在每一行中使用表格单元格（<td>）来放置内容。
3. 使用表格的单元格属性来控制布局，如宽度、对齐等。
4. 代码：
```
<table class="table-layout">
    <tr>
        <td>左侧</td>
        <td>中间</td>
        <td>右侧</td>
    </tr>
</table>
```

12.等分布局:

等分布局 (Equal Width Layout): 将多个元素等分父容器的宽度，通常用于导航菜单或类似情境。

html代码：

<div class="equal-columns">
    <div>选项1</div>
    <div>选项2</div>
    <div>选项3</div>
</div>

css代码：

.equal-columns {
    display: flex;
    justify-content: space-between;
}

.equal-columns div {
    flex: 1;
    /* 添加样式，如背景色、边框等 */
}

13.单栏布局:

单栏布局 (Single Column Layout)**: 最简单的布局，内容在一个垂直列中排列。

代码：

<style>
    .single-column {
    /* 添加样式，如宽度、背景色等 */
}
</style>

<div class="single-column">
    <p>这是单栏布局。</p>
</div>

14.双栏布局

双栏布局 (Two Column Layout): 将页面分为两个主要列，如左侧内容和右侧侧边栏。

代码：

<style>
    .two-column {
    display: flex;
}

.main-content {
    flex: 1;
    /* 添加样式，如背景色、边框等 */
}

.sidebar {
    /* 添加样式，如宽度、背景色等 */
}
</style>

<div class="two-column">
    <div class="main-content">主要内容</div>
    <div class="sidebar">侧边栏</div>
</div>

15.三栏布局

三栏布局 (Three Column Layout): 将页面分为三个主要列，通常包括左侧侧边栏、中间内容区域和右侧侧边栏。

代码：

<div class="three-column">
    <div class="left-sidebar">左侧边栏</div>
    <div class="main-content">主要内容</div>
    <div class="right-sidebar">右侧边栏</div>
</div>

16.分栏布局

分栏布局 (Multicolumn Layout): 使用 CSS 多列属性将内容分为多个列，类似于报纸排版。

代码：

<style>
.multicolumn {
    column-count: 2;
    column-gap: 20px; /* 列之间的间隔 */
}
</style>

<div class="multicolumn">
    <p>多列布局。</p>
    <p>这是第二列。</p>
</div>