html 图片position,十步图解CSS的position

2023-10-08 13:50

本文主要是介绍html 图片position,十步图解CSS的position,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行。今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的“position”中的“static、relative、absolute、float”使用,觉得蛮有意思的。整理了一下贴上来与大家一起分享。希望大家能喜欢。

在图解这十个过程之前,我将实例的代码放上来,好让大家一个实体参考:

HTML Markup

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.

id = div-1c

id = div-after

CSS Code

简单的运用一点样式:

#example {

float: right;

}

#example p {

margin: 0 0.25em;

padding: 0.25em 0;

}

#div-before,

#div-after {

background-color: #88d;

color: #000;

}

#div-1 {

width: 400px;

background-color: #000;

color: #fff;

}

#div-1-padding {

padding: 10px;

}

#div-1a {

background-color: #d33;

color: #fff;

}

#div-1b {

background-color: #3d3;

color: #fff;

}

#div-1c {

background-color: #33d;

color: #fff;

}

初步效果:

55a31232d6f05b413da5d370c9678b04.png

为了后面能更好的了解相关知识点,我特将此例的DOM草图画出来:

496fc1b2eceba12b810cf31e0b6cd20b.png

上面的DOM图,我想大家一定非常容易的理解,下面就一起来主要看position的使用。

第一步:position: static

在CSS中所有元素的“position”属性的默认值都是“static”,因为不需要显式的为每个元素设置“position:static”。此时大家会问,那这个属性值是不是没有任何意义呢?其实不是的,他在CSS中也会起着很大的作用。我们来看一个实例:

比如说你的两个页面,同时存在“div#div-1”,那么此时你在A面中需要对“div#div-1”进行绝对定位;而在B页面中“div#div-1”又不需要进行绝对定位。

A页面中“div#div-1”绝对定位:

#div-1 {

position: absolute;

}

此时在B页面中不想在进行绝对定位,那么我们就必须在你的样式中显式的重新设置“#div-1”的postion属性为“static”

body.B #div-1 {

position: static;

}

第二步:相对定位position:relative

relative称为相对定位,如果你给某个元素指定了postion的值为“relative”,那么你就可以通过“T-R-B-L”(也就是top,right,bottom,left)来设置元素的定位值。

使用relative时有几点需要注意:

元素设置了relative时,是相对于元素本身位置进行定位;

元素设置了relative后,可以通过“T-R-B-L”改变元素当前所在的位置,但元素移位后,同样点有当初的物理空间位;

元素设置了relative后,如果没有进行任何的“T-R-B-L”设置,元素不会进行任何位置改变。

上面三点第一点和第三点来说都是比较好理解,那么现在针对第二点,我们来看一个实例的操作:

在上面的基础上,我们对“div-1”进行向下移动20px;向左移动40px:

#div-1 {

position:relative;

top:20px;

left:-40px;

}

我们来看看效果:

44a79f01530403aad57b3fe8d28bea53.png

从效果图可以再次印证上面说的第二点。元素“div-1”向下移动了20px,向左移动了40px,本身位置变化了,而元素最初所占的物理空间依然还是存在,另外一点元素相对定位后并没有影响其他相邻的元素。

第三步:绝对定位position:absolute

absolute是position中的第三个属性值,如果你给元素指定了absolute,整个元素就会漂出文档流,而且元素自身的物理空间也同时消失了。不像“relative”还具有原先的物理空间。

我们来看一个实例,在div-1a元素上进行绝对定位:

#div-1a {

position:absolute;

top:0;

right:0;

width:200px;

}

793f19f37b4e1c2a20243713b8a3ee26.png

此时元素“div-1a”不在当初的文档流中,而且其此时定位也是相对于html来进行定位,那么我们有时候并不是需要这样的效果,哪果我们元素div-1a还想在div-1是进行绝对定位,那要怎么办呢?此时就要发挥前面第二步的“relative”作用了。

第四步:relative和absolute的结合

第二步中大家知道元素相对定位“relative”是相对于元素自身定位,而在第三步中大家知道元素绝对定位“absolute”是相对于html。但这种说法只有满足这样的条件才是正常的:“绝对定位元素的任何祖先元素没有进行任何的“relative”或者“absolute”设置,那么绝对定位的元素的参考物就是html”,这样一来,“relative”和“absolute”的结合就能起到很大的作用。

我们接下来看一个截图:

43d2f474a9d5702657924cd2043390d5.png

上图做为一个实例来说明“relative”和“absolute”的关系,首先上图中共有三个div放在body内,而且他们三个div的关系是“div-1>div-2>div-3”,而且在div-3有这么一个绝对定位:

.div-3 {

position: absolute;

left:0;

top:0;

}

下面分几个情况来说明上图的意思:

1、div-1与div-2都没有设置“position:relative”,此时我们的div-3绝对定位后就漂到了上图中“div-3c”的位置上;

2、现在我们在div-2元素中加设置一个“position: relative”,此时我们的div-3绝对定位后就漂到了上图中的“div-3a”的位置;

