css常见布局方式

article/2025/11/5 13:54:44

css常见布局方式

  • 0、前言
  • 1、两栏布局
    • 1.1 浮动 + margin
    • 1.2 浮动 + BFC（overflow: hidden）
    • 1.3 定位 + margin-left
    • 1.4 给父容器设置flex布局，左盒子固定宽度，然后给右子元素设置 flex: 1。
    • 1.5 table布局
  • 2、三栏布局
    • 2.1 float布局
    • 2.2 position布局
    • 2.3 flex布局
    • 2.4 table布局
    • 2.5 网格(gird)布局:
  • 3、总结

0、前言

CSS 的布局应该是 CSS 体系中的重中之重，主要的布局方式有 table 表格布局（早期），float 浮动布局、position布局和 flex 布局。

实现效果如下：
在这里插入图片描述

1、两栏布局

指的是左边固定，右边自适应。

1.1 浮动 + margin

先将左元素设置定宽为100px，并左浮动。
然后给右元素设置margin-left，值等于左元素的宽度。

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.left {width: 200px;height: 200px;background-color: #f00;float: left;}.right {height: 200px;background-color: aqua;margin-left: 100px;}</style>
</head><body><div class="container"><div class="left"></div><div class="right"></div></div>
</body></html>

1.2 浮动 + BFC（overflow: hidden）

触发BFC后，右元素就会环绕着浮动的元素，不会被浮动的元素所覆盖。

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.left {width: 200px;height: 200px;background-color: #f00;float: left;}.right {height: 200px;background-color: aqua;overflow: hidden}</style>
</head><body><div class="container"><div class="left"></div><div class="right"></div></div>
</body></html>

1.3 定位 + margin-left

先给父元素设置position: relative、左子元素设置position: absolute，然后给左子元素设置left: 0
并设置宽度，然后给右子元素设置 margin-left，值等于左子元素的宽度。

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {position: relative}.left {width: 200px;height: 200px;background-color: #f00;position: absolute;left: 0;}.right {height: 200px;background-color: aqua;margin-left: 200px;}</style>
</head><body><div class="container"><div class="left"></div><div class="right"></div></div>
</body></html>

1.4 给父容器设置flex布局，左盒子固定宽度，然后给右子元素设置 flex: 1。

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {display: flex;}.left {width: 200px;height: 200px;background-color: #f00;}.right {height: 200px;background-color: aqua;flex: 1;}</style>
</head><body><div class="container"><div class="left"></div><div class="right"></div></div>
</body></html>

1.5 table布局

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* table布局：(display:table-cell后)子级容器默认是自动平分宽度沾满父级容器； */.container {display: table;height: 300px;width: 100%;}.left {display: table-cell;/* 定宽 */width: 200px;/*height: 100% 因为未脱离文档流，所以不用设置高度也行*/background-color: chartreuse;}.right {/*height: 100% 因为未脱离文档流，所以不用设置高度也行*/display: table-cell;background-color: coral;}</style>
</head><body><div class="container"><div class="left"></div><div class="right"></div></div>
</body></html>

2、三栏布局

顾名思义就是两边固定，中间自适应。

实现效果如下：
在这里插入图片描述

2.1 float布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.left {float: left;width: 100px;height: 200px;background-color: red;}.right {float: right;width: 100px;height: 200px;background-color: blue;}.center {background-color: aqua;height: 200px;margin-left: 100px;margin-right: 100px;}</style>
</head><body><div class="container"><div class="left"></div><div class="right"></div><div class="center"></div></div>
</body></html>

2.2 position布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.left {position: absolute;left: 0;width: 200px;height: 200px;background-color: red;}.right {position: absolute;right: 0;width: 200px;background-color: blue;height: 200px;}.center {position: absolute;left: 200px;right: 200px;background-color: aqua;height: 200px;}</style>
</head><body><div class="container"><div class="left"></div><div class="center"></div><div class="right"></div></div>
</body></html>

2.3 flex布局

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {display: flex;}.left {width: 200px;height: 200px;background: red;}.right {width: 200px;height: 200px;background: blue;}.center {/* margin: 0; */background-color: aqua;width: 100%;}</style>
</head><body><div class="container"><div class="left"></div><div class="center"></div><div class="right"></div></div>
</body></html>

2.4 table布局

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {width: 100%;display: table;}.left,.center,.right {display: table-cell;}.left {width: 200px;height: 200px;background-color: aqua;}.center {height: 200px;background-color: red;}.right {width: 200px;height: 200px;background-color: blue;}</style>
</head><body><div class="container"><div class="left"></div><div class="center"></div><div class="right"></div></div>
</body></html>

2.5 网格(gird)布局:

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {width: 100%;display: grid;grid-template-rows: 200px;grid-template-columns: 200px auto 200px;}.left {background-color: aqua;}.center {background-color: red;}.right {background-color: blue;}</style>
</head><body><div class="container"><div class="left"></div><div class="center"></div><div class="right"></div></div>
</body></html>

3、总结

布局方式优点缺点
浮动布局兼容性好，支持大多数浏览器；可以实现多列布局。容易出现清除浮动问题，需要额外的样式规则来处理；不太适合复杂的布局需求，例如垂直居中和等高布局。
定位布局灵活性较高，可以精确控制元素的位置；可以实现重叠布局效果。对于复杂布局，需要手动计算和调整元素的位置和尺寸。当元素的位置改变时，可能需要手动调整其他相关元素的位置。
表格布局可以实现简单的等高布局和垂直居中；兼容性良好，支持大多数浏览器。结构复杂，不适用于非表格内容的布局；语义化不强，使用表格元素来布局非表格内容不符合标准。
弹性盒子布局简单易用，可以快速实现自适应布局；支持灵活的对齐和排列方式；适用于响应式设计。在某些情况下，对于复杂布局需求可能需要额外的样式规则。
网格布局提供了强大的网格系统，可以实现复杂的布局；可以方便地进行元素的放置和对齐；支持自适应和响应式设计。兼容性方面，部分较老的浏览器对网格布局支持较差。

http://chatgpt.dhexx.cn/article/geOx8E7o.shtml

相关文章

CSS布局的三种方式

CSS布局的三种方式

绝对定位 绝对定位&#xff1a; ​ 属性&#xff1a;position 值&#xff1a;absolute <style> p.abs{position: absolute;left: 150px;top: 50px; }</style><p >正常文字1</p> <p >正常文字2</p> <p class"abs" >绝对定…
阅读更多...
CSS五种布局方式

CSS五种布局方式

是CSS知识体系的重中之重 早期以table为主&#xff08;简单&#xff09; 后来以技巧性布局为主&#xff08;难&#xff09; 现在有flexbox/grid(偏简单) 响应式布局是必备知识 常用布局方法 table表格布局 <!DOCTYPE html> <html lang"en"> <head&…
阅读更多...
CSS+DIV三种布局方式

CSS+DIV三种布局方式

在学习了盒模型、块级元素和行内元素得到概念后&#xff0c;我们来说一下CSS的一个比较重要的用途&#xff1a;布局。以前我们学过表格可以起到布局页面的作用&#xff0c;比如布局表单&#xff0c;但实际工作表格的布局通常也仅仅是用来布局表单。绝大多数的模具工作是由CSSDI…
阅读更多...
Css 常用布局方式

Css 常用布局方式

1.CSS 参考手册 2.元素的分类 首先我们要知道一共有几种元素 1.行内元素&#xff08;可以与其他行内元素位于同一行&#xff0c;不会以新行开始高度、宽度不能设置&#xff09; 2.块级元素&#xff08;每个块级元素都从新的一行开始&#xff0c;其后的元素也另起一行。默认…
阅读更多...
css五大布局方式详解

css五大布局方式详解

css布局方式 table布局float布局flex布局响应式布局Grid布局 table布局 table布局在如今已经很少使用&#xff0c;原因是&#xff1a;table布局比其它html标记占更多的字节&#xff0c;会阻挡浏览器渲染引擎的渲染顺序&#xff0c;会影响其内部的某些布局属性的生效。 使用…
阅读更多...
css中常见的布局方式

css中常见的布局方式

1.流体布局 流体布局是网页缩小和放大时网页布局会随着浏览器的大小而改变。 两边的宽度是固定的&#xff0c;中间的宽度是可以根据屏幕的大小进行改变的 思路: 给左右两边的盒子设置固定的宽高并设置左右浮动&#xff0c;中间盒子通过设置margin-left和margin-right(margin的…
阅读更多...
CSS的三大布局方式（流式布局，浮动布局和层布局）

CSS的三大布局方式（流式布局，浮动布局和层布局）

文章目录 前言一、标准文档流二、三种布局方式1.流式布局2.浮动布局&#xff08;1&#xff09;字围效果&#xff08;2&#xff09;圣杯布局 3.层布局定位的分类&#xff1a;&#xff08;1&#xff09; 相对定位 position:relative&#xff08;2&#xff09; 绝对定位 position:…
阅读更多...
Unity 初识：SkyBox（天空盒）

Unity 初识：SkyBox（天空盒）

概念 天空盒是包裹整个场景的环境效果。 制作天空盒 1、创建材质球。 2、设置材质球Shader为SkyBox。 SkyBox/6 Sided&#xff0c;将六张贴图放到对应位置。 使用天空盒 为场景添加&#xff1a; 方法一、直接将做好的材质拖到场景中。 方法二、菜单栏Window--->Lighting-…
阅读更多...
unity 天空盒介绍

unity 天空盒介绍

天空盒其实很简单&#xff0c;就是直接找贴图&#xff0c;比如网上直接搜 然后将图片导入Unity&#xff0c;把texture shape 改为Cube模式&#xff0c;点击Apply应用即可 当应用之后Unity会自动帮我们生成材质球&#xff0c;直接将材质球拖到Scene场景即可&#xff0c;看到…
阅读更多...
Unity天空盒子设置和基础灯光设置

Unity天空盒子设置和基础灯光设置

选择new Lighting settings来创建一个新的光源 这里可以选择是来自天空盒子的光源还是选择他自己本身的颜色 之后选择使用GPU来渲染
阅读更多...
Unity3D -- 天空盒(图文)

Unity3D -- 天空盒(图文)

1.1、天空盒图片 如果是这样的天空盒图片 直接引入到Unity项目中&#xff0c;在Inspector窗口将Texture Shape修改为Cube&#xff0c;而后保存并应用就行了 1.2、其它图片或整张图片 如果需要将图片等分可通过ps进行处理 选择并使用裁剪工具 &#xff0c;得到如下图 如果图片出…
阅读更多...
小功能⭐️Unity动态更换天空盒、旋转天空盒

小功能⭐️Unity动态更换天空盒、旋转天空盒

文章目录 &#x1f7e5; Unity动态更换天空盒1️⃣ 方法12️⃣ 方法2 &#x1f7e7; 旋转天空盒 &#x1f7e5; Unity动态更换天空盒 1️⃣ 方法1 1、在摄像头上添加SkyBox组件 放到其他地方不管用。 2、创建SkyBox类型的的材质球。放入即可。 3、通过代码&#xff0c;你便可获…
阅读更多...
unity3d场景怎么添加天空盒子?

unity3d场景怎么添加天空盒子?

unity3d场景中想要添加天空盒子&#xff0c;该怎么添加呢&#xff1f;下面我们就来看看详细的教程。 1、先下载组成天空盒子的天空图片 2、把天空图片拖进unity3d中创建的文件夹 3、新建一个材质球 4、把材质球的shader修改成天空盒选项 5、在天空盒的六个方向&#xff08;前&a…
阅读更多...
Unity3D-设置天空盒

Unity3D-设置天空盒

首先打开工具栏Window下的照明&#xff0c;找到环境这里的天空盒材质就是整个项目的背景&#xff0c;可以到官网下载自己喜欢的天空盒材质 这里就是下载好的天空盒材质 点开Shader 选择Skybox 再选择Cubemap Extended 选择好后将其拖入天空盒材质 可以在检测器里调整天空盒的一…
阅读更多...
unity移动天空盒

unity移动天空盒

旋转 直接观察天空盒参数是有一个Rotation的。 我们可以通过给Camera添加Skybox组件获取到天空盒然后修改Rotation参数。 private void Update(){RotateSkybox();}//控制天空盒旋转private void RotateSkybox(){float num Camera.main.GetComponent<Skybox>().material…
阅读更多...
Unity修改默认天空盒Skybox

Unity修改默认天空盒Skybox

在Main Camera 上添加Skybox&#xff0c;并拖动目标天空盒&#xff0c;没有修改成功。 &#xff08;hierarchy 下面的 main camera 主摄像机 然后 点击 component->Rendering->skybox 给主摄像机添加一个 天空盒 这是我们就可以再 摄像机的 属性栏看到 skybox 属性 …
阅读更多...
Unity 动态天空盒

Unity 动态天空盒

为了使天空盒更真实&#xff0c;需要控制天空盒动态旋转。 网上找到的方法是&#xff1a; float num RenderSettings.skybox.GetFloat("_Rotation");RenderSettings.skybox.SetFloat("_Rotation", num 0.05f); 但在我的工程中会报错&#xff08;我的un…
阅读更多...
unity天空盒有缝隙解决方法

unity天空盒有缝隙解决方法

今天发现有些天空盒导入到unity显示会出现一个立方体的样子&#xff0c;立方体面之间会出现缝隙&#xff0c;看着很明显。 解决方法很简单&#xff0c;把天空盒的材质图片&#xff08;也就是Texture&#xff09;修改一下。 有两个地方需要修改&#xff0c;如下图&#xff1a;…
阅读更多...
Unity 天空盒的制作与应用

Unity 天空盒的制作与应用

转自https://blog.csdn.net/weixin_39923777/article/details/83030780 一.天空盒的作用&#xff1a; 1.用于渲染显示天空和周围的环境&#xff1b; 2.作为场景中的辅助光源。 二.制作天空盒&#xff1a; 1.导入“HDR 环境贴图”素材图片到unity项目中&#xff1b; 2.更改贴…
阅读更多...
unity skybox天空盒下载

unity skybox天空盒下载

几百个天空盒,分了好几份 天空盒下载 1. 太空天空盒下载 2. 白天天空盒下载 3. 夜晚天空盒下载 4. 阴天雾霾天空盒下载 5. HDRI Haven skybox-1 6. HDRI Haven skybox-2 7. 其他天空盒-1 8. 其他天空盒-2 最后是没分的天空盒暂且叫其他天空盒吧,按需下载,喜欢的话请点个赞吧…
阅读更多...
推荐文章

Copyright @ 2022~2023