韩顺平_php从入门到精通_视频教程_第19讲_网站推荐_定位_学习札记_源代码图解_PPT文档整理
韩顺平_php从入门到精通_视频教程_第19讲_网站推荐_定位_学习笔记_源代码图解_PPT文档整理
书再多,视频再多,都不如自己动手写一个项目,就会有心得。
对于开源项目,跑起来,看懂,并二次修改。模仿 -------->创新,抓核心。
CSS核心内容――定位
定位―基本概念
CSS定位(Positioning)属性允许你对元素进行定位。Positioning属性值:
static(默认值):元素框正常生成。块级元素生成一个矩形框,作为文档流/标准流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative:元素框偏离某个距离。元素仍保持其为定位前的形状,它原本所占的空间仍保留,从这一角度看,好像该元素仍然在文档流/标准流一样。
absolute:元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed:元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身。
这几个定位,真正要搞明白,并不是特别容易的事情,借助案例来明白。
常见的定位有四种
1.stacit 定位(默认值)
2.relative相对定位(相对谁)
3.absolute 绝对定位(相对于谁参照呢)
4.fixed固定定位
(1)静态定位不讲了,前面讲的都是静态定位。
(2)定位――相对定位:relative

内容2虽然脱离了它原有的文档流,但是它的位置不希望被别人占用。我走了,但是位置还是我的,停薪留职。

改变内容2位置
relative相对谁呢,相对它原先应该在的位置,进行重新定位。

这里我们可以看出,所谓相对定位是指,相对该元素应当显示的左上角重新定位,虽然它脱离了标准流,但是它的空间,不能被占用。
relative.html
<link rel="stylesheet" type="text/css" href="relative.css"> <title>relative 相对定位</title> <div class="div1">内容1</div> <div class="div1" id="spe">内容2</div> <div class="div1">内容3</div> <div class="div1">内容4</div>
relative.css
.div1{ width: 70px; height: 30px; background: silver; float: left; margin-left: 5px; } #spe{ position: relative; left: 40px; top: 100px; }
(3)定位――绝对定位absolute

===

从上图看,所谓绝对定位是指,对该元素最近的那个脱离了标准流的元素定位,如果没有父元素(或者有父元素,但是父元素没有脱离标准流),则相对body左上角定位。
绝对定位,究竟是对哪个点定位。
absolute.html
<link rel="stylesheet" type="text/css" href="absolute.css"> <title>绝对定位</title> <div class="div1">内容1</div> <div class="div1" id="spe">内容2</div> <div class="div1">内容3</div> <div class="div1">内容4</div>
absolute.css
*{ margin: 0px; padding: 0px; } .div1{ width: 70px; height: 30px; background: silver; float: left; margin-left: 5px; } #spe{ position: absolute; /*绝对定位(究竟对谁)*/ left: 40px; /*left为正,则向右移动*/ top: 100px; /*top为正,则向下移动*/ }
用一个div把内容2包起来,重点讲解“对该元素最近的那个脱离了标准流的元素定位”
absolute2.html
<link rel="stylesheet" type="text/css" href="absolute2.css"> <title>绝对定位2</title> <div class="div1">内容1</div> <div class="div1">内容3</div> <div class="div1">内容4</div> <div class="div2">测试 <div class="div1" id="spe">内容2</div> </div>
absolute2.css
*{ margin: 0px; padding: 0px; } .div1{ width: 70px; height: 30px; background: silver; float: left; margin-left: 5px; } #spe{ position: absolute;/*绝对定位(究竟对谁)*/ left: 40px; /*left为正,则向右移动*/ top: 100px; /*top为正,则向下移动*/ } .div2{ width: 200px; height: 150px; background: pink; float: left; }
(1)把内容2被div2包起来,并把原来的内容2删除,则如下图所示,代码如上。因为div2还是标准流,所以内容2还是相对body左上角定位。

(2)让div2脱离标准流,则显示如下图所示。那么内容2不再按照body来定位,而是按照包含它的div2来进行定位,因为div2是距离内容2最近的脱离了标准流的元素。“对该元素最近的那个脱离了标准流的元素定位”
相应的div2的css属性修改如下
.div2{ position: relative; left: 100px; top: 100px; width: 200px; height: 150px; background: pink; float: left; }

(4)定位――fixed定位(绝绝对对)
把内容2修改为绝对定位,则显示如下图所示。不管谁包我还是不包我,我永远对视窗的左上角,body的左上角定位,绝绝对对。

