肯德基圣代中间空心_建造冰淇淋圣代解释CSS位置

肯德基圣代中间空心

by Kevin Kononenko

凯文·科诺年科(Kevin Kononenko)

建造冰淇淋圣代解释CSS位置 (CSS Positioning Explained By Building An Ice Cream Sundae)

如果您之前做过冰淇淋圣代,那么您可以了解CSS的位置。 (If you’ve made an ice cream sundae before, then you can understand CSS positioning.)

Your divs are zooming around the screen like Roman candles.

您的div像罗马蜡烛一样在屏幕上缩放。

They’re diving deep into their container, then coming back up to the surface like a whale.

他们正潜入容器中,然后像鲸鱼一样回到水面。

They’re pushing the other elements out of the way, then leaving the container entirely like an impatient businessman.

他们将其他要素排除在外,然后像一个急躁的商人一样完全离开了容器。

And somehow, this happens in a new and exciting way every time you change that one nasty line of CSS: the position property.

而且,每当您更改CSS的那一行讨厌的行: position属性时 ,都会以一种新颖而令人兴奋的方式发生。

Every single person who has learned CSS has been there. CSS positioning seems to be nonsensical until hours of trial and error finally give you a vague understanding.

每个学习过CSS的人都曾去过那里。 CSS的定位似乎是荒谬的,直到经过数小时的试验和错误终于使您模糊理解。

This post will end the confusion, once and for all. The position property doesn’t seem to have an obvious relation to any real-world concept… until you consider the humble ice cream sundae.

这篇文章将一劳永逸地结束混乱。 在您考虑不起眼的冰淇淋圣代之前,position属性似乎与任何现实概念都没有明显的关系。

We’ll cover the following position properties:

我们将介绍以下位置属性:

  • Absolute

    绝对
  • Static (default)

    静态(默认)
  • Fixed

    固定
  • Relative

    相对的

And, for the sake of clarity, an ice cream sundae will consist of 4 major components:

而且,为清楚起见,圣代冰淇淋将由4个主要部分组成:

  • The glass

    玻璃
  • Ice cream scoops

    冰淇淋勺
  • Whipped cream

    鲜奶油
  • Cherries

    樱桃

冰淇淋圣代HTML (The Ice Cream Sundae as HTML)

If you had to explain the structure of an ice cream sundae with HTML, it would probably look like this.

如果必须用HTML解释冰淇淋圣代的结构,它可能看起来像这样。

Or, in picture form:

或者,以图片形式:

Before we dive into CSS, we can make a couple observations:

在深入研究CSS之前,我们可以做一些观察:

  1. The number of ice cream scoops is limited by the glass height. We cannot keep stacking ice cream scoops forever. Eventually, the whole beautiful setup would topple over.

    冰淇淋勺的数量受玻璃杯高度的限制。 我们不能永远堆叠冰淇淋勺。 最终,整个漂亮的设置将翻倒。
  2. You can put the cherries wherever you darn please. Cherries do not obey the flow and stacking of the scoops.They are smaller, and can fit in nooks and crannies where you cannot fit an ice cream scoop. And, more cherries will not upset the order of the scoops.

    您可以将樱桃放到任何地方。 樱桃不服从瓢的流动和堆积,它们较小,可以放在无法容纳冰淇淋勺的角落和缝隙中。 而且,更多的樱桃不会破坏瓢的顺序。
  3. The whipped cream sits on top, no matter how many scoops there are. Have you ever seen an ice cream sundae with the whipped cream in the middle, and none on top? Neither have I.

    无论有多少勺,打好的奶油都坐在上面。 您是否曾经见过冰淇淋圣代冰淇淋,中间夹着鲜奶油,而顶部却没有? 我也没有。

位置相对/静态:玻璃和铲子 (Position Relative/Static: The Glass and Scoops)

As shown in the first picture, our leaning tower of ice cream can only hold 5 scoops before toppling over. Let’s say that these 5 scoops have a total height of 500 pixels, and each scoop sits directly on top of one another. Our fullSundae div, in that case, would have a height of 500px to indicate that it can only handle those 5 scoops, and no more. This is an example of the default position, static. We use this to show that the height is unrelated to any container div.

