CSS五种布局方式

article/2025/11/5 13:48:06

是CSS知识体系的重中之重
早期以table为主（简单）
后来以技巧性布局为主（难）
现在有flexbox/grid(偏简单)
响应式布局是必备知识

常用布局方法

table表格布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.left{background:red;}.right{background:blue;}table{width:800px;height:200px;border-collapse: collapse;}.table{margin-top:20px;display: table;width:800px;height:200px;}.table-row{display: table-row;}.table-cell{vertical-align: center;display: table-cell;}</style>
</head>
<body><table><tr><td class="left">左</td><td class="right">右</td></tr></table><div class="table"><div class="table-row"><div class="left table-cell">左</div><div class="right table-cell">右</div></div></div>
</body>
</html>

通过div和样式，做的像表格一样

盒模型

在这里插入图片描述

display/position

确定元素的显示类型： block/inline/inline-block
确定元素位置：static/relative/absolute/fixed
inline不能设宽高，inline-block可以设宽高

position demo

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{background:red;width:100px;height:100px;}.p2{position: relative;left:10px;top:-10px;background:blue;}.p3{position: absolute;left:80px;top:30px;background: green;}.p4{position: fixed;left:0;bottom:10px;}</style>
</head>
<body><div class="p1">position:static</div><div class="p2">position:relative</div><div class="p3">position:absolute<div class="p3-3" style="position:absolute;width:50px;height:50px;background:yellow"></div></div><div class="p4">position:fixed;</div><div class="p5">p5</div>
</body>
</html>

p2的偏移是因为指定relative，然后指定right, top，相对自己位置偏移
position: absolute是相对于最近的父级或者最近的absolute，绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的（默认是body）；

注意：css描述的绝对定位概念，没有说明是离他最近的一个已相对定位的盒子进行定位的，所以离他最近的盒子的定位可以是相对定位（relative）和绝对定位（absolute）的，但是在开发中，一般是父盒子设置相对定位的，但是不代表只能是相对定位。

fixed是相对于可视区域的

层级： 默认按顺序层叠。手动设置则设z-index。
absolute fixed 可以设z-index，数值大的在上面

flexbox布局

弹性盒子
盒子本来就是并列的
指定宽度即可
没大范围支持，因为兼容性不是很好。
但是很好用。RN用flexbox布局。

flex基本demo

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width:800px;height:200px;display: flex;border:1px solid black;}.flex{background:red;margin:5px;flex:1}</style>
</head>
<body><div class="container"><div class="flex">flex</div><div class="flex">flex</div><div class="flex">flex</div><div class="flex">flex</div><div class="flex">flex</div></div>
</body>
</html>

不单独设置的话，子元素平分父元素。
可以单独设置flex的数值，调整子元素占的宽度

width: 50px;
flex: none;

这样就可以写固定宽度

flex应用demo

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width:800px;height:200px;display: flex;}.left{background: red;display: flex;width:200px;}.right{background: blue;display: flex;flex:1;}</style>
</head>
<body><div class="container"><div class="left">左</div><div class="right">右</div></div>
</body>
</html>

float布局（重点）

最不好理解最麻烦，但国内用的最多，适配性最好。

元素“浮动”
脱离文档流
但不脱离文本流

float demo1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{background:red;width:400px;margin:20px;}.p1{background:green;float:left;width:200px;height:50px;}.container2::after{content: 'aaa';clear:both;display: block;visibility: hidden;height:0;}</style>
</head>
<body><div class="container"><span class="p1">float</span><div class="p2">很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字</div></div><div class="container container2"><span>写几个字</span><span class="p1">float</span><span class="p1">float</span></div><div class="container" style="height:200px;background:blue;"></div>
</body>
</html>

对自身的影响：
形成“块”（BFC）
位置尽量靠上
位置尽量靠左（右）
对兄弟元素的影响：
上面贴非float元素
旁边贴float元素
不影响其它块级元素位置
影响其它块级元素的文本
对父级元素的影响：
从布局上“消失”
高度塌陷（float 高度100px，父级不会被撑到100px）
加伪元素避免塌陷
加伪元素（见demo1的container2) 是一个经典的去除浮动的方式

float demo2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width:800px;height:200px;}.left{background:red;/* float:left; *//* height:100%; */width:200px;position: absolute;height:200px;}.right{background:blue;float:right;width:200px;height:100%;}.middle{margin-left:200px;margin-right:200px;}</style>
</head>
<body><div class="container"><div class="left">左</div><div class="right">右</div><div class="middle">中间</div></div>
</body>
</html>

左边向左浮动，右边加margin-left，数值为左边元素的宽度

