1.盒模型

不管是什么元素,CSS都假定每个元素会生成一个或多个矩形框,我们称之为元素。各元素框的中心是内容区域，四周有可选的内边距、边框、轮廓和外边距。默认情况下，内容区的背景出现在内边距范围内。外边距区域始终都是透明的，因此透过它能看到父元素。内边距不能为负值，但是外边距可以。

（1）重要概念

常规流动：即渲染西方语言时从左至右，从上至下的顺序，以及传统的HTML文档采用的文本布局方式。多数元素都采用常规流动方式，除非元素浮动、定位了，放入弹性盒子或采用栅格布局了。
非置换元素：内容包含在文档中的元素。
置换元素：为其他内容占位的元素。典型的是img。
根元素：位于文档树的顶端。
块级框：段落、标题或div等元素生成的框。
行内框：strong或span等元素生成的框体。
行内块级框：内部特征像块级框，外部特征像行内框。行内元素的行为有点像置换元素，但不完全相同。可以理解为把一个div像图片一样插入一行文本中。

（2）容纳块

每个元素的框体都相对容纳块放置，简单的说，容纳块是元素框体的布局上下文。容纳块由离元素最近的那个生成列表项目或块级框的祖辈元素的边界构成。

2.元素的显示方式

（1）display

可以改变元素的显示方式。

（2）box-sizing

这个值用于改变width和height值的具体意义。

3.行内元素

（1）重要概念

匿名文本：不在任何元素中的字符串。
字体框：由字体定义，也叫字符框。字形可能比字体框矮。
内容区：内容区可以是各字符的字体框连在一起构成的方框，也可以是元素中各字符的字形合在一起构成的方框。
行距：font-size和line-height之差。
行内框：内容区加行距后得到的方框。
行框：过一行中各行内框最高点和最低点的方框。

（2）CSS定义的一些行为和有用的概念

内容区相当于块级框的内容框。
行内元素的背景填充在内容区加内边距所在的区域里。
行内元素的边框在内容区外的内边距外侧。
非置换元素的内边距、边框和外边距在对应的方框上没有纵向效果，即对行内框的高度没有影响。

（3）行内框高度的确定

确定行内各置换元素和匿名文本的font-size和line-height值，后者减去前者，得到行距。行距除以2，分别添加到字体框的上部和下部。
确定各置换元素的height、marginb-top、margin-bottom、padding-top、padding-bottom、border-top-width和border-bottom-width，各值想加。
确定各内容区在一行的基线上方和下方分别超出多少。
确定设定了verical-align属性的元素纵向偏移有多少。
知道所有行内框的位置之后，计算行框的高度：基线与最高的那个行内框顶边之间的距离加上基线与最低那个行内框底边之间的距离。

CSS权威指南（七）视觉格式化相关推荐

《CSS权威指南》--附录
<CSS权威指南>--附录虽然一条规则中的声明可以按照任何顺序写出来,但我背后还是有一个优先级顺序: 1. display 及相关声明: 2. position 及相关的声明: 3. m ...
css权威指南第四版_16个非常有用的CSS伪选择器，你千万不要错过了！
英文 | https://blog.bitsrc.io/css-pseudo-selectors-you-never-knew-existed-b5c0ddaa8116译文 | https://jue ...
读书笔记《CSS权威指南》
阅读本书主要目的: 自从学会CSS以来,虽然熟练掌握了其使用方法和技巧,但对其底层的原理和实现并不清晰,阅读本书想进一步系统化的学习和深入研究其本质,对这门前端基础语言从熟练使用到真正理解. 第1章 ...
小白的《CSS权威指南》笔记（下部分）
颜色和背景颜色 color设置前景色. 前景色 color:<color> | inherit 通过给元素添加class值,然后再通过class选择器来改变它的颜色. 替换属性 HTML ...
CSS权威指南重点要点摘录
1. css和文档 web的衰落一片混乱 css作救星丰富的样式易于使用在多个页面上使用样式层叠缩减文件大小为将来做准备元素替换和非替换元素元素显示角色结合CSS和XHTML l ...
css权威指南pdf
下载地址:网盘下载内容简介 · · · · · · 这本书提供了对CSSl和CSS定位的完整的描述,同时也给出了CSS2的概述.书中对CSS的每个属性都做了详细的探究,同时讨论了各个属性之间如何协 ...
CSS权威指南（八）基本元素框
文章目录 1.基本元素框 2.内边距 3.边框 4.轮廓 5.外边距 1.基本元素框文档中每个元素都会生成一个矩形框,我们称之为元素框.这个框体描述元素在文档布局中所占的空间.因此,元素框之间 ...
CSS权威指南之css声明，伪类，文本处理--(简要笔记一)
1.css层叠的含义后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒. 3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换. ...
CSS权威指南（第三版）
很早就买了这本书,之前都是断断续续地看,前段时间总算是花时间系统的把它看了一遍.严格的说是第二次才把这本书系统的看完,之前是因为很多知识点看不懂,所以没有系统看.虽然这一次也有好多知识点没有看懂.但是 ...
css权威指南 note2
样式表: 外部样式表(external style sheet) <link rel="stylesheet" type="text/css" href= ...

CSS权威指南（七）视觉格式化

文章目录

1.盒模型

2.元素的显示方式

3.行内元素

CSS权威指南（七）视觉格式化相关推荐

最新文章

热门文章