相应的内容2的css属性修改如下
#spe{ /*position: absolute;*/ /*绝对定位(究竟对谁)*/ position: fixed; left: 40px; /*left为正,则向右移动*/ top: 100px; /*top为正,则向下移动*/ }
所谓fixed定位就是不管怎样,总是以视窗的左上角定位。
注意:left和top对static没有效果的,★★★static静态定位的左右移动用的margin★★★
z-index
设置对象的层叠顺序

z-index的值越小,越在下面
用于设置对象(div)显示时候,层叠的属性,z-index值越小,则越在下层显示。
韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

许多用户在选择智能手表的时候都会选择的华为的品牌,其中华为GT3pro和GT4都是非常热门的选择,不少用户都很好奇华为GT3pro和GT4有什么区别,下面就就给大家介绍一下二者。华为GT3pro和GT4有什么区别一、外观GT4:46mm和41mm,材质是玻璃表镜+不锈钢机身+高分纤维后壳。GT3pro:46.6mm和42.9mm,材质是蓝宝石玻璃表镜+钛金属机身/陶瓷机身+陶瓷后壳二、健康GT4:采用最新的华为Truseen5.5+算法,结果会更加的精准。GT3pro:多了ECG心电图和血管及安

为什么截图工具在Windows11上不起作用了解问题的根本原因有助于找到正确的解决方案。以下是截图工具可能无法正常工作的主要原因:对焦助手已打开:这可以防止截图工具打开。应用程序损坏:如果截图工具在启动时崩溃,则可能已损坏。过时的图形驱动程序:不兼容的驱动程序可能会干扰截图工具。来自其他应用程序的干扰:其他正在运行的应用程序可能与截图工具冲突。证书已过期:升级过程中的错误可能会导致此issu简单的解决方案这些适合大多数用户,不需要任何特殊的技术知识。1.更新窗口和Microsoft应用商店应用程

css实现div缺一个角的方法:1、创建一个HTML示例文件,并定义一个div;2、给div设置宽高背景色;3、给需要删除一角的div增加一个伪类,将伪类设置成跟背景色一样的颜色,然后旋转45度,再定位到需要去除的那个角即可。

第1部分:初始故障排除步骤检查苹果的系统状态:在深入研究复杂的解决方案之前,让我们从基础知识开始。问题可能不在于您的设备;苹果的服务器可能会关闭。访问Apple的系统状态页面,查看AppStore是否正常工作。如果有问题,您所能做的就是等待Apple修复它。检查您的互联网连接:确保您拥有稳定的互联网连接,因为“无法连接到AppStore”问题有时可归因于连接不良。尝试在Wi-Fi和移动数据之间切换或重置网络设置(“常规”>“重置”>“重置网络设置”>设置)。更新您的iOS版本:

php提交表单通过后,弹出的对话框怎样在当前页弹出php提交表单通过后,弹出的对话框怎样在当前页弹出而不是在空白页弹出?想实现这样的效果:而不是空白页弹出:------解决方案--------------------如果你的验证用PHP在后端,那么就用Ajax;仅供参考:HTML code

前言最近GitHub上有个基于ChatGPTAPI的浏览器脚本,openai-translator,短时间内star冲到了12k,功能上除了支持翻译外,还支持润色和总结功能,除了浏览器插件外,还使用了tauri打包了一个桌面客户端,那抛开tauri是使用rust部分,那浏览器部分实现还是比较简单的,今天我们就来手动实现一下。openAI提供的接口比如我们可以复制以下代码,在浏览器控制台中发起请求,就可以完成翻译//示例constOPENAI_API_KEY="s

div盒模型是一种用于网页布局的模型,它将网页中的元素视为一个个矩形的盒子,这个模型包含了四个部分:内容区域、内边距、边框和外边距。div盒模型的好处是可以方便地控制网页布局和元素之间的间距,通过调整内容区域、内边距、边框和外边距的大小,可以实现各种不同的布局效果,盒模型也提供了一些属性和方法,可以通过CSS和JavaScript来动态地改变盒子的样式和行为。

iframe和div的不同是iframe主要用于引入外部内容,可以加载其他网站的内容或将一个网页分割成多个区域,每个区域有自己的独立的浏览上下文,而div主要用于分割和组织内容的区块,用于布局和样式控制。
