CSS学习笔记6——网页布局

news2025/4/4 4:22:07

目录

 一、元素的浮动属性、清除浮动

清除浮动的其他方法 

1、使用空标签清除浮动影响

2、使用overflow属性清除浮动

3、使用伪元素清除浮动影响

原理

overflow属性 

二、元素的定位 

 1、相对定位

2、绝对定位 

​编辑 3、固定定位

z-index层叠等级属性

 一、元素的浮动属性、清除浮动

在CSS布局中，浮动元素会脱离文档流，导致父元素高度塌陷、后续元素布局错乱等问题。 

清除浮动的作用

  1. 防止父元素塌陷：当子元素浮动时，父元素的高度可能无法正确包含浮动的子元素，导致父元素“塌陷”，影响整体布局。清除浮动可以确保父元素能够正确包含浮动的子元素，使其高度正常计算。

  2. 避免影响后续元素布局：浮动元素会脱离正常的文档流，可能会对后续的非浮动元素的布局产生影响，导致页面布局混乱。清除浮动可以避免这种情况，使后续元素能够按照正常的文档流进行布局。

  3. 提高布局的稳定性：在复杂的布局中，浮动元素的不确定性可能导致页面在不同浏览器或设备上显示不一致。清除浮动可以提高布局的稳定性和兼容性。

<style type="text/css">
    .father{                      /*定义父元素的样式*/
        background:#eee;
        border:1px dashed #ccc;
    }
	/* 浅灰色背景，浅灰色虚线边框。 */
    .box01,.box02,.box03{         /*定义box01、box02、box03三个盒子的样式*/
        height:50px;
        line-height:50px;
        background:#FF9;
        border:1px solid #93b7ff;
        margin:15px;
        padding:0px 10px;
		float: left;
    }
	/* 浅黄色背景，蓝色实线边框，高度50像素，文字垂直居中，外边距15像素，内边距左右10像素。 */
    p{                            /*定义段落文本的样式*/
        background:#c1d5ff;
        border:1px dashed #93b7ff;
        margin:15px;
        padding:0px 10px; 
    }
	/* 浅蓝色背景，蓝色虚线边框，外边距15像素，内边距左右10像素。 */
    </style>
    </head> 
    <body>
    <div class="father">
        <div class="box01">box01</div>
        <div class="box02">box02</div>
        <div class="box03">box03</div>
        <p>在山东烟台，全球最大的海上钻井平台“蓝鲸2号”备受瞩目。这个海上“巨无霸”有37层楼高，其甲板有一个足球场那么大。
		它可以在水深超过3000米的海域作业，最大钻井深度15240米。“蓝鲸2号”生产经理程骋刚来这里时，大部分人都是洋面孔，
		如今绝大部分工作人员都是中国面孔，程聘感觉“有一股强大的中国力量在引领海工行业的发展”。</p>
    </div>
</body>

效果展示

未加float属性时

加float属性、未清除浮动影响

清除浮动影响

注意：clear属性只能清除元素左右两侧的影响 ，由于父元素与子元素为嵌套关系，不存在左右位置关系，因此不能使用clear清除子元素浮动对父元素的影响

清除浮动的其他方法 

1、使用空标签清除浮动影响

在需要清除浮动的父元素内部的所有浮动元素之后，添加一个空的块级元素（如<div>），并为其设置clear: both样式。例如：

<div class="container">
    <div class="float-left">Left</div>
    <div class="float-right">Right</div>
    <div style="clear: both;"></div>
</div>

原理

通过添加一个空的块级元素并设置clear: both，可以清除前面所有浮动元素的影响，使父元素能够正确包含这些浮动的子元素，从而恢复父元素的高度，并避免对后续元素的布局产生影响。工作中不建议使用，因为会增加无意义的元素结构。

2、使用overflow属性清除浮动

为父元素设置“overflow:hidden”样式，这个方法可弥补法一的不足

