We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
这是学习《CSS 权威指南》第 7 章的笔记。
不管是什么元素，CSS 都假定每个元素都生成一个或多个矩形框，我们称之为元素框。
各元素框的中心是内容区域，四周有可选的内边距、边框、轮廓和外边距。之所以说这些区域是可选的，是因为它们的宽度都可以设为零，即把它们从元素框上删除。
内边距不能为负值，但是外边距可以。
重要概念概览：
display: block
display: inline
<body> <div> <p>This is a paragraph.</p> </div> </body>
在这里，p 元素的块级框的容纳块是 div 元素的块级框，div 元素的容纳块是 body 元素的框体。html 元素对应的是初始容纳块。
改变的是元素的显示方式，而不是元素的本性。也就是说，把段落生成的框体变成行内框并不会把段落变成行内元素。
display 属性的名称就表明，它是影响元素显示方式的，而不能改变元素的种类。
默认情况下，块级框的宽度（width）等于左内边界到右边界的距离，高度（height）等于上内边界到下内边界的距离。
box-sizing 属性的取值有 content-box | padding-box | border-box。
这个属性用于改变 width 和 height 值的具体意义。如果声明 width: 400px，而且不为 box-sizing 设值，那么元素的内容框将为 400 像素宽，内边距和边框等都在此基础上增加。如果声明 box-sizing: border-box，那么元素框从左边框的外边界到右边框的外边界相距 400 像素，边框或内边距都在这个尺寸之内计算，即内容区的宽度相应减少。
width: 400px
box-sizing: border-box
横向格式化属性有七个，分别为 margin-left、border-left、padding-left、width、padding-right、border-right 和 margin-right。这七个属性的值加在一起要等于元素容纳块的宽度，而这一宽度通常为块级元素的父元素的 width 值。
在这七个属性中，只有三个属性的值能设为 auto：元素内容区宽度、左外边距和右外边距。余下的几个属性，要么设为具体的值，要么使用默认值（零）。
在 width、margin-left 和 margin-right 三个属性中，如果把其中一个设为 auto，另两个设为具体的值，那么设为 auto 的那个属性的具体长度要能满足元素框的宽度等于父元素的宽度。从某种意义上说，auto 可用于补全总和所缺的尺寸。
如果把这三个属性都设为 auto 之外的值，用 CSS 术语来说就是过于约束了，那么 margin-right 将被强制设为 auto。
多个 auto：
纵向格式化属性有七个：margin-top、border-top、padding-top、height、padding-bottom、border-bottom 和 margin-bottom。
在常规流动模式下，如果把块级框的高度设为百分数，百分数是相对框体的容纳块的高度而言的。例如，对下述标记来说，段落的高度将是 3em：
<div style="height: 6em;"> <p style="height: 50%;">Half as tall</p> </div>
纵向格式化的另一个重要特征是，相邻的纵向外边距会折叠。较小的外边距被较大的外边距消去了。
匿名文本：不在任何行内元素中的字符串。
行距 = line-height - font-size。
块级元素相对容易理解一些，不用费什么力气就能控制它们的布局。而行内元素有时却让人捉摸不透，因为要考虑的因素太多，不是区分置换元素和非置换元素就能解决的。
遇到问题时再解决，不要杞人忧天。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
视觉格式化基础
这是学习《CSS 权威指南》第 7 章的笔记。
元素框基础
不管是什么元素，CSS 都假定每个元素都生成一个或多个矩形框，我们称之为元素框。
各元素框的中心是内容区域，四周有可选的内边距、边框、轮廓和外边距。之所以说这些区域是可选的，是因为它们的宽度都可以设为零，即把它们从元素框上删除。
内边距不能为负值，但是外边距可以。
重要概念概览：
display: block声明能把任何元素生成的框体变成块级框。display: inline声明能把任何元素生成的框体变成行内框。在这里，p 元素的块级框的容纳块是 div 元素的块级框，div 元素的容纳块是 body 元素的框体。html 元素对应的是初始容纳块。
调整元素的显示方式
改变的是元素的显示方式，而不是元素的本性。也就是说，把段落生成的框体变成行内框并不会把段落变成行内元素。
display 属性的名称就表明，它是影响元素显示方式的，而不能改变元素的种类。
默认情况下，块级框的宽度（width）等于左内边界到右边界的距离，高度（height）等于上内边界到下内边界的距离。
box-sizing 属性的取值有 content-box | padding-box | border-box。
这个属性用于改变 width 和 height 值的具体意义。如果声明
width: 400px，而且不为 box-sizing 设值，那么元素的内容框将为 400 像素宽，内边距和边框等都在此基础上增加。如果声明box-sizing: border-box，那么元素框从左边框的外边界到右边框的外边界相距 400 像素，边框或内边距都在这个尺寸之内计算，即内容区的宽度相应减少。横向格式化属性有七个，分别为 margin-left、border-left、padding-left、width、padding-right、border-right 和 margin-right。这七个属性的值加在一起要等于元素容纳块的宽度，而这一宽度通常为块级元素的父元素的 width 值。
在这七个属性中，只有三个属性的值能设为 auto：元素内容区宽度、左外边距和右外边距。余下的几个属性，要么设为具体的值，要么使用默认值（零）。
在 width、margin-left 和 margin-right 三个属性中，如果把其中一个设为 auto，另两个设为具体的值，那么设为 auto 的那个属性的具体长度要能满足元素框的宽度等于父元素的宽度。从某种意义上说，auto 可用于补全总和所缺的尺寸。
如果把这三个属性都设为 auto 之外的值，用 CSS 术语来说就是过于约束了，那么 margin-right 将被强制设为 auto。
多个 auto：
纵向格式化属性有七个：margin-top、border-top、padding-top、height、padding-bottom、border-bottom 和 margin-bottom。
在常规流动模式下，如果把块级框的高度设为百分数，百分数是相对框体的容纳块的高度而言的。例如，对下述标记来说，段落的高度将是 3em：
纵向格式化的另一个重要特征是，相邻的纵向外边距会折叠。较小的外边距被较大的外边距消去了。
行内元素
匿名文本：不在任何行内元素中的字符串。
行距 = line-height - font-size。
小结
块级元素相对容易理解一些，不用费什么力气就能控制它们的布局。而行内元素有时却让人捉摸不透，因为要考虑的因素太多，不是区分置换元素和非置换元素就能解决的。
遇到问题时再解决，不要杞人忧天。
The text was updated successfully, but these errors were encountered: