HTML和CSS常见问题整理(3)

请注意,本文编写于 186 天前,最后修改于 186 天前,其中某些信息可能已经过时。

三栏布局

要求两边两栏宽度固定,中间栏宽度自适应.

一. position的绝对定位
center的div需要放到后面,将左右两边使用absolute定位,因为绝对定位使其脱离文档流,最后面的center会显示在正常文档流中,然后设置margin属性,留出左右两边的宽度.

二. float自身浮动法
center的div需要放到后面,对左右使用float:left和float:right使左右两个元素脱离文档流,中间的正常文档流中,然后设置margin属性,留出左右两边的宽度.

介绍BFC

BFC是CSS布局的一个概念,是一块独立的渲染区域,是一个环境,里面的元素不会影响到外部的元素.

如何生成BFC(块级格式化上下文):

  1. 根元素,即HTML元素(最大的一个BFC)
  2. float的值不为none.
  3. position的值为absolute或fixed
  4. overflow的值不为visible.(默认值)
  5. display的值为inline-block,table-cell,table-caption.

BFC布局规则

  1. 内部的Box会在垂直方向,一个接一个的放置.
  2. 属于同一个BFC的两个相邻的box的margin会发生重叠
  3. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此, 文字环绕效果,设置float.
  4. BFC的区域不会与float box重叠
  5. 计算BFC的高度,浮动元素也参与计算.

BFC作用:

  1. 自适应两栏布局
  2. 可以阻止元素被浮动元素覆盖
  3. 可以包含浮动元素---清除内部浮动 原理:触发父div的BFC属性,使下面的子div都处在父div的同一个BFC区域之内
  4. 分属于不同的BFC时,可以阻止margin重叠

CSS3特性vhvw

vh相对于视窗的高度,视窗高度是100vh

vw相对于视窗的宽度,视窗宽度是100vw

这里是视窗指的是浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

Comments

添加新评论