CSS基础视觉格式化指南

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

"基础CSS视觉格式化" 在网页设计领域，CSS（层叠样式表）是不可或缺的一部分，它赋予了HTML内容丰富的视觉表现力。《Basic Visual Formatting in CSS》由知名前端开发者Eric A. Meyer撰写，旨在帮助初学者及有一定经验的开发者深入理解CSS的视觉渲染原理，特别是布局基础。这本书摘自即将出版的第四版《CSS：权威指南》。书中首先介绍了CSS元素的盒模型，这是理解CSS布局的关键。盒模型包括了四种基本类型的盒子：块级元素（block）、内联元素（inline）、内联块级元素（inline-block）和列表项元素（list-item）。了解这些元素的盒类型对于控制网页元素的排列和尺寸至关重要。你可以学习如何改变一个元素的盒类型，例如将内联元素转换为块级元素，或者将列表项元素转变为内联元素，这将极大地提升布局的灵活性。书中的内容还涵盖了水平和垂直方向上的复杂布局管理。在处理水平布局时，可能会遇到对齐、填充、边距和边界的问题，这些都是CSS格式化模型中的难点。Meyer详细阐述了如何控制元素间的间距，以及如何实现灵活的宽度和填充策略，确保内容在不同屏幕尺寸下都能良好展示。此外，书中还会讨论如何处理浮动元素（float）和定位（positioning），这两个特性是创建复杂多列布局和实现元素精确定位的核心。通过理解浮动，你可以创建响应式的多栏布局；而掌握定位则能让你在页面上自由地控制元素的位置，无论是相对父元素还是绝对于浏览器窗口。最后，书中的实例和练习将帮助读者将理论知识转化为实际技能。通过实践，读者可以更好地掌握CSS在网页设计中的应用，为创建美观且功能强大的网页打下坚实基础。购买《Basic Visual Formatting in CSS》的电子书或纸质版，还将有机会获得完整版《CSS：权威指南》的折扣优惠。无论你是新手还是希望深化CSS知识的专业人士，这本书都将是你提升CSS布局技巧的理想资源。现在就投入学习，让网页设计工作变得更加得心应手。

Figure 1. e content area and its surroundings

Borders are generated using defined styles, such as solid or inset, and their colors

are set using the border-color property. If no color is set, then the border takes on

the foreground color of the element’s content. For example, if the text of a paragraph

is white, then any borders around that paragraph will be white, unless the author

explicitly declares a different border color. If a border style has gaps of some type,

then the element’s background is visible through those gaps by default. Finally, the

width of a border can never be negative.

The various components of an element box can be affected via a number of proper‐

ties, such as width or border-right. Many of these properties will be used in this

book, even though they aren’t defined here.

A Quick Refresher

Let’s quickly review the kinds of boxes we’ll be discussing, as well as some important

terms that are needed to follow the explanations to come:

Normal

ow

This is the left-to-right, top-to-bottom rendering of text in Western languages

and the familiar text layout of traditional HTML documents. Note that the flow

direction may be changed in non-Western languages. Most elements are in the

normal flow, and the only way for an element to leave the normal flow is to be

floated, positioned, or made into a flexible box or grid layout element. Remem‐

ber, the discussions in this chapter cover only elements in the normal flow.

Nonreplaced element

This is an element whose content is contained within the document. For exam‐

ple, a paragraph (p) is a nonreplaced element because its textual content is found

within the element itself.

2 | Basic Visual Formatting

Replaced element

This is an element that serves as a placeholder for something else. The classic

example of a replaced element is the img element, which simply points to an

image file that is inserted into the document’s flow at the point where the img

element itself is found. Most form elements are also replaced (e.g., <input

type="radio">).

Root element

This is the element at the top of the document tree. In HTML documents, this is

the element html. In XML documents, it can be whatever the language permits;

for example, the root element of RSS files is rss.

Block box

This is a box that an element such as a paragraph, heading, or div generates.

These boxes generate “new lines” both before and after their boxes when in the

normal flow so that block boxes in the normal flow stack vertically, one after

another. Any element can be made to generate a block box by declaring display:

block.

Inline box

This is a box that an element such as strong or span generates. These boxes do

not generate “linebreaks” before or after themselves. Any element can be made to

generate an inline box by declaring display: inline.

Inline-block box

This is a box that is like a block box internally, but acts like an inline box exter‐

nally. It acts similar to, but not quite the same as, a replaced element. Imagine

picking up a div and sticking it into a line of text as if it were an inline image,

and you’ve got the idea.

There are several other types of boxes, such as table-cell boxes, but they won’t be cov‐

ered in this book for a variety of reasons—not the least of which is that their com‐

plexity demands a book of its own, and very few authors will actually wrestle with

them on a regular basis.

The Containing Block

There is one more kind of box that we need to examine in detail, and in this case

enough detail that it merits its own section: the containing block.

Every element’s box is laid out with respect to its containing block; in a very real way,

the containing block is the “layout context” for a box. CSS defines a series of rules for

determining a box’s containing block. We’ll cover only those rules that pertain to the

concepts covered in this book in order to keep our focus.

Basic Boxes | 3

剩余70页未读，继续阅读

libingchen

粉丝: 29
资源: 263

CSS基础视觉格式化指南

Sybex - Mastering Visual Basic .NET Transact SQL (VBL).pdf

Detailed Example of Beautifying Input Boxes in Qt Style Sheets: Styling Input Boxes with QSS

(源码)基于Spring Boot和JWT的饮品管理系统.zip

阿里巴巴发布的XQUIC库是QUIC和HTTP3协议的跨平台实现.zip

佳能打印机清零软件和教程

双哥微服务.md

python项目4.每天不同时间段通过微信发消息提醒女友.zip

两个半小时玩转iOS缓存之YYCache、视频讲解详细清晰.wmv

基于Python语言下Django框架的一个网站式的诊所管理系统.zip

多功能焊台T12JBC245烤箱回流焊加热台风枪可调电源简易双通道示波器函数发生器高精度PWM脉冲.zip

最新资源