CSS_定位_网页布局总结_元素的显示与隐藏
目录
目标
1. 定位
1.1 为什么需要定位
1.2 定位组成
1. 定位模式
2. 边偏移
1.3 静态定位 static(了解)
1.4 相对定位 relative(重要)
1.5 绝对定位 absolute(重要)
1.6 子绝父相的由来(重要)
1.7 固定定位 fixed (重要)
1.8 粘性定位 sticky(了解)
1.9 定位的总结
1.10 定位叠放次序 z-index
1.11 定位的拓展
1. 绝对定位的盒子居中
2. 定位特殊特性
3. 脱标的盒子不会触发外边距塌陷
4. 绝对定位(固定定位)会完全压住盒子
2. 综合案例
3. 网页布局总结
4. 元素的显示与隐藏
4.1 display 属性
4.2 visibility 可见性
4.3 overflow 溢出
5. 综合案例
总结一下吧~本章对我的收获巨大,希望对你也是!!!到此,CSS基础部分也算是全部更新完成了,后门进入进阶部分~
目标
1.能够说出为什么要用定位
2.能够说出定位的4种分类
3.能够说出4种定位各自的特点
4.能够说出为什么常用子绝父相布局
5.能够写出淘宝轮播图布局
6.能够说出显示隐藏的2种方式以及区别
1. 定位
1.1 为什么需要定位
1.2 定位组成
定位 = 定位模式 + 边偏移 。
1. 定位模式
值 | 语义 |
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
2. 边偏移
边偏移属性 | 示例 | 描述 |
top | top:80px | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom | bottom:80px | 底部偏移量,定义元素相对于其父元素下边线的距离 |
left | left:80px | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | right:80px | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
1.3 静态定位 static(了解)
选择器 { position: static; }
1.4 相对定位 relative(重要)
选择器 { position: relative; }
相对定位的特点:(务必记住)
1. 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。2. 原来 在标准流的 位置 继续占有,后面的盒子仍然以标准流的方式对待它。因此,相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。
1.5 绝对定位 absolute(重要)
选择器 { position: absolute; }
1. 如果 没有祖先元素 或者 祖先元素没有定位 ,则以浏览器为准定位(Document 文档)。
2. 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。
3. 绝对定位 不再占有原先的位置 。(脱标)
1.6 子绝父相的由来(重要)
为了让蓝盒子飘起来,而且只能再粉色盒子内移动,那么蓝色盒子就只能以粉色盒子为定位进行移动,那么蓝色盒子就是一个绝对定位(absolution) ,那么粉色盒子就必须也要拥有定位,因为蓝色盒子以粉色盒子为标准。又为了不让绿色盒子会占用粉色盒子的位置,那么粉色盒子就只能是相对定位(relative),因为只有这样,粉色盒子原来的位置才不会被占用,还是属于粉色盒子自己的位置。
1.7 固定定位 fixed (重要)
选择器 { position: fixed; }
1.8 粘性定位 sticky(了解)
选择器 { position: sticky; top: 10px; }
1.9 定位的总结
定位模式 | 是否脱标 | 移动位置 | 是否常用 |
static静态定位 | 否 | 不能使用边偏移 | 很少 |
relative相对定位 | 否(占有位置) | 相对自身位置移动 | 常用 |
absolute绝对定位 | 是(不占有位置) | 带有定位的父级 | 常用 |
fixed固定定位 | 是(不占有位置) | 浏览器可视区 | 常用 |
sticky粘性定位 | 否(占有位置) | 浏览器可视区 | 很少用 |
1.10 定位叠放次序 z-index
选择器 { z-index: 1; }
1.数值可以是正整数、负整数或 0, 默认是 auto,数值越大,盒子越靠上2. 如果属性值相同,则按照书写顺序,后来居上3. 数字后面不能加单位4. 只有定位的盒子才有 z-index 属性
1.11 定位的拓展
1. 绝对定位的盒子居中
2. 定位特殊特性
1. 行内元素添加绝对或者固定定位,可以直接设置高度和宽度。2. 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。
3. 脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题
4. 绝对定位(固定定位)会完全压住盒子
浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)
但是绝对定位(固定定位) 会压住下面标准流所有的内容。
浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素
2. 综合案例
1. 大盒子我们类名为: tb-promo 淘宝广告2. 里面先放一张图片。3. 左右两个按钮 用链接就好了。 左箭头 prev 右箭头 next4. 底侧小圆点ul 继续做。 类名为 promo-nav
<!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>* {padding: 0;margin: 0;}li {list-style: none;}.tb-promo {position: relative;width: 520px;height: 280px;background-color: pink;margin: 100px auto;}.tb-promo img {width: 520px;height: 280px;}.prev {position: absolute;top: 50%;left: 0;margin-top: -15px;/* 加了绝对定位的盒子可以直接设置高度和宽度 */width: 20px;height: 30px;background: rgba(0, 0, 0, .3);text-decoration: none;text-align: center;line-height: 30px;color: #fff;/* 将矩形的右上角和右下角改为圆角 */border-top-right-radius: 15px;border-bottom-right-radius: 15px;}.next {position: absolute;top: 50%;right: 0;margin-top: -15px;/* 加了绝对定位的盒子可以直接设置高度和宽度 */width: 20px;height: 30px;background: rgba(0, 0, 0, .3);text-decoration: none;text-align: center;line-height: 30px;color: #fff;/* 将矩形的右上角和右下角改为圆角 */border-top-left-radius: 15px;border-bottom-left-radius: 15px;}.promo-nav {position: absolute;bottom: 15px;left: 50%;margin-left: -35px;width: 70px;height: 13px;background: rgba(225, 225, 225, .3);border-radius: 7px;}.promo-nav li {float: left;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;margin: 3px;}.promo-nav .selected {background-color: #ff5000;}</style>
</head><body><div class="tb-promo"><img src="images/tb.jpg" alt=""><!-- 左侧按钮箭头 --><a href="#" class="prev"><</a><a href="#" class="next">></a><ul class="promo-nav"><li class="selected"></li><li></li><li></li><li></li><li></li></ul></div>
</body></html>
3. 网页布局总结
可以让盒子上下排列或者左右排列, 垂直的块级盒子显示就用标准流布局。
可以让多个块级元素一行显示或者左右对齐盒子, 多个块级盒子水平显示就用浮动布局。
定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示。 如果元素自由在某个盒子内移动就用定位布局。
4. 元素的显示与隐藏
4.1 display 属性
4.2 visibility 可见性
4.3 overflow 溢出
属性值 | 描述 |
visible | 不剪切内容,也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管超出的内容,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
5. 综合案例
<!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>.tudou {position: relative;width: 444px;height: 320px;background-color: pink;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.mask {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .3) url(images/arr.png) no-repeat center;}/* 当我们鼠标经过tudou的盒子就显示出 里面 的遮罩层 */.tudou:hover .mask {display: block;}</style>
</head><body><div class="tudou"><div class="mask"></div><img src="images/tudou.jpg" alt=""></div>
</body></html>
总结一下吧~本章对我的收获巨大,希望对你也是!!!到此,CSS基础部分也算是全部更新完成了,后门进入进阶部分~
相关文章:
CSS_定位_网页布局总结_元素的显示与隐藏
目录 目标 1. 定位 1.1 为什么需要定位 1.2 定位组成 1. 定位模式 2. 边偏移 1.3 静态定位 static(了解) 1.4 相对定位 relative(重要) 1.5 绝对定位 absolute(重要) 1.6 子绝父相的由来ÿ…...
内存映射区
存储映射区介绍 存储映射I/O (Memory-mapped I/O) 使一个磁盘文件与存储空间中的一个缓冲区相映射。从缓冲区中取数据,就相当于读文件中的相应字节;将数据写入缓冲区,则会将数据写入文件。这样,就可在不使用read和write函数的情况…...
es安装拼音分词后Kibana出现内存错误
出现错误 今天在安装es的拼音分词器,并重启es容器后,登录Kibana无法使用,查询日志发现如下报错 Waiting until all Elasticsearch nodes are compatible with Kibana before starting saved objects migrations... | typelog timestamp2024…...
mysql 字符串拼接文本并换行
描述: 拼接字符串文本,文本需要换行 函数: concate(‘A串’,char(10),‘B串’),其中char(10)代表换行 案例: select concat(问题一:组织错误,char(10),问题二࿱…...
IIC学习总结
一、基本概念 IIC(Inter-Integrated Circuit)其实是IICBus简称,所以中文应该叫集成电路总线,它是一种串行通信总线,使用多主从架构。 二、模块结构 I2C串行总线一般有两根信号线,一根是双向的数据线SDA&…...
【案例学习】暴力破解攻击(Brute Force Attack)
### 案例与影响 暴力破解攻击在历史上曾导致多次重大安全事件,特别是在用户数据泄露和账户被盗的案例中。随着计算能力的提升和密码管理技术的进步,暴力破解的威胁虽然有所减弱,但仍需警惕,特别是在面对高价值目标时。 【故事一…...
Python学习之基本语法
1.列表用[],元祖用(),字典用{},对字典中不存在的键赋值,将进行字典的添加操作 2.Python中,用引号括起的都是字符串,其中的引号可以是单引号,也可以是双引号,这种灵活性使得不用使用…...
QT QDialog::exec()调用时清除部件所有焦点
最近在做项目时,遇到一个问题:在统信UOS系统编写的QT程序,其中进入某些页面时,或者显示模态窗时,按钮都会有一个焦点框,这个是不允许的,于是乎,开始了清理焦点的旅途。 一、清理QDia…...
uni-app @click.stop @click.stop.native均不生效
原因就是用了nvue导致的 vue等其他环境都可以 解决:e.stopPropagation() click"goExecute($event)" goExecute(e) {e.stopPropagation()}, uniApp官方真的是一坨大翔,不仅社区不维护,文档也写的跟粑粑一样,自创的nv…...
数据可视化工具深入学习:Seaborn 与 Plotly 的详细教程
数据可视化工具深入学习:Seaborn 与 Plotly 的详细教程 数据可视化是数据分析中不可或缺的一部分,能够有效地帮助我们理解数据、发现模式和传达信息。在众多可视化工具中,Seaborn 和 Plotly 是两个非常流行且强大的库。本文将深入探讨这两个…...
camera和lidar外参标定
雷达和相机的外参标定(外部参数标定)指的是确定两者之间的旋转和平移关系,使得它们的坐标系可以对齐。 文章目录 无目标标定livox_camera_calibdirect_visual_lidar_calibration 有目标标定velo2cam_calibration 无目标标定 livox_camera_ca…...
Redis慢查询分析优化
文章目录 一、定义二、慢查询参数配置三、慢查询日志四、排查步骤五、Redis变慢原因 一、定义 在Redis执行时耗时超过某个阈值的命令,称为慢查询。 慢查询日志帮助开发和运维人员定位系统存在的慢操作。慢查询日志就是系统在命令执行前后计算每条命令的执行时间&…...
ETL处理全流程
ETL代表提取Extraction、转换Transform、加载Load——这个过程涉及从各种来源提取数据,将其转换为一致的格式,并将其加载到目标数据库或数据仓库中。这是数据集成和分析的一个重要步骤,因为它确保数据准确、可靠,并准备好进一步处…...
美畅物联丨掌握Wireshark:GB28181协议报文分析实战指南
Wireshark,一款在网络安全与协议分析领域享有盛誉的网络嗅探器,凭借其强大的功能集、直观的图形用户界面以及广泛的跨平台兼容性,已成为众多开发者不可或缺的得力助手。其开源特性吸引了大量开发者的积极参与,不断推动其功能的完善…...
【python】OpenCV—WaterShed Algorithm
文章目录 1、功能描述2、代码实现3、完整代码4、效果展示5、涉及到的库函数5.1、cv2.pyrMeanShiftFiltering5.2、cv2.morphologyEx5.3、cv2.distanceTransform5.4、cv2.normalize5.5、cv2.watershed 6、更多例子7、参考 1、功能描述 基于分水岭算法对图片进行分割 分水岭分割…...
CSS flex布局- 最后一个元素占满剩余可用高度转载
效果图 技术要点 height父元素必须有一个设定的高度flex-grow: 1 flex 盒子模型内的该元素将会占据父容器中剩余的空间F12检查最后一行的元素,高度就已经改变了;...
Camp4-L1:XTuner 微调个人小助手认知
书生浦语大模型实战营第四期-XTuner 微调个人小助手认知 教程链接:https://github.com/InternLM/Tutorial/blob/camp4/docs/L1/XTuner/README.md任务链接:https://github.com/InternLM/Tutorial/blob/camp4/docs/L1/XTuner/task.md提交链接:…...
Qt:语言家视图
1.一不小心将qt语言家点成这样 2.点击查看->视图 3.效果...
【Paper Note】利用Boundary-aware Attention边界感知注意力机制增强部分伪造音频定位
利用Boundary-aware Attention边界感知注意力机制增强部分伪造音频定位 摘要核心模块什么是边界?什么是边界特征? 写作背景解决的问题 方法1. 特征提取使用预训练好的自监督学习模型进行前端特征提取Attentive poolingQ:为什么使用Attentive …...
海外共享奶牛牧场投资源码-理财金融源码-基金源码-共享经济源码
新版海外共享奶牛牧场投资源码/理财金融源码/基金源码/共享经济源码...
iOS静态库(.a)及资源文件的生成与使用详解(OC版本)
引言 iOS静态库(.a)及资源文件的生成与使用详解(Swift版本)_xcode 合并 .a文件-CSDN博客 在前面的博客中我们已经介绍了关于iOS静态库的生成步骤以及关于资源文件的处理,在本篇博客中我们将会以Objective-C为基础语言…...
Python自动化:关键词密度分析与搜索引擎优化
在数字营销领域,搜索引擎优化(SEO)是提升网站可见性和吸引有机流量的关键。关键词密度分析作为SEO的一个重要组成部分,可以帮助我们理解特定关键词在网页内容中的分布情况,从而优化网页内容以提高搜索引擎排名。本文将…...
苏州金龙新V系客车创新引领旅游出行未来
10月25日,为期三天的“2024第六届旅游出行大会”在风景秀丽的云南省丽江市落下帷幕。本次大会由中国旅游车船协会主办,全面展示了中国旅游出行行业最新发展动态和发展成就,为旅游行业带来全新发展动力。 在大会期间,备受瞩目的展车…...
linux:DNS服务
DNS简介: DNS系统使用的是网络的查询,那么自然需要有监听的port。DNS使用的是53端口, 在/etc/services(搜索domain)这个文件中能看到。通常DNS是以UDP这个较快速的数据传输协议来查 询的,但是没有查询到完…...
传奇架设好后创建不了行会,开区时点创建行会没反应的解决办法
传奇架设好后,测试了版本,发现行会创建不了,按道理说一般的版本在创建行会这里不会出错的,因为这是引擎自带的功能。 建立不了行会虽然说问题不大,但也不小,会严重影响玩家的游戏体验,玩游戏为的…...
【小白学机器学习28】 统计学脉络+ 总体+ 随机抽样方法
目录 参考书,学习书 0 统计学知识大致脉络 1 个体---抽样---整体 1.1 关于个体---抽样---整体,这个三段式关系 1.2 要明白,自然界的整体/母体是不可能被全部认识的 1.2.1 不要较真,如果是人为定义的一个整体,是可…...
安全研究 | 不同编程语言中 IP 地址分类的不一致性
作为一名安全研究人员,我分析了不同编程语言中 IP 地址分类 的行为。最近,我注意到一些有趣的不一致性,特别是在循环地址和私有 IP 地址的处理上。在这篇文章中,我将分享我对此问题的观察和见解。 设置 我检查了多种编程语言&am…...
小小的表盘还能玩出这么多花样?华为手表这次细节真的拉满
没想到小小的表盘还能玩出这么多花样?华为这次细节真的拉满!还有没有你不知道的神奇玩法? 情绪萌宠,心情状态抬腕可见 好心情就像生活馈赠的糖果,好的心情让我们遇到困难也不惧打击!HUAWEI WATCH GT 5情绪…...
trueNas 24.10 docker配置文件daemon.json无法修改(重启被覆盖)解决方案
前言 最近听说truenas的24.10版本开放docker容器解决方案放弃了原来难用的k3s,感觉非常巴适,就研究了一下,首先遇到无法迁移老系统应用问题比较好解决,使用sudo登录ssh临时修改daemon.json重启docker后进行docker start 容器即可…...
数字孪生,概念、应用与未来展望
随着科技的飞速发展,数字化已经成为各行各业的发展趋势,在这个过程中,数字孪生作为一种新兴的技术,逐渐引起了人们的关注,本文将对数字孪生的概念、应用以及未来展望进行详细介绍。 数字孪生的概念: 数字孪…...
杭州北京网站建设/怎么接游戏推广的业务
目前市面上的网贷产品可谓是多得数不过来,相信撸友们也曾挑得花眼,光是在借款专家就有这各式各样的机构。可是机构那么多,门槛也很低,偏偏还是有朋友经常被拒借不到款,又或者额度根本不够花。那到底是什么原因影响了通…...
律师事务所网站建设重要性/线上运营推广方案
双y轴坐标轴图 今天利用matplotlib绘图,想要完成一个双坐标格式的图。 figplt.figure(figsize(20,15)) ax1fig.add_subplot(111) ax1.plot(demo0719[TPS],b-,labelTPS,linewidth2) ax2ax1.twinx()#这是双坐标关键一步 ax2.plot(demo0719[successRate]*100,r-,labels…...
如何为网站引流/2024年阳性最新症状
使用vue-echarts船舰的图标组件,图可以显示,标题不显示是怎么回事,官方的例子import echarts/lib/chart/line// import echarts/lib/component/polarexport default {data(){return{datas:{title: {left: center,text: 折线图,},xAxis: {type…...
插头 东莞网站建设/海南百度推广总代理商
今天的一个笔试题:给定一个字符串,判断它是否回文,只考虑数字字母字符并忽略大小写 笔试的时候写了代码,但是写的不好,回来再写一次 思路就是先防范,然后将这个字符串转换为小写,定义两个指针…...
网站设计项目书/链接平台
【单选题】采用SWOT分析方法对企业内外部环境进行综合分析。其中,S表示( )。【填空题】油气及其蒸气具有毒性表现在( )、( )、( )。 (5.0分)【单选题】多年不见的朋友,在自己的脑海中,印象最深的是临别时的情景。这体现的是( )。【单选题】下列关于智力与创造力之间关系的描述中…...
猪八戒网站做软件/做网络推广一个月的收入
解决您scrapy安装不上的问题(小白)qq_430973571482018-11-30vs2015安装时提示“安装包丢失或损坏”解决办法Lee41272687712017-11-18linux安装软件缺包解决办法Daniellf16702012-10-01如何下载VS2015离线安装包smstong178832015-09-14python安装包方法失效或缺失问题Sinsa11021…...