CSS布局基础：HTML5和CSS3元素定位

HTML5和CSS3：元素的位置我们每天从任何设备访问的大多数网站都具有图片，文字等内容，从现在开始，我们将其中的每一个都称为Elements。无论您将屏幕变宽还是变窄，所有这些元素都将放置在特定位置。这不是很神奇吗？但是，您应该知道，在创建过程中事情并非您可能想到的那样。定位所有这些元素是一项非常艰巨的工作，尤其是在当今我们-程序员-由于屏幕分辨率差异而不得不包含响应能力的情况下。 为了使界面在每个不同的设备中显示几乎相同，这意味着不同的屏幕分辨率，您需要针对每个设备不同地调整这些度量。 HTML5和CSS3：元素的位置我们每天从任何设备访问的大多数网站都具有图片，文字等内容，从现在开始，我们将其中的每一个都称为Elements。无论您将屏幕变宽还是变窄，所有这些元素都将放置在特定位置。这不是很神奇吗？但是，您应该知道，在创建过程中事情并非您可能想到的那样。定位所有这些元素是一项非常艰巨的工作，尤其是在当今我们-程序员-由于屏幕分辨率差异而不得不包含响应能力的情况下。 为了使界面在每个不同的设备中显示几乎相同，这意味着不同的屏幕分辨率，您需要针对每个设备不同地调整这些度量。CSS文件包含所有这些详细信息。首先，我们需要指定position属性。该属性的选项为5静态的固定相对的绝对黏您可能会想到，这些选项中的每个选项都会使元素以其独特的方式运行。静态的这是直接从Web浏览器设置的默认值。通过我们为我们预定义的此选项，top， bottom， left和 right属性不会影响元素。这意味着我们不允许将元素移到页面的常规流程之外。固定此值使我们能够选择元素并将其放置在某个位置，无论我们是否滚动页面。现在将定位此元素relative到视口，而不是页面的其他任何元素。元素将保留在此fixed该页面的位置没有任何变化。您可能已经了解了，我们必须使用top， bottom， right和 left属性，因此我们可以给它一定的位置。相对的 当我们设置 position: relative;对于一个元素，我们能够将其相对于首先由其常规位置定义的常规位置进行定位。通过为位置选择此选项，我们现在可以将top，bottom，right，left属性设置为我们想要的任何测量值，以将元素从其正常位置移开。 绝对通过将此属性设置为元素，我们可以实现将所选元素定位到最接近的祖先（而不是上面的固定选项发生的事情）。因为继承在HTML（超文本标记语言）中确实非常重要，所以您应始终牢记，如果元素没有定位的祖先，它将自动使用body元素（主页元素）并沿与页面滚动。始终要记住的一个小技巧是，每当我们提到定位元素时，我们所指的是除默认值之外还具有属性的任何元素。黏此属性使我们的元素在与滚动位置相关的相对位置和固定位置之间切换。首先，它的行为就像一个相对定位的元素，直到滚动到达页面的视口为止。之后，它将保留在该特定点，直到结束。如果大家对于学习前端有任何问题，学习方法，学习路线，如何学习有效率的问题，可以随时来咨询我，或者缺少系统学习资料的，我做这行年头比较久，自认为还是比较有经验的，可以帮助大家提出建设性建议，603985993这是我的web前端交流3000人裙，有任何问题可以随时来咨询我。总结一下，我唯一的建议是我们应该使用哪个属性以及何时使用，很抱歉让您失望，但是没有任何默认属性总是与某个元素相关。您应该更好地了解每个工具的行为，以便可以根据需要使用它们。唯一的方法是继续练习此属性，并在需要时尝试使用它们。

本文章由javascript技术分享原创和收集