没有合适的资源?快使用搜索试试~ 我知道了~
首页CSS基础视觉格式:元素盒类型与布局详解
CSS基础视觉格式:元素盒类型与布局详解
需积分: 9 3 下载量 75 浏览量
更新于2024-07-21
收藏 3.47MB PDF 举报
"《基本CSS视觉格式化》是一本实用指南,由经验丰富的作者埃里克·梅耶撰写,深入探讨了CSS布局基础。该书旨在帮助读者理解和掌握元素盒模型的复杂性,包括块级、行内、行内块级、列表项和运行时盒子类型。作者引导读者理解不同类型的元素如何生成盒子,例如如何从行内转换为块级,或从列表项转换回行内。 在阅读过程中,你将学习到以下关键概念: 1. 元素盒类型:理解各种盒子类型如块级(block)、行内(inline)、行内块级(inline-block)对于网页布局至关重要。每种类型都有其特定的行为和在页面上的呈现方式。 2. 水平和垂直块级格式化:掌握如何控制元素在水平和垂直方向上的布局,这对于创建响应式设计和实现精确布局是必不可少的。 3. 行内布局:深入剖析匿名文本、em盒、内容区域、行间距(leading)、行内盒子和行框等概念,这些都是决定行内元素布局的关键因素。 4. 非替换元素与替换元素的区别:了解这些元素在视觉格式化中的不同之处,这对于处理图片、视频等元素的样式调整尤为重要。 5. 技巧性布局管理:本书还将指导你如何有效地管理块级和行内元素的布局,解决复杂的布局问题,提升网页的可读性和美观度。 作为《CSS权威指南》第四版的精华部分,本书提供了简洁明快的教学,使你在实际项目中迅速上手。购买《基本CSS视觉格式化》后,你将有机会获得《CSS权威指南》完整版的折扣。现在就开始学习,让你的网页设计更加生动活泼吧! 通过阅读这本书,你将建立起坚实的CSS视觉基础知识,并学会如何灵活运用这些知识来提升网站的用户体验和设计效果。无论你是初学者还是资深开发者,这都将是一次深入理解并掌握CSS视觉格式化的重要学习之旅。"
资源详情
资源推荐
![](https://csdnimg.cn/release/download_crawler_static/9400912/bgc.jpg)
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
www.it-ebooks.info
![](https://csdnimg.cn/release/download_crawler_static/9400912/bgd.jpg)
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
www.it-ebooks.info
![](https://csdnimg.cn/release/download_crawler_static/9400912/bge.jpg)
For an element in the normal, Western-style flow of text, the containing block forms
from the content edge of the nearest ancestor that generated a list item or block box,
which includes all table-related boxes (e.g., those generated by table cells). Consider
the following markup:
<body>
<div>
<p>This is a paragraph.</p>
</div>
</body>
In this very simple markup, the containing block for the p element’s block box is the
div element’s block box, as that is the closest ancestor element box that is a block or a
list item (in this case, it’s a block box). Similarly, the div’s containing block is the
body’s box. Thus, the layout of the p is dependent on the layout of the div, which is in
turn dependent on the layout of the body element.
And above that, the layout of the body element is dependent on the layout of the html
element, whose box creates what is called the initial containing block. It’s a little bit
unique in that the viewport—the browser window in screen media, or the printable
area of the page in print media—determines its dimensions, not the size of the con‐
tent of the root element. It’s a subtle distinction, and usually not a very important one,
but it does exist.
Altering Element Display
You can affect the way a user agent displays by setting a value for the property
display. Now that we’ve taken a close look at visual formatting, let’s consider the
display property and discuss two more of its values using concepts from earlier in
the book.
display
Values:
none | inline | block | inline-block | list-item | run-in | table |
inline-table | table-row-group | table-header-group | table-
footer-group | table-row | table-column-group | table-column |
table-cell | table-caption | inherit
Initial value:
inline
Applies to: All elements
Inherited: No
4 | Basic Visual Formatting
www.it-ebooks.info
![](https://csdnimg.cn/release/download_crawler_static/9400912/bgf.jpg)
Computed
value:
Varies for oated, positioned, and root elements (see CSS2.1, section 9.7); otherwise,
as specied
We’ll ignore the table-related values, since they’re far too complex for this text, and
we’ll also ignore the value list-item since it’s very similar to block boxes. We’ve
spent quite some time discussing block and inline boxes, but let’s spend a moment
talking about how altering an element’s display role can alter layout before we look at
inline-block and run-in.
Changing Roles
When it comes to styling a document, it’s obviously handy to be able to change the
type of box an element generates. For example, suppose we have a series of links in a
nav that we’d like to lay out as a vertical sidebar:
<nav>
<a href="index.html">WidgetCo Home</a>
<a href="products.html">Products</a>
<a href="services.html">Services</a>
<a href="fun.html">Widgety Fun!</a>
<a href="support.html">Support</a>
<a href="about.html" id="current">About Us</a>
<a href="contact.html">Contact</a>
</nav>
We could put all the links into table cells, or wrap each one in its own nav—or we
could just make them all block-level elements, like this:
nav a {display: block;}
This will make every a element within the navigation nav a block-level element. If we
add on a few more styles, we could have a result like that shown in Figure 2.
Figure 2. Changing the display role from inline to block
Altering Element Display | 5
www.it-ebooks.info
剩余70页未读,继续阅读
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://profile-avatar.csdnimg.cn/default.jpg!1)
chn_l
- 粉丝: 6
- 资源: 1
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- 计算机人脸表情动画技术发展综述
- 关系数据库的关键字搜索技术综述:模型、架构与未来趋势
- 迭代自适应逆滤波在语音情感识别中的应用
- 概念知识树在旅游领域智能分析中的应用
- 构建is-a层次与OWL本体集成:理论与算法
- 基于语义元的相似度计算方法研究:改进与有效性验证
- 网格梯度多密度聚类算法:去噪与高效聚类
- 网格服务工作流动态调度算法PGSWA研究
- 突发事件连锁反应网络模型与应急预警分析
- BA网络上的病毒营销与网站推广仿真研究
- 离散HSMM故障预测模型:有效提升系统状态预测
- 煤矿安全评价:信息融合与可拓理论的应用
- 多维度Petri网工作流模型MD_WFN:统一建模与应用研究
- 面向过程追踪的知识安全描述方法
- 基于收益的软件过程资源调度优化策略
- 多核环境下基于数据流Java的Web服务器优化实现提升性能
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)