写三栏的时候不在一行，把right的div写在middle的div前面，就解决了。
经典两栏三栏。
absolute的高度指定不能用百分比，只能用具体数，因为它不能跟父级元素绑定

inline-block布局

像文本一样排block元素
没有清除浮动等问题
需要处理间隙：

  1. container里把font-size设为0px （推荐）
  2. 修改div书写的位置，取消造成间隙的换行/空格, demo中“左”div后的换行取消，就可消除间隙，如下列代码
<body><div class="container"><div class="left">左</div><div class="right">右</div></div>
</body>

demo

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width:800px;height:200px;font-size:0;}.left{font-size:14px;background:red;display: inline-block;width:200px;height:200px;}.right{font-size:14px;background:blue;display: inline-block;width:600px;height:200px;}</style>
</head>
<body><div class="container"><div class="left">左</div><div class="right">右</div></div>
</body>
</html>

响应式布局

在不同设备上正常使用
一般主要处理屏幕大小问题
主要方法：
隐藏+折行+自适应空间
rem/viewport/media query

响应式布局demo1

适配移动端第一步：

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

用媒体查询@media, 判定移动端之后显示, 范围大的@media放在上面

@media (max-width: 640px){.left{display: none;}}

完整demo如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>responsive</title><style>.container{margin:0 auto;max-width:800px;display: flex;border:1px solid black;}.left{display: flex;width: 200px;background:red;margin:5px;}@media (max-width: 640px){.left{display: none;}}.right{display: flex;flex: 1;background:blue;margin:5px;}</style>
</head>
<body><div class="container"><div class="left">这里是一些不重要的内容，比如友情链接、广告</div><div class="right">这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。</div></div>
</body>
</html>

响应式demo2

改变viewport

<meta name="viewport" content="width=320">

写个脚本，动态适配

<script>window.innerWidth;
</script>

换单位：rem
1rem=16px 可以取近似。rem在布局要求非常精确的场景下要谨慎使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>responsive</title><style>html{font-size: 20px;}.container{margin:0 auto;max-width:800px;border:1px solid black;}.intro{display: inline-block;width:9rem;height:9rem;line-height: 9rem;text-align: center;border-radius: 4.5rem;border:1px solid red;margin:.3rem;}@media (max-width: 375px){html{font-size:24px;}}@media (max-width: 320px){html{font-size:20px;}}@media (max-width: 640px){.intro{margin:.3rem auto;display: block;}}</style>
</head>
<body><div class="container"><div class="intro">介绍1</div><div class="intro">介绍2</div><div class="intro">介绍3</div><div class="intro">介绍4</div></div>
</body>
</html>

国内大部分用float布局。使用起来麻烦不好用，但是适配性好。
苹果用的flexbox。

CSS面试真题

  1. 实现两栏（三栏）布局的方法
    表格布局
    float + margin布局
    inline-block
    flexbox布局
  2. position:absolute/fixed有什么区别
    前者相对最近的absoluter/relative进行定位
    后者相对屏幕（viewport）
  3. display: inline-block的间隙
    原因： 字符间距
    解决： 消灭字符或者消灭间距
  4. 如何清除浮动
    为什么清除浮动： 浮动元素布局的时候不占父元素的空间，有可能浮动元素会超出父元素，对其它元素产生影响，因此父元素需要避免浮动元素对其它元素的影响。
    如何清除：
    让盒子负责自己的布局
    overflow: hidden(auto)
    ::after{clear:both}
  5. 如何适配移动端页面
    viewport
    rem/viewport/media query
    设计上：隐藏 折行 自适应

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

相关文章

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 最后是没分的天空盒暂且叫其他天空盒吧,按需下载,喜欢的话请点个赞吧…
阅读更多...
Unity3D制作天空盒

Unity3D制作天空盒

1、下载并导入hdr高动态范围图像资源到Project视图中&#xff0c;然后将图片的“Texture Shape”修改为“Cube”。 2、Project视图中新建一个Material&#xff0c;将“Shader”修改为“Skybox→Cubemap”。 3、将步骤1的图片拖入“Cubemap&#xff08;HDR&#xff09;”的框内。…
阅读更多...
Unity设置天空盒子

Unity设置天空盒子

在游戏开发中&#xff0c;我们会经常有需求是&#xff1a;要设置游戏内的一个天空的环境。 这时就可以使用Unity的天空盒子&#xff0c;来做这样的处理。 天空盒子随着镜头的转向会有不同的纹理显示&#xff0c;但是不会随着镜头的前进或后退而放大或缩小。 基于以上的需求和…
阅读更多...
推荐文章

Copyright @ 2022~2023