3、接下来把相对定位的设置换到div-1元素上,此时div-3绝对定位后就到了div-3b的位置。

花这么多心思,我只想说明一点:如果一个元素绝对定位后,其参照物是以离自身最近元素是否设置了相对定位,如果有设置将以离自己最近元素定位,如果没有将往其祖先元素寻找相对定位元素,一直找到html为止。这句话说起起来好像有点拗口,不知道大家能否明白我说的是什么?如果不明白大家可以参考上图或者下面这个实例效果:

回到上面的实例中,如果我们在“div-1”加一个“relative”:

#div-1 {

position:relative;

}

#div-1a {

position:absolute;

top:0;

right:0;

width:200px;

}

现在我们相对点不在是第三步中的body了,而是“div-1”了,大家看看与第三步的变化:

7680762627fc7eec75e0e057fe4269d2.png

第五步:relative和absolute实现布局效果

这一步只要想演示一下使用相对定位和绝对定位实现的两例布局。在前面的基础上,div-1进行相对定位,而div-1a和div-1b进行绝对定位,从而实现两列布局的效果:

#div-1 {

position:relative;

}

#div-1a {

position:absolute;

top:0;

right:0;

width:200px;

}

#div-1b {

position:absolute;

top:0;

left:0;

width:200px;

}

db507c9af14c950a5db4b2bd83f83e4d.png

这样的制作只是用来说明absolute的作用,如果只能实现上面的效果,可能在实际制作中并不完美,为了让其更完美一些,在这个基础上我们在来看下面这一步。

第六步:设置固定高度

为了让布局更适用一些,可以在div-1元素上设置固定高度,如:

#div-1 {

position:relative;

height:250px;

}

#div-1a {

position:absolute;

top:0;

right:0;

width:200px;

}

#div-1b {

position:absolute;

top:0;

left:0;

width:200px;

}

f64b94e09d7d77055fe798c64640e852.png

相比之下好一点,但我们并不知道元素内容高度将会是多少,所以在此设置一个固定高度也是我们实际中的一个死穴,个人不建议这样使用。如果为了需要,我们可以通过别的办法来实现。

第七步:float

前两步,使用绝对定位都并不是很理想,那么我们可以考虑使用float来解决。我们可以在一个元素上使用float,让元素向左或向右,而且还可以使用文本围绕在这个元素的周边(这个作用在文本围绕图片特别有用)。下面来模拟一下:

#div-1a {

float:left;

width:200px;

}

dfb1b23e6ee9df47dac1f7c3675a39fc.png

第八步:多列浮动

上面展示的是一个列浮动,接下来看看多列的变化:

#div-1a {

float:left;

width:150px;

}

#div-1b {

float:left;

width:150px;

}

dd9c2a85fce5fe7265ec17ddeb653394.png

浮动与绝对定位来相比,现在解决了其高度自适应的问题,但也存在一个问题,浮动也破坏了元素当初的文档流,使其父元素塌陷了,那么为了解决这个问题,我们有必要对其进行清除浮动。

第九步:清除浮动

为了让浮动元素的父元素不在处于塌陷状态下,我们需要对浮动元素进行清除浮动:

#div-1a {

float:left;

width:190px;

}

#div-1b {

float:left;

width:190px;

}

#div-1c {

clear:both;

}

c8eae7b07526f9ebd08390cde34c13c7.png

浮动是在css中是一个很深的课题,这里只是轻描淡写了一下。前面在《CSS的Float之一》和《CSS的Float之二》也介绍了一些有关于float的相关知识,有关于清除浮动的,大家也可以点阅《Clear Float》。

第十步:扩展阅读

上面只是简单的介绍了一下CSS中的position的基础知识。如果大家对这一块知识感兴趣的话,可以点击下面的相关连接:

希望这个简单的介绍对大家有所帮助,如果您有更好的建议或分享可以直接在下面的评论中给我留言。

如需转载烦请注明出处:W3CPLUS

这篇关于html 图片position,十步图解CSS的position的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/165717

相关文章

Android使用ImageView.ScaleType实现图片的缩放与裁剪功能

《Android使用ImageView.ScaleType实现图片的缩放与裁剪功能》ImageView是最常用的控件之一,它用于展示各种类型的图片,为了能够根据需求调整图片的显示效果,Android提... 目录什么是 ImageView.ScaleType?FIT_XYFIT_STARTFIT_CENTE

关于MongoDB图片URL存储异常问题以及解决

《关于MongoDB图片URL存储异常问题以及解决》:本文主要介绍关于MongoDB图片URL存储异常问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录MongoDB图片URL存储异常问题项目场景问题描述原因分析解决方案预防措施js总结MongoDB图

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

C#实现将Excel表格转换为图片(JPG/ PNG)

《C#实现将Excel表格转换为图片(JPG/PNG)》Excel表格可能会因为不同设备或字体缺失等问题,导致格式错乱或数据显示异常,转换为图片后,能确保数据的排版等保持一致,下面我们看看如何使用C... 目录通过C# 转换Excel工作表到图片通过C# 转换指定单元格区域到图片知识扩展C# 将 Excel

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n