如第一幅图所示,我们的冰淇淋斜塔只能倒下5个勺子。 假设这5个瓢的总高度为500像素,并且每个瓢都直接位于另一个之上。 在这种情况下,我们的fullSundae div的高度将为500px,以表明它只能处理这5个瓢,而不能再处理了。 这是默认位置static的示例。 我们用它来表明高度与任何容器div无关。

The simple thing to do next would be to just give each iceCreamScoop a height of 100px, which would match the height of the fullSundae div. That would be no fun, because the glass div would be 300px by default. Let’s look at it another way.

接下来要做的简单事情是,将每个iceCreamScoop的高度设置为100px,这将与fullSundae div的高度匹配。 那不会很有趣,因为默认情况下glass div为300px。 让我们换一种方式来看。

Since the glass div contains three of the five scoops, and all scoops are equal height, we can see that the glass div is 60% of the height of the fullSundae div. This is an opportunity for position relative! You can set the glass div to position relative and give it a height of 60%. The glass div will look at the height of the entire fullSundae div, and take up 60% of that space. The percentage is relative to the height of the container div, which was stated explicitly as 500px.

由于玻璃div包含五个勺中的三个,并且所有勺都是相等的高度,因此我们可以看到玻璃div是整个圣代div高度的60%。 这是相对职位的机会! 您可以将玻璃div设置为相对位置,并将其高度设置为60%。 玻璃div将看整个圣代div的高度,并占据该空间的60%。 百分比是相对于容器div的高度(明确表示为500px)而言的。

You can go even further. If you set each iceCreamScoop within the glass div to position relative, each scoop will calculate its height based on the height of the glass div. The glass can fit three scoops, so each scoop should have a height of 33.3%. Here is all of that in code.

您可以走得更远。 如果将玻璃div中的每个iceCreamScoop设置为相对位置 ,则每个瓢将基于玻璃div的高度计算其高度。 该玻璃杯可容纳三个勺子,因此每个勺子的高度应为33.3%。 这就是代码中的所有内容。

固定位置:鲜奶油 (Position Fixed: The Whipped Cream)

Position fixed should be the easiest one. A position fixed element will be stuck in place no matter how far the body extends. In ice cream terms, this is the whipped cream on top. No matter how many ice cream scoops that you try and stack, the whipped cream will still be on top, with the exact same relationship to the scoops. It is positioned relative to the body, not to the containing div.

固定位置应该是最简单的一种。 不管身体延伸多远, 位置固定元件都将卡在适当的位置。 用冰淇淋来讲,这是奶油在上面。 无论您尝试堆叠多少个冰淇淋勺,都将鲜奶油放在顶部,与勺的关系完全相同。 它相对于主体而不是相对于包含div的位置。

The whipped cream is independent of the series of ice cream scoops. The amount of whipped cream does not affect the maximum number of scoops that you can have in the full sundae. It stays in a consistent spot on the page.

搅打的奶油与冰淇淋勺系列无关。 鲜奶油的量不会影响您在完整圣代冰淇淋中可容纳的最大勺数。 它在页面上保持一致。

You commonly see position fixed in headers and footers. These are the elements that stick in position, even when you scroll the page or div.

您通常会在页眉和页脚中看到固定的位置。 即使滚动页面或div,这些元素也会保留在原位。

绝对位置:樱桃 (Position Absolute: The Cherries)

There’s a reason I saved Position Absolute for last: it can lead to unmaintainable code if you use it too frequently. You have been warned. But, it works perfectly for the cherries in this example.

我之所以最后保存“绝对位置”是有原因的:如果您过于频繁地使用它,可能会导致代码无法维护。 你被警告了。 但是,在此示例中,它非常适合樱桃。

You can put cherries almost anywhere in this ice cream sundae. You can put a bunch on top, and it will not topple over. You can wedge them in the glass itself, and you will still be able to fit the same amount of ice cream. They do not obey the same rules as the position static and position relative elements. Furthermore, you can remove them without disturbing any other elements.

您可以将樱桃放在此冰淇淋圣代中的几乎任何位置。 您可以在上面放一束,它不会翻倒。 您可以将它们楔入玻璃杯中,仍然可以放入相同量的冰淇淋。 它们不遵循与位置静态元素和位置相对元素相同的规则。 此外,您可以删除它们而不会干扰任何其他元素。

These are the key components of position absolute. Position absolute elements do not disturb the placement of other elements, but you must state their position explicitly. If you do not, they default to the upper left corner of the body. Or, if one of their parents has position relative, they go to the top left corner of that div.

