阅读 694

CSS FC布局指南

1. 布局

1.1 什么是FC

FC(Formatting Context)格式化上下文,其实指的是一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素之间的关系和相互作用。

FC类型 描述
BFC 块级格式化上下文( Block formatting contexts )
IFC 行内格式化上下文( Inline formatting contexts )
FFC 自适应格式化上下文( Flex Formatting Contexts )(CSS3新增)
GFC 网格布局格式化上下文( GridLayout Formatting Contexts )(CSS3新增)

Formatting context是W3C CSS2.1规范中的一个概念。

它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系、相互作用。

格式化上下文指的是初始化元素定义的环境。包含两个要点,元素定义的环境和初始化。

在 CSS 中,元素定义的环境有两种,一种是块格式化上下文( Block formatting context ),另一种是行内格式化上下文( Inline formatting context )。 这两种上下文定义了在 CSS 中元素所处的环境,格式化则表明了在这个环境中,元素处于此环境中应当被初始化,即元素在此环境中应当如何布局等。

最常用的布局:

  • 弹性盒子布局
  • 普通文档流布局

移动端开发可以优先考虑flex布局

BOX:CSS布局的基本单位

Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。

元素的类型和 display 属性,决定了这个 Box 的类型。

不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。

让我们看看有哪些盒子:

a:block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;

c:inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;

1.2 弹性盒子布局

弹性盒子(Flex Box) 弹性布局

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

flex布局示例

<div style="display: flex">
    <div style="flex: 3"></div>
    <div style="flex: 1"></div>
</div>
复制代码

以下为外层容器6大属性:

  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. justify-content
  5. align-items
  6. align-content

概念: 主轴 交叉轴

1.3 普通文档流布局规则

  1. 浮动的元素是不会被父级计算高度
  2. 非浮动元素会覆盖浮动元素的位置
  3. margin会传递给父级
  4. 两个相邻元素上下margin会重叠

盒模型

盒模型的组成大家肯定都懂,由里向外content,padding,border,margin。 盒模型是有两种标准的,一个是标准模型,一个是IE模型。

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;
复制代码

盒模型的问题,BFC来处理。

1.4 块格式化上下文 BFC

具备BFC特性的元素, 就像被一个容器所包裹, 容器内的元素在布局上不会影响外面的元素。

解决了什么问题:

  • 可以解决元素塌陷、折叠等问题
  • 自适应两栏布局
  • 主要是父子、兄弟之间的布局关系

触发BFC的方式:

  • overflow: hidden; 可以清除子元素浮动,Ps“你乱动我就消灭你”
  • 其他的包括:float不为none时,position的值不为static或releative

常用布局实例

移动端:

  • 粘连布局(footer 底部固定布局)
  • 单列块容器边距差异布局
  • 双飞翼布局

pc端:

  • 多列自适应布局
  • 圣杯布局
  • 等高布局

2.图文排版

1. 文字和图片同一中间水平线

<img id='close' style='vertical-align:middle;' src='/images/declear.gif'  />
复制代码
不同字号的文字垂直居中:1. line-height; 
复制代码
// 行距要使用倍数,不要用像素值
line-height: 1.5;
复制代码

2.内容靠近底部

#container {
    position: relative;
    width: 400px;
    height: 300px;
    margin: 20px auto;
    background-color: #de5;
}
#innerFooter{
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}
<div id="container">
    <div id="innerFooter">始终垂直居于块元素底部的文字</div>
</div>
复制代码

2.1 float后会脱离文档流的不占位置

<section class="standard-bank-card">
  <section class="subscript-container">
   <div style="float">此时当前元素不占用高度,会溢出 standard-bank-card </div> 
复制代码

3. sass 和 less区别是什么?

  1. Sass变量必须是$开始,而Less变量必须使用@符号开始 。
  2. Sass是基于Ruby的语言,功能更加强大

less 使用 Named Parameters lesscss.cn/features/#m…

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}
复制代码

4. border内轮廓

box-sizing:border-box;
复制代码

问答

什么是响应式布局? 三种基本的布局类型,分别是固定布局、流式布局和弹性布局

垂直水平居中

  • 1.使用Flex

只需要在父盒子设置:display: flex; justify-content: center;align-items: center;

代码演示

  • 2.使用 CSS3 transform

父元素设置:display:absolute

子元素设置: display:absolute; transform: translate(-50%,-50%);position: absolute;top: 50%;left: 50%;

代码演示

  • 3.使用 display:table-cell 方法

父元素设置:display:table-cell; text-align:center;vertical-align:middle;

子元素设置: display:inline-block;vertical-align:middle;

这种方法不要在H5使用

  • 3.1 浮动(float)
  • 3.2 层叠(z-index)
  • 3.3 溢出(overflow)
  • 3.4 resize(notIE)(CSS3)
  • 3.5 分栏(column)(IE10+ notOperaMini)(CSS3)

圣杯padding和双飞翼margin异同

圣杯布局来源于2006年这篇文章,一代经典

圣杯布局代码演示

圣杯布局的缺点:正常情况下是没有问题的,但是特殊情况下就会暴露此方案的弊端,如果将浏览器无线放大时,「圣杯」将会「破碎」掉。如图,当main部分的宽小于left部分时就会发生布局混乱。

双飞翼布局来源于淘宝UED。 双飞翼布局代码演示

很明显,左右侧已经飞起来了

对于双飞翼布局中的margin-left:-100%的理解

#left {
  width: 200px; 
  /*这里的百分比取决于什么?*/
  /*负边距的话,左边的就是-100%,相当于移动了一行,右边移动自己的width就可以了。*/
  margin-left: -100%;
  background-color: red;
}
复制代码

这里的-100% 是指代码中的body, 如果container的width设置成固定值, 当body宽度变化时,left的起点则是固定的,造成left的位置随body宽度变化。 这里有一个核心点“相当于移动了一行”

圣杯布局和双飞翼布局基本上是一致的,都是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染。解决方案大体相同,都是三栏全部float:left浮动,区别在于解决中间栏div的内容不被遮挡上,圣杯布局是中间栏在添加相对定位,并配合left和right属性,效果上表现为三栏是单独分开的(如果可以看到空隙的话),而双飞翼布局是在中间栏的div中嵌套一个div,内容写在嵌套的div里,然后对嵌套的div设置margin-left和margin-right,效果上表现为左右两栏在中间栏的上面,中间栏还是100%宽度,只不过中间栏的内容通过margin的值显示在中间。

相同点(优先加载, 自适应留白)

虽然两者的实现方法略有差异,不过都遵循了以下要点:

  1. 两侧宽度固定,中间宽度自适应
  2. 中间部分在DOM结构上优先,以便先行渲染
  3. 允许三列中的任意一列成为最高列
  4. 只需要使用一个额外的<div>标签

不同点(本质差异margin,padding)

圣杯布局:借助的是其他非主要元素覆盖了其父元素的padding值所占据的宽度,同一个杯子,非主要元素其只是占据了全部容器的padding值部分;子元素采用绝对定位

双飞翼布局:给主要部分main-wrap添加一个外层元素main,其他非主要元素所占据的空间是主要部分(main-wrap)的margin空间,像鸟的两个翅膀,与主要部分main脱离(main和main-wrap是下面双飞翼布局的元素id)。

本质差异是使用padding和margin来实现中间内容自适应宽度,两侧内容如何实现跟随适应。 研究经典问题的意义在于举一反三,触类旁通。可以将所有问题囊括起来研究。

h5工具

在线编辑器,代码在线预览

See Also

关注下面的标签,发现更多相似文章
评论