web盒子模型示意图
Understanding the CSS box model and its quirks is key to completing compelling web page layouts, while avoiding the “why is this over there?” problems most new web designers face.
了解CSS盒模型及其怪癖关键是要完成引人注目的网页布局，同时也避免了“ 这是为什么在那里？ 大多数新的网页设计师都面临的问题。
Goals: Use div and span elements on a page to create a basic web page layout.
目标：使用页面上的div和span元素创建基本的网页布局。
Prerequisite: CSS Introduction
先决条件： CSS简介
Time: 2 hours
时间： 2小时
核心材料 (Core Material)
Before you can create effective web page layouts you need at least some comprehension how to measure elements in CSS, which will allow you to control the box model and how elements relate to each other in size and position on web pages.
在创建有效的网页布局之前，您至少需要了解如何在CSS中测量元素，这将使您能够控制盒子模型以及元素在大小和位置上如何相互关联。
While everyone should be familiar with centimeters and have at least a rough understanding of pixels, there are several new measurement systems that require introduction:
尽管每个人都应该熟悉厘米并至少对像素有一个大概的了解，但是有几种新的测量系统需要介绍：
可选的 (Optional)
There are many more sizing properties and values in CSS than most developers appreciate. The following articles cover these lesser-known applications, with a particular focus on extrinsic and intrinsic values.
CSS中的大小设置属性和值比大多数开发人员所欣赏的更多。 以下文章涵盖了这些鲜为人知的应用程序，特别着重于外部和内在价值。
推荐读物 (Recommended Reading)
Read Shay Howe’s article on the box model and positioning from his
; read The CSS Layout Model together with Floats & Clearing from the Web Platform Docs.
Beginner’s Guide to HTML & CSS阅读谢伊·豪(Shay Howe)关于盒子模型和他的位置的文章 HTML和CSS入门指南 ； 从Web平台文档中阅读CSS布局模型以及Floats＆Clearing 。
Read Adam Schwartz’s “The Box” in The Magic of CSS as a summary, and follow it up my reading Layout.
阅读《 CSS的魔力 》中的亚当·施瓦兹(Adam Schwartz)的“盒子”作为摘要，并按照我的阅读布局继续学习 。
当你做完 (When You’re Done)
With the div and span elements and an understanding of the basic CSS box model, you’re almost ready to start making basic layouts on web pages.
有了div和span元素并了解基本CSS框模型，您几乎可以开始在网页上进行基本布局了。
翻译自: https://thenewcode.com/771/Web-Developer-Reading-List-The-Box-Model
web盒子模型示意图
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
