CSS 第8天

复习

定位 position

relative top, left, right, bottom 子绝父相

absolute 居中

fixed

遮盖 1， 2

z-index 拼爹

浏览器

hack

html hack

css hack

值 hack ie6 -_ 7 ! 8|9 \0 678910 \9

选择器hack 6 * htlm 7 selector, {} 非6 html > body

IE6 hack DTD 浮动， 3px，双margin， filter: alpha(opacity=0-100);

一、CSS 单位

css 单位

%：百分比单位，相对于父元素（宽度，高度）的百分

px：像素单位，表示屏幕上的一个点

in：英寸单位，像素与英寸的转化与分辨率有关，分辨率是96,一英寸单位下，包含96个像素点

cm：厘米单位

1米等于100cm，

1英寸等于2.54cm

1厘米约包含37.78个像素点 96 / 2.54

mm：毫米单位， 1cm = 10mm

pt：磅单位

1磅等于1/72英寸

1磅包含 1.33个像素点 96 / 72

pc: 包含12个点活字

em：相对于字体的大小

容器宽度多大，要看容器的字体多大

rem：相对于根元素字体的大小

容器多宽，与父元素和自身元素字体大小无关，与根元素字体大小有关

ex：表示相当于x-height的高度，

x-height指的是x字母的高度

vw : 1vw 等于视口宽度的1%

vh : 1vh 等于视口高度的1%

vmin : 选取 vw 和 vh 中最小的那个

vmax : 选取 vw 和 vh 中最大的那个

html {
    font-size: 30px;
}
body {
    font-size: 20px;
}
.box {
    height: 30px;
    margin-top: 10px;
    background-color: pink;
    font-size: 20px;
}
.box1 {
    width: 10%;
}
.box2 {
    width: 10px;
}
.box3 {
    width: 10in;
}
.box4 {
    width: 10cm;
}
.box5 {
    width: 10mm;
}
.box6 {
    width: 10pt;
}
.box7 {
    width: 10pc;
}
.box8 {
    width: 10em;
    font-size: 30px;
}
.box9 {
    width: 10rem;
    font-size: 30px;
}
.box10 {
    font-size: 40px;
    width: 10ex;
}
/* 正方形 */
.box11 {
    /* width: 50vw; */
    width: 10vw;
    height: 10vw;
}
.box12 {
    /* width: 50vh; */
    width: 10vh;
    height: 10vh;
}
.box13 {
    width: 10vmin;
    height: 10vmin;
}
.box14 {
    width: 10vmax;
    height: 10vmax;
}

二、格式化上下文

FC

FC的全称是：Formatting Contexts（格式化上下文），是W3C CSS2.1规范中的一个概念。它是页面

中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和

相互作用。

常见的FC有：

BFC（Block Formatting Contexts）：块级格式化上下文
IFC（Inline Formatting Contexts）：内联格式化上下文
GFC（GridLayout Formatting Contexts）：网格布局格式化上下文
GFC（Flex Formatting Contexts）：自适应格式化上下文

BFC

Block Formatting Context 叫做“块级格式化上下文”。BFC的布局规则如下：

内部的盒子会在垂直方向，一个个地放置；

盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；

每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

BFC的区域不会与float重叠；

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；

计算BFC的高度时，浮动元素也参与计算。

会产生BFC的情况

根元素；
float的属性不为none；
position为absolute或fixed；
display为inline-block，table-cell，table-caption，flex；
overflow不为visible

IFC

IFC(Inline Formatting Contexts)直译为"内联格式化上下文"，IFC的line box（线框）高度由其包含行

内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)

IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。当float元素会位于IFC与与

line box之间的时候，会使得line box宽度缩短。同一个IFC下的多个line box高度会不同。 IFC中时不

可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个

IFC，每个IFC对外表现为块级元素，与div垂直排列。

水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-

align则可以使其水平居中。

垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，

其他行内元素则可以在此父元素下垂直居中。

JZTXT

CSS 第8天

CSS 第8天

复习

一、CSS 单位

css 单位

二、格式化上下文

FC

BFC

IFC