3、使用伪元素清除浮动影响

通过给父元素添加伪元素（如::after），并在伪元素上应用clear: both来清除浮动。

.father::after {
    content: "";
    display: table;
    clear: both;
}
原理

  • 伪元素：::after 是 CSS 中的一个伪元素，用于在元素内容的后面插入生成的内容。在这里，我们使用它来创建一个空的虚拟元素。

  • content: ""：为伪元素提供内容，这里是空字符串，表示生成一个空的虚拟元素。

  • display: table：将伪元素设置为表格显示，这样它可以像表格一样在布局中占据空间。

  • clear: both：清除前面所有浮动元素的影响，使父元素能够正确包含这些浮动的子元素。

<title>使用空标签清除浮动</title>
<style type="text/css">
.father{                              /*没有给父元素定义高度*/
	background:#ccc; 
	border:1px dashed #999; 
 /* overflow: hidden; */
}
/* 浅灰色背景和虚线边框的容器。 */
.box01,.box02,.box03{ 
	height:50px; 
	line-height:50px; 
	background:#f9c; 
	border:1px dashed #999; 
	margin:15px; 
	padding:0px 10px; 
	float:left;                     /* 定义box01、box02、box03三个盒子左浮动*/
}
/* 三个高度为50像素的盒子，背景为浅橙色，带有虚线边框，水平排列在父元素内部。 */
/*.box04{ clear:both;}                 对空标签应用clear:both;*/
</style>
</head> 
<body>
<div class="father">
	<div class="box01">box01</div>
	<div class="box02">box02</div>
	<div class="box03">box03</div>
	<!-- <div class="box04"></div>        在浮动元素后添加空标签-->
</div>
</body>

 效果展示

未设置清除浮动时

设置清除浮动时

overflow属性 

<title>overflow属性</title>
<style type="text/css">
div{
	width:260px;       
	height:176px;       
	background-image: linear-gradient(30deg,#0f0 50%,#ccc 70%,red 80%);
	overflow:scroll;    /*溢出内容呈现在标签框之外*/ 

}
</style>
</head>
<body>
<div>
	当田野染上一层金黄，各种各样的果实摇着铃铛的时候，雨，似乎也像出嫁生了孩子的妇人，显得端庄而又沉静了。
	这时候，雨不大出门。田野上几乎总是金黄的太阳。也许，人们都忘记了雨。成熟的庄稼等待收割，金灿灿的种子需要晒干，
	甚至红透了的山果也希望最后的晒甜。忽然，在一个夜晚，窗玻璃上发出了响声，那是雨，是使人静谧、使人怀想、使人动情的秋雨啊！
	天空是暗的，但雨却闪着光；田野是静的，但雨在倾诉着。顿时，你会产生一脉悠远的情思。
	也许，在人们劳累了一个春夏，收获已经在大门口的时候，多么需要安静和沉思啊！
	雨变得更轻，也更深情了，水声在屋檐下，水花在窗玻璃上，会陪伴着你的夜梦。
	如果你怀着那种快乐感的话，那白天的秋雨也不会使人厌烦。你只会感到更高邈、深远，并让凄冷的雨滴，去纯净你的灵魂，
	而且一定会遥望到一场秋雨后将出现的一个更净美、开阔的大地。
</div>
</body>

 效果展示

1、使用scroll属性值

2、使用auto属性值

3、使用hidden属性值

4、使用visible属性值（默认值）

二、元素的定位 

  1. 静态定位（static）——默认的摆放方式
    就像你把书本自然摆放在书架上，所有书按顺序排列。这是浏览器默认的排列方式，元素会按照HTML代码的先后顺序自然堆叠，不能通过top/left等属性调整位置。

  2. 相对定位（relative）——微调位置
    好比你在墙上贴了一张便签纸，之后觉得位置不够好，可以上下左右移动几厘米。元素会保留原本的位置空间，移动时不会影响其他元素：

  3. 绝对定位（absolute）——精确坐标定位
    像把照片用图钉固定在墙上的某个精确位置。元素会脱离正常文档流，根据最近的已定位祖先元素（非static）进行定位：

  4. 固定定位（fixed）——广告牌式定位
    就像马路边的广告牌，无论你开车走多远它都固定在同一个位置。元素会固定在浏览器窗口的某个位置，不随页面滚动移动：

 1、相对定位

<style type="text/css">
body{ margin:0px; padding:0px; font-size:18px; font-weight:bold;}
.father{
	margin:10px auto;
	width:300px;
	height:300px;
	padding:10px;
	background:#ccc;
	border:1px solid #000;
}
.child01,.child02,.child03{
	width:100px;
	height:50px;
	line-height:50px;
	background:#ff0;
	border:1px solid #000;
	margin:10px 0px;
	text-align:center;
}
/* .child02{
	position:absolute;         /*绝对定位*/
	left:150px;                 /*距左边线150px*/
	top:100px;                  /*距顶部边线100px*/
} */