这些是绝对职位的关键组成部分。 位置绝对元素不会干扰其他元素的放置,但是您必须明确声明其位置。 如果不这样做,它们默认为主体的左上角。 或者,如果他们的父母中有一位是亲戚,他们将转到该div的左上角。

Check out this cherry-filled sundae. There are cherries added in a bunch of places, and they do not disturb the flow of the other elements. But, keep in mind that you cannot stack the cherries like you stack ice cream scoops. Cherries do not stack. You must place each explicitly.

看看这个充满樱桃的圣代冰淇淋。 在很多地方都添加了樱桃,它们不会干扰其他元素的流动。 但是,请记住,您不能像堆叠冰淇淋勺那样堆叠樱桃。 樱桃不堆积。 您必须明确放置每个。

One last note: position absolute is calculated based on the nearest parent that is NOT position static. If every parent is position static, it is calculated based on the entire body. So, in the case above, the cherries within the glass are positioned based on the height of the glass div, not based on the height of the fullSundae div. The glass div has position relative.

最后一点:绝对位置是根据不是位置静态值的最接近的父级来计算的。 如果每个父对象都是静态位置,则会基于整个身体进行计算。 因此,在上述情况下,玻璃中的樱桃是根据玻璃div的高度而不是整个圣代div的高度来定位的。 玻璃div具有相对位置。

Now go practice it, and when you feel a little more comfortable… you deserve some ice cream!

现在开始练习,当您感到更加舒适时……您应该得到一些冰淇淋!

EDIT: You can now build an ice cream sundae with CSS positioning in this interactive tutorial!

编辑:您现在可以在此交互式教程中使用CSS位置构建冰淇淋圣代!

Did you enjoy this post? Give it a “heart” so it can help others as well!

你喜欢这个帖子吗? 给它一个“心”,这样它也可以帮助别人!

This post originally appeared on the CodeAnalogies blog.

该帖子最初出现在CodeAnalogies博客上

翻译自: https://www.freecodecamp.org/news/css-positioning-explained-by-building-an-ice-cream-sundae-831cb884bfa9/

肯德基圣代中间空心

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

00

(1)设置gcc 把所有gcc版本解压到/home/flinn/tools/目录下,以免切换编译器export PATHPATH/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/home/flinn/tools/4.4.3/bin (2)编译&#xff1…

12_04_Linux软件管理之四yum

2019独角兽企业重金招聘Python工程师标准>>> RPM安装: 二进制格式: 源程序--》编译--》二进制格式 有些特性是编译时选定的,如果编译时未选定此特性,将无法使用; rpm包的版本会落后于源码包,甚至…

datastage 函数_DataStage常用函数大全

1/38DataStage常用函数大全DATASTAGE常用函数大全.................................................................................................1一、类型转换函数................................................................................................…

linux 解析elf文件格式,Linux下ELF文件解析

1. windows PE文件与Linux ELF文件概述在windows中可执行文件是pe文件格式,Linux中可执行文件是ELF文件,其文件格式是ELF文件格式,在Linux下的ELF文件除了可执行文件(Excutable File),可重定位目标文件(RellocatableObject File)、共享目标文…

富爸爸穷爸爸害了我_这是我必须告诉爸爸的-在我们的时间用完之前

富爸爸穷爸爸害了我by Bram Bos通过Bram Bos 这是我必须告诉爸爸的-在我们的时间用完之前 (This is what I must tell my dad — before our time runs out) I was a young boy in the 1980s. Like the typical Generation-X kid, I grew up in the days of the home computer…

应用容器公共免费部署平台

从网上信息,发现了一个公共的容器部署平台 openshift.com,可以将我们封装好的docker镜像部署到平台上, 这样就不需要拥有一台云服务器了。对于测试环境非常有用。 首先当然是需要注册。这里全英文 第二,注册之后需要选择你想要的套…

西门子rwd68温控器说明书_西门子RWD68说明书

西门子RWD68说明书显示第一界面Y1XX模拟量输出电压值YIXX传感器此时实际温度;同时按—键五秒显示第二界面PS4主控制回路参数;按—键显示第三界面PS3辅助回路参数但仅在室外补偿时出现;按—键显示第四界面PS2按—键显示第五界面PS1控制曲线运用…

