第七章基本视觉格式化

1.基本框

1.框模型

外边距通常为透明的，从中可以看到父元素的背景。
内边距不能为负值，但是外边距可以。

2.包含块

*行内元素的摆放方式不直接依赖包含块。
正常流：从左向右从上到下
想要一个元素不在正常流中，唯一的方法是使之成为浮动（float）或者定位元素（position:absolute）

2.块级元素

完整框模型

1.水平格式化

正常流中块级元素框的水平部总和就等于父元素底端width

水平属性

只有width与外边距可以使用auto，边框宽度和内边距不可以

使用auto

如果设置width，margin-left，margin-right中的某个值为auto，而余下的两个属性指定为特定的值，那么设置为auto的属性会确定所需的长度，从而使元素框的宽度等于父元素的width。
如果所有这三个属性都设置为非auto的某个值，则格式化属性过分受限，或者，此时总会把margin-right强制为auto（因为使用的语言从左向右读）。

不只一个auto

如果margin-left与margin-right均为auto，那么它们会设置为相同的长度，使元素在父元素中居中。
*text-align只应用于块级元素的内联内容，所以将元素的text-align设置为center并不能使这个元素居中。
设置元素大小的另一种方法是将某个外边距以及width设置为auto，设置为auto的外边距会变为0，然后width会设置为所需的值，使元素完全填充其包含块。
若这三个属性都设置为auto，两个外边距都会变为0，而width会尽可能宽。

负外边距

*注意：”元素的7项水平属性的总和”不能比其包含块更宽。

百分数

替换元素

如果一个替换元素的外大后天不同于其固定宽度，那么height值也会成比例变化，除非height自己也显式设置一个特定值。反过来也一样。

2.垂直格式化

假设指定高度大于显示内容所需的高度，这种情况下，多余的高度会产生一盒视觉效果，好像有额外的内边距。
假设指定高度小于显示内容所需的高度，可能会有一个滚动条，具体行为将取决于overflow属性的值。

垂直属性

类似于水平格式化
将一个元素的上，下外边距设置为auto，它们都会重置为0，使元素框没有外边距。

百分数高度

<div style="height:6em;"><p style="height:50%;">half as tall</p>
</div>

*由于将上，下外边距设置为auto时，实际的高度为0，因此，将元素垂直居中的唯一方法就是把上，下外边距都设置为25%。

auto高度

合并垂直外边距

合并行为只应用于外边距

负外边距

浏览器会取两个外边距绝对值的最大值。
如果一个正外边距与一个负外边距合并，会从正外边距减去这个负外边距的绝对值。

3.列表项

list-style-position：inside
list-style-position：outside

3.行内元素

如em和a标志，这两个都为非替换元素
图像也为行内元素，不过图像为替换元素。
*本节介绍的行为均不适合表元素。有新的属性和行为处理表与表内容

1.行布局

最后一种情况，即text-align的值为justify，各行必须与段落的内容区宽度相同，要调整各行中字母和字之间的间隔。因此，文本两端对齐是word-spacing的值可能被覆盖（如果letter-spacing为一个长度值，这个值则不能被覆盖）

2.基本术语和概念

*行内框在行中根据其vertical-align属性值垂直对齐。

构造一个行框：

3.行内格式化

line-height实际上只影响行内元素和其他行内内容，而不影响块级元素。
也可以为块级元素设置line-height，但这个值只是应用到块级元素的内联内容是才有视觉影响。

4.行内非替换元素

建立框

另一个例子：

垂直对齐

管理line-height

改变一个行内元素的line-height可能导致文本行相互重叠，接下来提供几种方法：
一种方法是对font-size有改变的元素结合使用em单位（line-height是相对于元素本身的font-size设置）

另一种方法是增加段落的line-height，这会影响整个元素中的每一行

基线与行高

缩放行高

设置line-height的最好方法是使用一个原始数字值，因为这个数会成为缩放因子，而且该因子为一个继承值而非计算值。
1.5即为font-size的1.5倍，缩放因子1.5在元素间逐层递传。
还有一种解决方案，即使line-height与font-size相等，这意味着会用所需的绝对最小大小来包含元素的内容区。