</style>
</head>
<body>
<div class="father">
	<div class="child01">child-01</div>
	<div class="child02">child-02</div>
    <div class="child03">child-03</div>
</div>
</body>

效果展示

未设置相对定位时

设置相对定位时——/* child02相对于页面窗口左边线150像素，上边界100像素*/

2、绝对定位 

<title>子元素依据其父元素进行定位</title>
<style type="text/css">
body{ margin:0px; padding:0px; font-size:18px; font-weight:bold;}
.father{
	margin:10px auto;
	width:300px;
	height:300px;
	padding:10px;
	background:#ccc;
	border:1px solid #000;
	position:relative;          /*相对定位，但不设置偏移量*/
}
.child01,.child02,.child03{
	width:100px;
	height:50px;
	line-height:50px;
	background:#ff0;
	border:1px solid #000;
	border-radius:50px;
	margin:10px 0px;
	text-align:center;
}
/* .child02{
	position:absolute;         /*绝对定位*/
	left:150px;                /*距左边线150px*/
	top:100px;                 /*距顶部边线100px*/
} */
</style>
</head>
<body>
<div class="father">
     <div class="child01">child-01</div>
	 <div class="child02">child-02</div>
     <div class="child03">child-03</div>
</div>
</body>

 效果展示

未设置相对定位时

设置相对定位时——/* 相对于父元素左边线150像素定边线100像素*/

 3、固定定位

<style type="text/css">
body{ margin:0px; padding:0px; font-size:18px; font-weight:bold;}
.father{
	margin:10px auto;
	width:300px;
	height:300px;
	padding:10px;
	background:#ccc;
	border:1px solid #000;
	position:relative;          /*相对定位，但不设置偏移量*/
}
.child01,.child02,.child03{
	width:100px;
	height:50px;
	line-height:50px;
	background:#ff0;
	border:1px solid #000;
	border-radius:50px;
	margin:10px 0px;
	text-align:center;
}
.child02{
	position:fixed;         /*固定定位*/
	left:150px;                /*距左边线150px*/
	top:100px;                 /*距顶部边线100px*/
}
/* 不管窗口大小如何变化，该元素始终显示在浏览器窗口的固定位置 */
/* 相对于父元素左边线150像素定边线100像素*/
</style>
</head>
<body>
<div class="father">
     <div class="child01">child-01</div>
	 <div class="child02">child-02</div>
     <div class="child03">child-03</div>
</div>
</body>

效果展示 

未缩小窗口

缩小窗口——/* 不管窗口大小如何变化，该元素始终显示在浏览器窗口的固定位置 */

z-index层叠等级属性

z-index 就像给元素发「楼层号」

想象你在桌上叠放几张纸：

  1. 默认情况：后放的纸盖住先放的（HTML中后写的元素会覆盖先写的）

  2. 发楼层号：给每张纸写一个数字（z-index值），数字越大楼层越高，就能压住数字小的纸

