关注我 么么哒

【前端】笔记---CSS篇(2)

  • 作者:smile
  • 学无止境
  • 时间:Sun May 24 2020 11:10:40 GMT+0800 (China Standard Time)
  • 64人已阅读
简介 布局 定位

1.文档流

正常:自上向下,自左向右

如果两个相邻元素都在其上设置外边距,并且两个外边距接触,则两个外边距中的较大者保留,较小的一个消失

2.布局模式

在网页中,元素有三种布局模型:

  1. 流动模型(Flow) 默认的
  2. 浮动模型 (Float)
  3. 层模型(Layer)

流动模型是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动

层模型有三种形式:

  1. 相对定位(position: relative)  
  2. 绝对定位(position: absolute)
  3. 固定定位(position: fixed)

常见布局:

  • 一列布局 (一般都是固定的宽高)
  • 二列布局 (常用 float 实现,注意及时清除浮动)
  • 三列布局 (两侧定宽中间自适应)
  • 混合布局 (在一列布局的基础上,保留top和foot部分,将中间的main部分改造成两列或三列布局,小的模块可以再逐级同理划分)

3.何为定位?

定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置。

4.定位的种类

  • 静态定位(正常布局)static
  • 相对定位(保留原位置空白,在原位置基础上定位)relative
  • 绝对定位(原位置不留白,在第一个设置 静态定位 的元素基础上定位)absolute
  • 固定定位(相对于浏览器定位)fixed
  • 混合定位(相对定位与固定定位的混合)sticky

定位可以使用:top bottom left right 进行调整

元素重叠可以用 z-index 设置元素的高低,只对定位元素有效

5.弹性盒子(flex)

优点:

  • 在父内容里面垂直居中一个块内容。
  • 使容器的所有子项占用等量的可用宽度/高度,而不管有多少宽度/高度可用。
  • 使多列布局中的所有列采用相同的高度,即使它们包含的内容量不同。

使用:

  • flex-direction 可以指定主轴方向 列(column)/行(row) 若需方向添加(-reverse)
  • flex-wrap 可以指定是否还行
  • align-items 控制 flex 项在交叉轴上的位置
  • justify-content 控制 flex 项在主轴上的位置

6.多列(column)

column-width 列的宽度

column-count 列数

column-gap 列的间距

column-rule 指定列的宽度,样式和颜色

7.对齐方式

  • 水平居中
  • 垂直居中
  • 水平垂直居中

8.左侧固定右侧自适应布局实现方法:

  1. 双 inline-block
  2. 双 float
  3. float+margin-left
  4. absolute+margin-left
  5. float+BFC
  6. flex
  7. grid

9.圣杯布局和双飞翼布局

事实上,圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局。它们实现的效果是一样的,差别在于其实现的思想。

10.元素的 BFC 特性

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”,它规定了内部如何布局,与这个区域外部毫不相干。

BFC的布局规则:

  • 内部的Box会在垂直方向,一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
  • 每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时,浮动元素也参与计算。

什么时候会触发BFC:

  • float的值不为none。
  • overflow的值为auto,scroll或hidden。
  • display的值为table-cell, table-caption, inline-block中的任何一个。
  • position的值不为relative和static。

BFC的作用:

  • 利用BFC避免margin重叠。
  • 自适应两栏布局
  • 清除浮动
 

文章评论