增加框属性

内，外边距和边框都可应用于行内非替换元素，行内元素的这些方面不会影响行框的高度。
行内元素的边框边界由font-size而非line-height控制。
或者，可以为行内元素指定内边距，这会把边框从文本本身拉开。

span{border:1px solid black;padding:4px;}

至于外边距，它们不影响行框的高度，但是可能影响两端，如图

另一种情况:

5.行内替换元素

然而行内替换元素还是有一个line-height值，因为垂直对齐时，vertical-align的百分数值要相对于元素的line-height来计算。

增加框属性

设置正外边距使替换元素的行内框更高；负外边距会减少替换元素行内框的大小。
负的上外边距会把图像上面的一行往下拉，例如：

img.two{margin-top:-10px;}

替换元素和基线

默认，行内替换元素位于基线上，如果向替换元素增加下内边距、外边距和边框，内容区会上移。
替换元素没有自己的基线，所以最好将其行内框的底端与基线对齐，即将下外边距边界与基线对齐。如图：

不过，这种基线对齐会有一个后果：如果表单元格中含有一个图像，这个图像要让表单元格足够高，从而能把包含该图像的行框包含在内。例如：

td{font-size:12px;}
<td><img src="space.img"   height="1"  width="10"></td>

表单元格是12像素高，图像位于单元格的基线上，那么图像下面可能有3像素的空间，上面有8像素的空间。
*这种行为并不仅限与表单元格中的图像，只要一个行内替换元素是块级元素或表单元格元素唯一的后代，都忽悠这种行为。例如，div中的一个图像也会放在基线上。
最常用的解决方法是使间隔图像成为块级元素，如：

td{font-size:12px;}
img.block{diaplay:block;}
<td><img src="soace.img"  height="1"  width="10"  class="block"></td>

另一个修正方法为，将包含图像的表单元格的font-size和line-height都设置为1px，这会使行框的高度只能放下1像素的图像。

4.改变元素显示

1.改变角色

想把链接布局为垂直边栏

<div id="navigation">
<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>可以让它们均为块级元素，如下：
div#navigation a{diaplay:block;}

同理，也可以让元素作为行内元素（inline）。
不过，这些改变的是元素的显示角色，而非其本质。
*行内元素可能是一个块元素的后代，但是反过来不行。

2.行内块元素

div{margin:1em 0;border:1px solid;}
p{border:1px dotted;}
div#one p{display:block;width:6em;text-align:center;}
div#two p{display:inline;width:6em;text-align:center;}
div#three p{display:inline-block;width:6em;text-align:center;}

注意：第二个div中，行内段落格式化为正常的行内内容，这说明width和text-align被忽略了（它们不能应用于行内元素）。不过对于第3个div元素，作为行内块元素的段落有这两个属性。

如果行内块元素的width为定义或声明为auto，元素框的宽度会改变，刚好包含该内容。行内框也会这样，不过行内框可能会跨多个文本行，而行内块元素不能。

例如：

div#three p{diaplay:inline-block;height:2em;}

3.run-in元素

run-in可以使某些块级元素成为下一个元素的行内部分，这种功能对于某些标题效果很有用，这在打印排版中很常见，即标题作为文本段落的一部分存在。
CSS中，改变元素的display值，并使下一个元素框作为块级元素框，就可以让元素成为run-in元素。
* 是框而不是元素本身。设置为display：block的strong元素会生成一个块级框，设置为display：inline的段落会生成一个行内框。

例如：

*即使run-in框格式化为另一个元素中的行内框，它们仍然从文档中的父元素继承属性，而不是说它们放到哪个元素中就从哪个元素继承属性。
*只有当run-in框后面是一个块级框时run-in才起作用，如果不是这样，run-in框本身将成为块级框。例如：

<h3 style="display:run-in;">prices</h3>
<table>
<tr>apple</tr>
<tr>orange</tr>
</table>