关键规则：

  • 只对定位元素有效（设置了 position: relative/absolute/fixed 的元素）

  • 数值越大越靠前（z-index: 2 > z-index: 1）

  • 负数会沉到默认层下方（可用于隐藏元素）

  • 同层级比较：若父元素层级低，子元素z-index再高也逃不出这栋"楼"

常见用法：

  • 弹窗覆盖其他内容 → 给弹窗设置高z-index（如9999）

  • 导航栏悬浮 → z-index: 100

  • 轮播图的切换按钮 → 确保按钮在图片上层

避坑提醒：

  1. 像电梯按钮，z-index只在同个「电梯井」（层叠上下文）内比较

  2. 如果父元素有z-index，子元素只能在父元素的「楼层」内调整高低

<title>子元素依据其父元素进行定位</title>
<style type="text/css">
body{ margin:0px; padding:0px; font-size:18px; font-weight:bold;}
.father{
	margin:10px auto;
	width:300px;
	height:300px;
	padding:10px;
	background:#ccc;
	border:1px solid #000;
	position:relative;          /*相对定位，但不设置偏移量*/
	z-index: 1;
}
.child01,.child02,.child03{
	width:100px;
	height:50px;
	line-height:50px;
	background:#ff0;
	border:1px solid #000;
	border-radius:50px;
	margin:10px 0px;
	text-align:center;
}
.child02{
	position:fixed;         /*固定定位*/
	left:150px;                /*距左边线150px*/
	top:100px;                 /*距顶部边线100px*/
	/* z-index: -1; */
}
/* 不管窗口大小如何变化，该元素始终显示在浏览器窗口的固定位置 */
/* 相对于父元素左边线150像素定边线100像素*/
</style>
</head>
<body>
<div class="father">
     <div class="child01">child-01</div>
	 <div class="child02">child-02</div>
     <div class="child03">child-03</div>
</div>
</body>

效果展示

默认z-index时

设置z-index为负数时

设置z-index为正数时

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2323947.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

线程同步——互斥锁

线程同步——互斥锁

线程同步——互斥锁 目录 一、基本概念 二、打印成对出现的字母 三、生产者消费者&#xff08;有限缓冲问题&#xff09; 3.1 基本概念 3.2 代码实现 一、基本概念 互斥锁是一种用于控制对共享资源访问的同步机制。它确保在同一时间内&#xff0c;只有一个线程可以访问被…
阅读更多...
C#实现HTTP服务器：处理文件上传---解析MultipartFormDataContent

C#实现HTTP服务器：处理文件上传---解析MultipartFormDataContent

完整项目托管地址&#xff1a;https://github.com/sometiny/http HTTP还有重要的一块&#xff1a;文件上传。 这篇文章将详细讲解下&#xff0c;前面实现了同一个链接处理多个请求&#xff0c;为了方便&#xff0c;我们独立写了一个HTTP基类&#xff0c;专门处理HTTP请求。 ht…
阅读更多...
leetcoed0044. 通配符匹配 hard

leetcoed0044. 通配符匹配 hard

1 题目&#xff1a;通配符匹配 官方难度&#xff1a;难 给你一个输入字符串 (s) 和一个字符模式 ( p ) &#xff0c;请你实现一个支持 ‘?’ 和 ‘*’ 匹配规则的通配符匹配&#xff1a; ‘?’ 可以匹配任何单个字符。 ‘*’ 可以匹配任意字符序列&#xff08;包括空字符序…
阅读更多...
蓝桥杯嵌入式第十二届程序设计题

蓝桥杯嵌入式第十二届程序设计题

一、题目概览 设计一个小型停车计费系统 二、分模块实现 1、LCD void disp_proc() {if(view0){char text[30];sprintf(text," Data");LCD_DisplayStringLine(Line2,(uint8_t *)text);sprintf(text," CNBR:%d ",Cnum);LCD_DisplayStri…
阅读更多...
python多态、静态方法和类方法

python多态、静态方法和类方法

目录 一、多态 二、静态方法 三、类方法 一、多态 多态&#xff08;polymorphism&#xff09;是面向对象编程中的一个重要概念&#xff0c;指的是同样的方法调用可以在不同的对象上产生不同的行为。在Python中&#xff0c;多态是通过方法的重写&#xff08;override&#x…
阅读更多...
DTMF从2833到inband的方案

DTMF从2833到inband的方案

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 之前的文章中介绍过通过dialplan拨号计划配置的方法&#xff0c;实现2833到inband的转换&#xff0c;但是实际生产环境中的场景会更复杂&#xff0c;无法预先在dialplan中设置好相关参数和函数。 环境 CentOS 7.9 fr…
阅读更多...
在Vue 3 + TypeScript + Vite 项目中安装和使用 SCSS

在Vue 3 + TypeScript + Vite 项目中安装和使用 SCSS

在Vue 3 TypeScript Vite 项目中安装和使用 SCSS 1、安装 SCSS 的相关依赖 npm install sass --save-dev2、配置 Vite 对于 Vue 3&#xff0c;Vite 已经内置了对 SCSS 的支持&#xff0c;通常不需要额外的配置。但是&#xff0c;如果需要自定义配置&#xff0c;可以在路径…
阅读更多...
Uni-app入门到精通：tabBar节点实现多页面的切换

Uni-app入门到精通：tabBar节点实现多页面的切换

tabBar节点用于实现多页面的切换。对于一个多tabBar应用&#xff0c;可以通过tabBar节点配置项指定一级导航栏&#xff0c;以及tabBar切换时显示的对应页面。在pages.json中提供tabBar节点配置&#xff0c;不仅是为了方便快速开发导航&#xff0c;更重要的是提示App平台和小程序…
阅读更多...
运筹说 第134期 | 矩阵对策的解法

运筹说 第134期 | 矩阵对策的解法

上一期我们了解了矩阵对策的基本理论&#xff0c;包含矩阵对策的纯策略、矩阵对策的混合策略和矩阵对策的基本定理。 接下来小编将为大家介绍矩阵对策的解法&#xff0c;包括图解法、方程组法和线性规划法三种经典方法。 01 图解法 本节首先介绍矩阵对策的图解法&#xff0c;…
阅读更多...
3. 轴指令（omron 机器自动化控制器）——＞MC_CamOut

3. 轴指令（omron 机器自动化控制器）——＞MC_CamOut

机器自动化控制器——第三章 轴指令 15 MC_CamOut变量▶输入变量▶输出变量▶输入输出变量 功能说明▶时序图▶指令的中止▶重启运动指令▶多重启动运动指令▶异常 MC_CamOut 结束通过输入参数指定的轴的凸轮动作 指令名称FB/FUN图形表现ST表现MC_CamOut解除凸轮动作FBMC_Cam…
阅读更多...
TF32 与 FP32 的区别

TF32 与 FP32 的区别

TF32&#xff08;Tensor Float 32&#xff09;与FP32&#xff08;单精度浮点数&#xff09;是两种用于深度学习和高性能计算的浮点格式&#xff0c;其核心区别体现在精度、性能优化和应用场景上。以下是两者的详细对比分析&#xff1a; 一、位宽与结构差异 FP32的位宽结构 FP32…
阅读更多...
【大模型】视觉语言模型：Qwen2.5-VL的使用

【大模型】视觉语言模型：Qwen2.5-VL的使用

官方github地址&#xff1a;https://github.com/QwenLM/Qwen2.5-VL 目录 Qwen家族的最新成员&#xff1a;Qwen2.5-VL 主要增强功能 模型架构更新 快速开始 使用Transformers聊天 Docker Qwen家族的最新成员&#xff1a;Qwen2.5-VL 主要增强功能 强大的文档解析功能&am…
阅读更多...
测试用例与需求脱节的修复方案

测试用例与需求脱节的修复方案

测试用例与需求脱节的问题可通过明确需求定义、加强需求追踪、建立有效沟通机制进行修复。其中&#xff0c;加强需求追踪尤为关键&#xff0c;能确保测试用例与实际需求的精确匹配&#xff0c;避免资源浪费和测试效果不佳。据行业研究&#xff0c;约70%的软件缺陷源于需求管理不…
阅读更多...
【Unity】 鼠标拖动物体移动速度跟不上鼠标，会掉落

【Unity】 鼠标拖动物体移动速度跟不上鼠标，会掉落

错误示范&#xff1a; 一开始把移动的代码写到update里去了&#xff0c;发现物体老是掉(总之移动非常不流畅&#xff0c;体验感很差&#xff09; void Update(){Ray ray Camera.main.ScreenPointToRay(Input.mousePosition);if (Physics.Raycast(ray, out RaycastHit hit, M…
阅读更多...
VLAN 高级特性

VLAN 高级特性

VLAN Access 类型端口&#xff1a;只能属于 1 个 VLAN&#xff0c;发出数据时只能根据 PVID 剥离一个 VLAN Tag 入方向&#xff1a;针对没有 tag 的数据包打上 PVID 的 tag出方向&#xff1a;将 tag 为本接口 PVID 的数据包去掉 tag&#xff0c;发出数据。&#xff08;只有在与…
阅读更多...
学习中学习的小tips（主要是学习苍穹外卖的一些学习）

学习中学习的小tips（主要是学习苍穹外卖的一些学习）

目录 架构的细分 使用实体类来接收配置文件中的值 webMvcConfig类&#xff1a; jwt令牌 管理端的拦截器&#xff1a; JwtProperties&#xff1a; JwtTokenAdminInterceptor &#xff1a; 对密码加密操作 Redis&#xff1a; 分页查询 整体思想 为什么动态 SQL 推荐传实体…
阅读更多...
【极速版 -- 大模型入门到进阶】LORA：大模型轻量级微调

【极速版 -- 大模型入门到进阶】LORA：大模型轻量级微调

文章目录 &#x1f30a; 有没有低成本的方法微调大模型&#xff1f;&#x1f30a; LoRA 的核心思想&#x1f30a; LoRA 的初始化和 r r r 的值设定&#x1f30a; LoRA 实战&#xff1a;LoraConfig参数详解 论文指路&#xff1a;LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE M…
阅读更多...
线程同步——读写锁

线程同步——读写锁

Linux——线程同步 读写锁 目录 一、基本概念 1.1 读写锁的基本概念 1.2 读写锁的优点 1.3 读写锁的实现 1.4 代码实现 一、基本概念 线程同步中的读写锁&#xff08;Read-Write Lock&#xff09;&#xff0c;也常被称为共享-独占锁&#xff08;Shared-Exclusive Lock&a…
阅读更多...
邪性！Anaconda安装避坑细节Windows11

邪性！Anaconda安装避坑细节Windows11

#工作记录 最近不断重置系统和重装Anaconda&#xff0c;配置的要累死&#xff0c;经几十次意料之外的配置状况打击之后&#xff0c;最后发现是要在在Anaconda安装时&#xff0c;一定要选“仅为我安装”这个选项&#xff0c;而不要选“为所有用户安装”这个选项。 选“仅为我安…
阅读更多...
【大模型】激活函数之SwiGLU详解

【大模型】激活函数之SwiGLU详解

文章目录 1. Swish基本定义主要特点代码实现 2. GLU (Gated Linear Unit)基本定义主要特点代码实现 3. SwiGLU基本定义主要特点代码实现 参考资料 SWiGLU是大模型常用的激活函数&#xff0c;是2020年谷歌提出的激活函数&#xff0c;它结合了Swish和GLU两者的特点。SwiGLU激活函…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023