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，

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