*run-in若应用到一个自然的行内元素，这个元素极有可能生成一个块级框。例如：以下标记中的em元素将成为块级元素，因为它后面没有跟一个块级框。

<p>
this is a <em>really</em>odd thing to do,<strong> but</strong> you could do it.
</p>

4.计算值

《CSS权威指南》读书笔记3相关推荐

《人人都是产品经理》第四章读书笔记及读后感作文2400字
<人人都是产品经理>第四章读书笔记及读后感作文2400字: 最近一直在忙别的学习,以至于好久没有更新公众号了,也好久没有写读书笔记了.<人人都是产品经理>这本书其实早在一个月前 ...
《营销5.0后互联网时代的企业战略营销》读书笔记
文章目录前言营销 1.0 到营销 5.0 的发展路径 CIDR 模型小结前言怀着对"营销"继续探索的心情,今年3月份完成了<营销5.0>的阅读,读本书的初衷是 ...
《互联网+：小米案例版》的读书笔记
读书笔记摘自<互联网+:小米案例版刘润> 互联网+:小米案例版刘润序篇创业方法论之变雷军反复强调的"顺势而为",以及"站对了风口,猪都能飞起来&quo ...
互联网产品经理(PM)的工作内容和职责
互联网产品经理的角色和职责在不同的互联网公司会存在一定差异,但是一些关键职责是任何一个产品经理都应承担的,下面我们按照产品阶段将互联网产品经理的职责整理为一下五个方面: 一.市场调研及用户研究即研究 ...
一组漫画告诉你，互联网产品经理是什么概念
一.什么是产品经理 1. 1 什么是产品产品是满足用户需求,被使用和消费的任何东西.包括有形的物品和无形的服务. 在了解产品经理之前,先来了解一下什么是产品.产品充斥在我们生活中的方方面面.鞋子.手 ...
《修炼之道：互联网产品从设计到运营》荣获“2012最受读者喜爱的IT人文类图书奖”！
<修炼之道:互联网产品从设计到运营>获得51CTO 主办的"2012最受读者喜爱的IT人文类图书奖",http://t.cn/zjjaXNo! 如何在寸土寸金的首页上使 ...
互联网产品的交互设计方法
目前交互设计在互联网产品中的应用状况 "交互设计可以提高产品可用性."在国内的互联网行业中,建立在这个认识基础上,交互设计得到了普遍的接受."产品设计开始的时候应该先交互 ...
为什么互联网能创造商业奇迹——我的互联网产品观
作者网易·崔晓宇互联网的出现突破了时间.地域的局限性,它使信息可以更快的速度传播到更广的范围,从时间和空间维度上看形成了真正的信息流.高效的流动让信息与生俱来的价值属性得以提升.我认为信息已经 ...
互联网产品的定义及分类
产品类型产品是指能够提供给市场,被人们使用和消费,并能满足人们某种需求的任何东西,包括有形的物品.无形的服务.组织.观念或它们的组合.产品一般可以分为三个层次,即核心产品.形式产品.延伸产品.核心产 ...
怎么做好互联网产品运营？
怎么做好互联网产品运营? 一.什么是运营? 从广义的角度上说,一切围绕着网站产品进行的人工干预都叫运营.所以某种程度上,我认为互联网产品公司只有3个业务部门:产品,技术,运营. 产品运营这个概念就=运 ...

《CSS权威指南》读书笔记3

1.基本框

1.框模型

2.包含块

2.块级元素

1.水平格式化

水平属性

使用auto

不只一个auto

负外边距

百分数

替换元素

2.垂直格式化

垂直属性

百分数高度

auto高度

合并垂直外边距

负外边距

3.列表项

3.行内元素

1.行布局

2.基本术语和概念

3.行内格式化

4.行内非替换元素

建立框

垂直对齐

管理line-height

缩放行高

增加框属性

5.行内替换元素

增加框属性

替换元素和基线

4.改变元素显示

1.改变角色

2.行内块元素

3.run-in元素

4.计算值

《CSS权威指南》读书笔记3相关推荐

最新文章

热门文章