html-浮动、盒模型、布局方式

最新推荐文章于 2024-08-06 14:46:11 发布

最帅扫地僧

最新推荐文章于 2024-08-06 14:46:11 发布

阅读量489

点赞数 1

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_42259266/article/details/105159971

版权

html 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

浮动

概念: 浮动就是让块级标签不独占一行
使用场景：让块级元素在排在一行
原理：让浮动的元素脱离标准文档流
清除浮动：

在浮动的元素后面添加一行多余标签，控制其样式为：clear:both;
给浮动的父级元素设置：overflow: hidden;PS：该属性有两个作用，一个是超出部分隐藏，另一个是清除浮动。
给浮动的父级元素设置伪类：.wrapper:after {content: ''; display: block; clear:both;}

盒模型

概念：每个元素都是一个盒子，每个盒子都是以以下几部分组成，margin（外边距）+border（边框）+padding（内边距）+content（内容），备注：margin和padding是以border为依据进行参照，系统默认的外边距为8px，但这不是确定的，有的浏览器会把浏览器边框线也计算进去。

布局方式

圣杯布局

属于三栏布局，三栏并排显示，左右两侧固定，中间自适应
左右两侧设置负margin值达到并排显示的目的
如何保证中间部分内容不被遮挡：
首先给中间部分的容器设置左右padding，同时给左右侧的容器设置position: relative以及各自对应的left和right属性

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圣杯布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      min-width: 500px;
    }
    .container {
      overflow: hidden;
    }
    .left {
      width: 200px;
      height: 500px;
      float: left;
      background-color: #f00;
      margin-left: -100%;
      position: relative;
      left: -400px;
    }
    .right {
      width: 200px;
      height: 500px;
      float: left;
      background-color: #0f0;
      margin-left: -200px;
      position: relative;
      right: 400px;
    }
    .center {
      width: 100%;
      height: 500px;
      float: left;
      background-color: #00f;
      padding-left: 200px;
      padding-right: 200px;
    }
  </style>
</head>
<body>
  <!-- 
    圣杯布局，三栏，左右侧固定，中间自适应，并且保证
    中间部分的内容放在文档流的前面，以确保优先渲染
    三栏全部采用float，其中左右侧设置负margin达到
    三栏并排显示
    如何保证中间部分的内容不被遮挡：
    中间部分给出padding-left和padding-right，
    左右侧设置position:relative，以及left和right属性
    保证左右侧位置不变，同时中间部分内容不被遮挡
   -->
   <div class="container">
     <div class="center">内容</div>
     <div class="left">左侧</div>
     <div class="right">右侧</div>
   </div>
</body>
</html>

双飞翼布局

和圣杯布局有一部分很相似，同时采用相同的方式使得三栏并排显示
但是在处理中间部分内容不被遮挡的解决方案上，两者不一样，双飞翼采用在中间容器的内部再添加一个div容器包裹，然后给这个div设置左右margin值

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双飞翼布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      min-width: 500px;
    }
    .container {
      width: 100%;
      overflow: hidden;
    }
    .center, .left, .right {
      float: left;
      height: 500px;
    }
    .center {
      width: 100%;
      background-color: #00f;
    }
    .left, .right {
      width: 200px;
    }
    .left {
      margin-left: -100%;
      background-color: #f00;
    }
    .right {
      margin-left: -200px;
      background-color: #0f0;
    }
    .main {
      margin-left: 200px;
      margin-right: 200px;
    }
  </style>
</head>
<body>
  <!-- 
    双飞翼：
    也属于三栏布局，左右侧固定，中间自适应
    三栏采用float，左右侧采用设置负margin达到
    三列并排显示
    但是对于处理中间部分的内容不被遮挡的方式和
    圣杯布局有所不同
    双飞翼采用的是在中间的容器中添加一个div包裹
    设置其margin-left和margin-right值
    比起圣杯布局，多了一个div元素，但是少写了几个属性
   -->
   <div class="container">
     <div class="center">
       <div class="main">
        中间
       </div>
     </div>
     <div class="left">左侧</div>
     <div class="right">右侧</div>
   </div>
</body>
</html>

两栏布局-左侧固定，右侧自适应
两栏布局-右侧固定，左侧自适应
三栏布局-左侧固定、中间自适应、右侧固定
三栏布局-左侧固定、中间固定、右侧自适应
三栏布局-左侧自适应、中间固定、右侧固定

FC（Formatting Context）格式化上下文

概念：页面渲染中的一块区域
BFC（Block Formatting Context）块级格式化上下文
形成条件

float不为none
overflow为hidden、scroll、auto
display为inline-block、table-cell、table-caption
定位元素，position为absolute、fixed

特性

内部的盒子在垂直方向上，一个个的排列
垂直方向上的最大距离为margin的最大值
BFC区域不会与float元素发生重叠
计算BFC容器的高度时候，会把float元素的高度也计算在内
BFC就是页面中的一块独立区域，内部的子元素不会影响到外部

验证特性2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC</title>
  <style>
    .container {
      width: 200px;
      height: 300px;
      background-color: aquamarine;
      overflow: hidden;
    }
    /* 解决外边距塌陷 */
    .wrapper {
      overflow: hidden;
    }
    .box1 {
      width: 100%;
      height: 30px;
      background-color: #f00;
      margin: 10px 0;
    }
    .box2 {
      width: 100%;
      height: 30px;
      background-color: #00f;
      margin:50px 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 解决外边距塌陷 -->
    <div class="wrapper>
      <div class="box1">1</div>
    </div>
    <div class="box2">2</div>
  </div>
</body>
</html>

验证特性3

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC</title>
  <style>
    .container {
      width: 200px;
      height: 300px;
      background-color: aquamarine;
      overflow: hidden;
    }
    /* 这个时候如果不做任何处理，就会导致box2与
    box1重叠，也就是box1会遮盖住box2 */
    .box1 {
      /* float也会触发BFC，使得box1变成一个独立的容器 */
      float: left;
      width: 20px;
      height: 30px;
      background-color: #f00;
    }
    .box2 {
      width: 100%;
      height: 50px;
      background-color: #00f;
      /* 添加这行代码会使得box2变成一个独立的容器，
      触发BFC */
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1">
      1
    </div>
    <div class="box2">
      2
    </div>
  </div>
</body>
</html>

验证特性4

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC</title>
  <style>
    .container {
      width: 300px;
      background-color: #f00;
      border: 1px solid rebeccapurple;
      /* 触发BFC，变成一个独立的容器 
      计算BFC容器的高度时候，float元素的高度
      也参与计算*/
      overflow: hidden;
    }
    .box {
      float: left;
      width: 30px;
      height: 59px;
      background-color: #00f;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

BFC的作用

解决margin重叠的问题（添加独立的BFC容器）
解决浮动的高度塌陷（给父级元素设置overflow: hidden）
解决侵占浮动元素的问题

IFC（行级格式化上下文）

形成条件

font-size
height
line-height
vertical-align

IFC特性

IFC的元素会在一行中从左到右的排列
在一行上所有的元素会形成一个区域行框
行框的高度包含框的高度，高度为内部最高元素的高度
浮动的元素不会再行框中，会缩短行框的宽度
行框的宽度容纳不下子元素的时候，子元素会在下一行显示，同时形成一个新的行框
行框内的元素遵循text-align和vertical-align
容器的高度height = line-height + vertical-align