CSS布局增强：定位技术实战指南

需积分: 10 131 浏览量更新于2024-07-20 收藏 5.64MB PDF 举报

《定位在CSS布局增强：Web上的实践指南》(Positioning.in.CSS.Layout.Enhancements.for.the.Web.149193)是一本深入浅出的电子书，由Web标准领域的先驱Eric A. Meyer撰写。本书是即将出版的第四版《CSS：权威指南》的精华部分，旨在帮助设计师理解和掌握CSS布局的新规范，尤其是Grid Layout标准，同时保留传统定位技术的实用性。 Meyer以其丰富的经验和在W3C Cascading Style Sheets Working Group的工作背景，带领读者了解如何在网页设计中巧妙运用CSS定位技巧。书中涵盖的关键知识点包括： 1. 绝对定位（Absolute Positioning）：学习如何使元素脱离文档流，但保持其相对于最近的定位容器的位置，这对于创建可滑动的侧边栏或独立于页面滚动的固定元素非常有用。 2. 固定定位（Fixed Positioning）：理解如何通过设置position属性为fixed，使元素如页眉（masthead）始终保持在视口中的固定位置，无论用户如何滚动页面。 3. 相对定位（Relative Positioning）：了解相对定位允许元素相对于其原始位置进行移动，同时保持它在文档中的空间占用，这对于设计响应式的布局和元素层次关系至关重要。 4. 粘性定位（Sticky Positioning）：学习如何让文档的部分头部（如标题）根据滚动条件自动静止在视口内，提供更流畅的阅读体验。作为O'Reilly出版社的作品，本书具有高质量的内容和严谨的排版，适合Web开发者、设计师以及对CSS布局感兴趣的读者。购买本书不仅能得到即时的定位技术指导，还能享受《CSS：权威指南》完整版发布后的折扣优惠。对于提升网页设计的灵活性和专业性，这是一本不容错过的资源。

Positioning

The idea behind positioning is fairly simple. It allows you to define exactly where ele‐

ment boxes will appear relative to where they would ordinarily be—or position them

in relation to a parent element, another element, or even to the viewport (e.g., the

browser window) itself.

Basic Concepts

Before we delve into the various kinds of positioning, it’s a good idea to look at what

types exist and how they differ. We’ll also need to define some basic ideas that are

fundamental to understanding how positioning works.

Types of Positioning

You can choose one of five different types of positioning, which affect how the ele‐

ment’s box is generated, by using the position property.

position

Values:

Initial value:

static

Applies to: All elements

Inherited: No

Computed value: As specied

The values of position have the following meanings:

static

The element’s box is generated as normal. Block-level elements generate a rectan‐

gular box that is part of the document’s flow, and inline-level boxes cause the cre‐

ation of one or more line boxes that are flowed within their parent element.

relative

The element’s box is offset by some distance. The element retains the shape it

would have had were it not positioned, and the space that the element would

ordinarily have occupied is preserved.

absolute

The element’s box is completely removed from the flow of the document and

positioned with respect to its containing block, which may be another element in

the document or the initial containing block (described in the next section).

Whatever space the element might have occupied in the normal document flow

is closed up, as though the element did not exist. The positioned element gener‐

ates a block-level box, regardless of the type of box it would have generated if it

were in the normal flow.

fixed

The element’s box behaves as though it was set to absolute, but its containing

block is the viewport itself.

sticky

The element is left in the normal flow until the conditions that trigger its sticki‐

ness come to pass, at which point it is removed from the normal flow but its orig‐

inal space in the normal flow is preserved. It will then act as if absolutely

positioned with respect to its containing block. Once the conditions to enforce

stickiness are no longer met, the element is returned to the normal flow in its

original space.

Don’t worry so much about the details right now, as we’ll look at each of these kinds

of positioning later. Before we do that, we need to discuss containing blocks.

The Containing Block

In general terms, a containing block is the box that contains another element. As an

example, in the normal-flow case, the root element (html in HTML) is the containing

block for the body element, which is in turn the containing block for all its children,

and so on. When it comes to positioning, the containing block depends entirely on

the type of positioning.

2 | Positioning

剩余49页未读，继续阅读

ramissue

粉丝: 354
资源: 1487

CSS布局增强：定位技术实战指南

Positioning in CSS Layout Enhancements for the Web epub

Super-resolution image reconstruction-a technical overview

qml anchors

There is not enough space for this component. Try decreasing its width, or increasing the destination width.

html css js MYSQL PHP

css position

请给出相关的文献和matlab代码，并提供测试数据集

RelativeLayout doesn't allow view overlapped whereas LinearLayout does.

display: flex

最新资源