CSS+DIV三种布局方式

article/2025/11/5 13:47:23

在学习了盒模型、块级元素和行内元素得到概念后，我们来说一下CSS的一个比较重要的用途：布局。以前我们学过表格可以起到布局页面的作用，比如布局表单，但实际工作表格的布局通常也仅仅是用来布局表单。绝大多数的模具工作是由CSS+DIV来完成的，因为表格布局 复杂页面时需要频繁的嵌套，代码比较复杂、难以维护，而使用CSS+DIV布局，内容和表现可以分离，代码干净整洁、可读性好、便于维护，并且样式代码可以复用，提高了开发效率，同时分离后美工和网站开发人员也可以协同合作，进一步提高了开发效率和整体网站的质量。

一、 常规流式布局

元素按照自身的常规显示方式显示，有两个特点：
1.元素按照自身HTML元素定义的位置显示（怎么写的怎么显示）
2.元素按照自身的常规显示特性显示
比如块级元素垂直排列，行级元素水平排列。
以前没学布局时，其实是用的就是常规流布局。

二、 浮动（顺便讲解布局步骤）

具体代码：
左浮动 float:left;
右浮动 float:right;

我们知道编程一般都是有套路的，使用CSS+DIV布局也不例外，大体分为以下四步：
布局步骤：
一、画效果图
在纸上先画出我们想要的页面的具体显示的框架。比如我们想要把一个网页分成上中下三个部分。
二、使用DIV进行分割
拿本例来说我们网页整体分为上中下三部分，所以我们可以使用三个div来先大体分割一下该网页.
三、使用CSS来控制DIV布局
使用CSS样式来控制布局的具体宽、高，并使用显著的背景标注，在需要修改时可以清楚的看到该模块。
四、使用以上三步进行细分
在每一模块都要通过以上三步具体划分。

为什么使用DIV分割布局？
我们知道HTML中的每个元素都像一个盒子一样，每个盒子都能容纳其他元素，比如div元素、p元素、h4元素等都能容纳其他元素，那么为什么我们布局的时候要用div容纳其他元素,而不用p元素、h4元素或者其他元素呢？这是因为div元素是最干净的盒子它没有其他的属性，换句话说如果只写div标签而不加任何属性的话，它只是一个没有任何特性的容器，而其他元素比如p元素,它就有自己格外的属性，比如用两个p元素布局，它们之间有空行。如果用h4布局，放在h4里面的文字都被加大了显示了，像p元素、h4元素这些容器如果用来布局的话会影响效果，所以我们使用不加带任何特性的最干净的盒子—–DIV来布局。

示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style>*{margin:0px auto;}#all{text-align: center;}div.logo {width:1300px;height:60px;background-color: yellow;}div.copyright {width:1300px;height:60px;background-color: goldenrod;}div.middle {width:1300px;height: 500px;}div.menu {width:200px;height: 500px;background-color: #E4393C;/*菜单左浮动*/float:left;}div.main {width:1100px;height: 500px;background-color: #bad0ef;/*主题右浮动*/float:right;/*左浮动、右浮动都可以*/float:left;}</style>
</head>
<body><div id="all"><div class="logo">logo</div><div class="middle"><div class="menu">menu</div><div class="main">网站的主体内容</div></div><div class="copyright">bottom</div></div>
</body>
</html>

如果不使用浮动，则块级元素默认是垂直排列，而改为行级元素又无法调整宽高和边距，所以我们采用浮动，来使两个块级元素水平排列。

多类症:不要过多的使用类选择器,这样会造成代码臃肿，可读性差,能使用其他选择器代替的就使用其他选择器

  • 浮动的若干特性
  • 1.框1向右移动
  • 2.框1向左浮动

  • 3.所有三个框向左浮动
    1框1向右移动

    2.框1向左浮动

    3.所有三个框向左浮动

  • 清除浮动

如上图3的“被卡住”的情况，或者我们想要前两个框向左浮动，不想要第三个浮动，可以在第三个框的DIV处加 clear:left; 属性。意思是清除向左浮动的特性，第三个元素直接换行显示。

  • 使用浮动实现水平导航菜单
    示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style>* {margin:0px;}body {font: 12px/150% Arial, Verdana, "宋体";}/*水平导航菜单开始*/.horizontal-ul {list-style: none;margin: 0px;padding: 0px;}.horizontal-ul li {float: left;}.line {color: #ccc;padding: 0px 12px;/*background-color:green;*/}/*水平导航菜单结束*/a:link {text-decoration: none;}a:hover {text-decoration: underline;}.horizontal-ul li a {color: #666;}.horizontal-ul li span {color: #666;}div.horizontal-menu-div {width:1000px;height:auto;background-color:yellow;}</style>
</head>
<body><div class="horizontal-menu-div"><ul class="horizontal-ul"><li><a href="">关于我们</a><span class="line">|</span></li><li><a href="">联系我们</a><span class="line">|</span></li><li><a href="">人才招聘</a><span class="line">|</span></li><li><a href="">商家入驻</a><span class="line">|</span></li><li><a href="">广告服务</a><span class="line">|</span></li><li><a href="">手机京东</a><span class="line">|</span></li><li><a href="">友情链接</a><span class="line">|</span></li><li><a href="">销售联盟</a><span class="line">|</span></li><li><a href="">京东社区</a><span class="line">|</span></li><li><a href="">京东公益</a><span class="line">|</span></li><li><a href="">English Site</a></li></ul></div>
</body>
</html>

三、定位布局

1.静态定位

position:static;
默认值，不写position相当于写上position:static;以前没学定位的时候其实都是静态定位，元素在它原本的位置显示，即使加了top、left等也不起作用。

2.相对定位

相对定位是相对于自身的原始位置进行平移，如果设置position：relative；表示相对定位。
z-index:值越大越在上面
注意：z-index必须加在已经定位的元素上才起作用。

3.绝对定位

子容器相对于父容器的定位，如果没有父容器，则相对于body定位。
position:absolute;
示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin:0;}div.grandpa{width: 100%;height:100%;background-color: gray;position: absolute;}div.father{width:100px;height:100px;top:100px;left:100px;position: absolute;background-color: blue;}div.son{width:50px;height: 50px;right: 0px;bottom:0px;position: absolute;background-color: green;}</style>
</head>
<body><div class="grandpa"><div class="father"><div class="son"></div></div></div></body>
</html>

4.fixed固定定位

也是相对定位，相对于窗口的
position:fixed;

那么我们什么时候用相对定位，什么时候用绝对定位呢？
一般顶层容器我们使用相对定位，子容器使用绝对定位，这样的好处是父容器移动时，子容器能够跟着父容器移动，而不用再调整子容器的位置。


http://chatgpt.dhexx.cn/article/3MTI3IXZ.shtml

相关文章

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;但是不会随着镜头的前进或后退而放大或缩小。 基于以上的需求和…
阅读更多...
unity 天空盒有接缝

unity 天空盒有接缝

当我们使用立方体天空盒时&#xff0c;有时会出现盒子的接口处有缝隙的情况 类似于这种 有一条明显的裂缝 一般来说有两种可能的情况 情况1 我们需要把所用天空盒图片的wrapMode设置为clamp模式&#xff0c;注意六个图片都要改&#xff0c;设置完后记得Apply一下 情况二 …
阅读更多...
推荐文章

Copyright @ 2022~2023