草珊瑚的css基础

首先要了解如下概念：

viewport，窗口大小，containing block，block formatting context，inline formatting context，dirction和unicode-bidi，display和float以及postion的三者关系，盒子模型。

 

一.viewport

viewport是你所看到的窗口。它有两个重要属性，一个是css像素，另一个是设备像素。

设备像素由分辨率决定，css像素由开发者决定。

设备像素和css像素的关系有

1.重叠，即1css像素等于1设备像素。

2.缩小浏览器，一个设备像素覆盖多个css像素。

3.放大浏览器，一个css像素覆盖多个设备像素。

设置width=device-width之后，一个css像素会占用多个设备像素，从而感觉上网页放大了。占用计算方式是，css像素=设备像素/(device-width)。

 

二.窗口大小

浏览器窗口的大小，一种带滚动条，另一种不带滚动条。

不带滚动条的窗口宽高获取，document.documentElement.clientWidth和document.documentElement.clientHeight。

带滚动条的窗口宽高获取，window.innerWidth和window.innerHeight。

这些个属性获取到的是css像素。因此，当用户放大浏览器，一个css像素覆盖多个设备像素，用户能看到的CSS像素变少，所以window.innerWidth会变小

参考链接：两个viewport的故事

 

三.containing block

containing block（包含块）是，一个元素的盒模型的定位计算所依据的矩形(box)。

如果一个元素的’position’为’relative’或’static’，那么其包含块则是由最近的块级或单元格或行内块级元素的内容区创建。

如果一个元素’position’为’fixed’，那么其包含块为当前屏幕的可视窗口。

如果一个元素的’position’为’absolute’，那么其包含块则是最近的’position’为’relative’ 或’absolute’或 ‘fixed’的祖先元素,有如下几种情况：

->如果其祖先元素是行内元素，则包含块取决于其祖先元素的 “direction” 特性。

->其他情况下，如果祖先元素不是行内元素，那么包含块的区域应该是祖先元素的内边距边界。

详情看参考链接：smallni的包含块containing block和曹鹏的什么是CSS包含块（Containing Block）

 

四.block formatting context

BFC主要是用来计算包含浮动元素的元素宽高。

它的触发方式：

float:(任何值除了none)
overflow:（任何值除了visible）
display:(table-cell/table-caption/inline-block)
position:(任何值除了static/relative)

它的效果：

1.浮动元素参与高度的计算

2.与浮动元素相邻，不覆盖浮动元素

3.不会与它们的子元素发生外边距折叠

参考链接：smallni的hasLayout && Block Formatting Contexts

 

五.inline formatting context

有文字便有inline box，有inline box便有行框line boxes，有行框意味着它是在ifc里面。

1.行框的宽高计算：

浮动的文字在行框外面，即不参与行框的宽高计算。行框的高度由文字的大小决定，宽度由包含块containg block决定，会被浮动框隔断哦。

2.行内框的垂直对齐

 当一个行内框的高度小于包含它的行框的高度时，在行框中垂直方向上的对齐决定于 'vertical-align' 特性。 'vertical-align' 默认值为基线( 'baseline' )对齐。

3.行内框在行框中水平方向上的对齐

取决于text-align属性。

参考链接：KB010: 常规流( Normal flow )

 

六.dirction和unicode-bidi

让文字倒着来，比如"例如strong为行内元素，行内元素可能会占多行，所以行内元素框可能由多行多个框组成。" 变成 "。成组框个多行多由能可框素元内行以所，行多占会能可素元内行，素元内行为gnorts如例"

设置unicode-bidi: bidi-override;direction: rtl;即可

 

七.display和float以及postion的三者关系

1. 'display' 的值为 'none'

如果 'display' 的值为 'none'，那么 'position' 和 'float' 不起作用。在这种情况下，元素不产生框。因此浮动和定位无效。

2. 'position' 的值是 'absolute' 或 'fixed'

否则，如果 'position' 的值是 'absolute' 或 'fixed'，框就是绝对定位的，'float' 计算后的值应该是 'none'，并且，'display' 会被按照下表设置。 框的位置将由 'top'，'right'，'bottom' 和 'left' 属性和该框的包含块确定。

3. 'float' 的值不是 "none"

如果 'float' 的值不是 "none"，该框浮动并且 'display' 会被按照转换对应表设置。

总结是：浮动或绝对定位的元素，只能是块元素或表格。

参考链接：KB009: CSS 定位体系概述 （那个图float的流程是错误的）

 

八.盒子模型

盒子模型就不说了，太多书籍解释这个。

需要注意的是

1.盒子的宽高是cotent+padding+border+margin

2.盒子的背景颜色和图像默认覆盖到content+padding+border

3.块级盒子兄弟的上下margin，父和第一个子元素margin-top会发生折叠。

参考：css彻底研究，写给大家看的css书，精通CSS：高级Web标准解决方案（第2版），精通CSS+DIV网页样式与布局