linux 内存管理优化,Linux性能优化实战 内存篇 阅读笔记

第十五讲 基础篇:Linux内存是怎么工作的(2020.6.8)这一讲相关的内容正好之前看csapp的时候总结了一下,可以直接贴出来作为总结了。Linux的内存工作原理,这又是一个特别大的话题。一切向着尽量利用物理资源的方向在发展,在没有虚拟…

傅里叶变换与大数乘法

我们知道,两个 N 位数字的整数的乘法,如果使用常规的算法,时间复杂度是 O(N2)。然而,使用快速傅里叶变换,时间复杂度可以降低到 O(N logN loglogN)。 假设我们要计算以下两个 N 位数字的乘积: a (aN-1aN-2…

idea 启动界面导入项目_如何为您的项目启动有效的登录页面

idea 启动界面导入项目by Christian-Peter Heimbach通过克里斯蒂安彼得海姆巴赫 如何为您的项目启动有效的登录页面 (How to launch an effective landing page for your project) I began my career 10 years ago doing online marketing and advertising for video games. S…

linux程序已经在后台运行冻结了_如何使程序在Linux后台运行

经常在Linux上面运行程序都有这样的体验:某个程序运行的时候,会产生大量的log(提示)信息,但实际上我们只想让它跑一下而已,log暂时不需要或者后面才有需要。同时run多个相同或者不同程序的时候,占了好多的命令行界面&a…

数字时代的精益组织

精益IT应该帮助简化和改善我们为客户创造价值的方式,并提出面向未来的更好的解决方案。未来的组织将专注于同行业的产品或业务流——其他的一切,包括专家和管理者在内,都是为了让一线工作人员可以第一时间就做好,而又不会遇到任何…

9th week blog

1、第一个计算机语言:Fortran Fortran I诞生于1957年,由IBM设计,是世界上第一个真正的计算机语言。 Fortran I运行于IBM 704计算机上。 Fortran I支持:变量(变量名最多6个字符)、If和do语句、格式化IO。 不…

cas单点登录系统:客户端(client)详细配置(包含统一单点注销配置)

最近一直在研究cas登录中心这一块的应用,分享一下记录的一些笔记和心得。后面会把cas-server端的配置和重构,另外还有这几天再搞nginxcas的https反向代理配置,以及cas的证书相关的知识分享出来。 Cas由两部分组成,Cas Server和Cas…

open 端口打开Linux,linux – nmap显示打开的端口,但netstat没有

如果我使用nmap扫描我的服务器,则表明已打开21端口.但是当我登录到这个服务器并运行netstat时,我什么也看不见.$nmap -sT serverStarting Nmap 4.76 ( http://nmap.org ) at 2009-06-24 11:54 MSDInteresting ports on server (x.x.x.x):Not shown: 994 filtered portsPORT STA…

技能学习重要的古语_学习方法:最重要的开发人员技能

技能学习重要的古语by Preethi Kasireddy通过Preethi Kasireddy 学习方法:最重要的开发人员技能 (Learning How to Learn: The Most Important Developer Skill) Being an efficient learner is at least as important as being an efficient coder.成为高效的学习…

Git submodule 的笔记

这次不造轮子,写写文章。file最近想把自己的 blog 整理到 github 上,但由于其中依赖了一些主题以及插件,这时候 git submodule 就能很好的处理这种情况了。 submodule 是什么? submodule 顾名思义,子模块。在一个项目依…

Leetcode690.Employee Importance员工的重要性

给定一个保存员工信息的数据结构,它包含了员工唯一的id,重要度 和 直系下属的id。 比如,员工1是员工2的领导,员工2是员工3的领导。他们相应的重要度为15, 10, 5。那么员工1的数据结构是[1, 15, [2]],员工2的数据结构是…

linux进程管理类命令大全,Linux进程管理类命令

一、htop命令选项-d #:指定延迟时间间隔;-u UserName:仅显示指定用户的进程;-s COLUME:以指定字段进行排序;子命令:l:显示选定的进程打开的文件列表;s:跟踪选…

C#操作Excel

1.System.Data.DataTable连接数据库 ExcelFile 是excel的完整路径//OleDbConnection conExcel new OleDbConnection("ProviderMicrosoft.Jet.OLEDB.4.0;Data Source" ExcelFile ";Extended PropertiesExcel 8.0");//if (conExcel.State ConnectionStat…