css--浮动、定位、BFC

小白小白从不日白

已于 2022-04-05 20:36:38 修改

阅读量639

点赞数 2

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

于 2021-06-05 19:32:17 首次发布

本文链接：https://blog.csdn.net/weixin_43285360/article/details/117603736

版权

html+css 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、浮动

1.1 常用的 Display 的属性取值

2.6 粘性（sticky ）定位（拓展）

一、浮动

为什么需要使用浮动？

可以让元素同行显示，并且没有兼容问题

怎么让盒子同行显示？

diplay：inline-block

缺点：盒子和盒子之间会产生5px的间距，存在兼容性问题，ie7及以下不能同行显示
W3C提供的浮动 float

1.1 常用的 Display 的属性取值

可以修改元素的类型，让块级元素和内联元素相互转换

值	描述
none	此元素不会被显示
block	此元素将显示为块级元素
inline	此元素会被显示为内联元素
inline-block	行内块元素
flex	弹性盒模型

元素隐藏属性对比：

属性	描述
dislay: none;	隐藏自己，隐藏后原位置不保留
visibility: hidden;	隐藏自己，隐藏后原位置保留
opacity: 0;	隐藏自己，隐藏后原位置保留
overflow: hidden;	溢出部分隐藏

1.2 文档流

文档流是文档中可显示对象在排列时所占用的位置 / 空间

例如：块元素自上而下摆放，内联元素，从左到右摆放

标准流里面的限制非常多，导致很多页面效果无法实现

文档流产生的问题:

高矮不齐，底边对齐

空格折叠

元素无空隙

如果我们现在就要并排顶部对齐，那该怎么办呢？办法是：移民！脱离标准流！

脱离文档流：

元素不再标准文档流的规范，有自己排列方式

使⼀个元素脱离标准文档流有三种方式：

1.3 浮动的属性取值

float 属性定义元素在哪个方向浮动，任何元素都可以浮动

值	描述
left	元素向左浮动
right	元素向右浮动

浮动的原理：

浮动以后使元素脱离了文档流
浮动只有左右浮动，没有上下浮动

注意：

多个元素设置浮动时，后面的元素会找到前面元素的边界就停下来，第一个浮动元素是找到父元素的边界就停下来
块级元素浮动一般会设置宽高，默认的宽度auto失效

特点：

同行显示，排列不下时会进行换行
浮动会脱离标准文档流，在标准文档流之上（原来的位置空间不再占有）
原来的空间不再占有，页面进行了重绘
如果行级元素设置浮动后，可以支持宽高（例如span标签浮动后可设置宽高）

脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象

当所有元素同时浮动的时候，会变成水平摆放，向左或者向右

当容器不足以横向摆放内容时候，会在下一行摆放

1.4 常见的清除浮动的几种方式

当元素设置 float 浮动后，该元素就会脱离文档流并向左 / 向右浮动

公共样式：

<style>
        .one {
            float: left;
            width: 500px;
            height: 400px;
            background-color: #f40;
        }
        
        .two {
            float: left;
            width: 800px;
            height: 600px;
            background-color: skyblue;
        }
        
        .footer {
            width: 1200px;
            height: 400px;
            background-color: orange;
        }
</style>

0. 给父元素设置高度

略

1. 额外标签法

 <div class="box">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="clear">额外标签</div>
    </div>

    <div class="footer"></div>

此时的结果如下：

不难发现原本应该在下面的黄色框框由于上面两个div元素的浮动（由于其父元素未设置高度因此当其子元素浮动时其父元素的高度为0）使其移到了上面

在此时我们可以通过额外标签法并设置clear: both;属性即可清除浮动。

 .clear {
            clear: both;
        }

缺点：添加无意义标签，语义化差

2. 给父级元素添加overflow属性

如果有父级塌陷，并且同级元素也收到了影响，可以使用 overflow 清除浮动

<div class="box">
        <div class="one">1</div>
        <div class="two">2</div>
</div>

<div class="footer"></div>

此时若我们给其父元素.box，添加overflow: hidden;属性时则也可以解决浮动所带来的高度坍塌问题

<style>
        .box {
            overflow: hidden;
        }
</style>

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

3. 使用after伪元素清除浮动（推荐）

如果父元素塌陷同时影响后续元素，可以使用伪对象方式清除

<div class="box clearfix">
        <div class="one">1</div>
        <div class="two">2</div>
    </div>

    <div class="footer"></div>

此时我们只需给父元素使用after伪元素即可解决

<style>
    .clearfix:after {
            /*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        .clearfix {
            *zoom: 1;
            /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        }
</style>

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

4. 使用before和after双伪元素清除浮动（推荐）

如果父元素塌陷同时影响后续元素，可以使用伪对象方式清除

<div class="box clearfix">
        <div class="one">1</div>
        <div class="two">2</div>
    </div>

    <div class="footer"></div>

 <style>
        .clearfix:after,
        .clearfix:before {
            content: "";
            display: table;
        }
        
        .clearfix:after {
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
        }
</style>

缺点：用zoom:1触发hasLayout

5. 给受影响的元素增加clear属性

如果同级元素受到影响，直接给受到影响的元素增加 clear 属性

值	描述
left	清除左浮动
right	清除右浮动
both	同时清除左右浮动

1.5 多余文字隐藏，用...代替

只显示单行文本，多余文字隐藏，用...代替

/* 规定文字不换行 */
white-space: nowrap;
/* 超出部分隐藏 */
overflow: hidden;
/* 多余用...代替 */
text-overflow: ellipsis;

显示多行文本，多余文字使用...代替

/* 老版本设置弹性盒子 */
display: -webkit-box;
/* 设置里面内容的排列方式 */
-webkit-box-orient: vertical;
/* 设置显示几行文本 */
-webkit-line-clamp: 2;
/* 溢出隐藏隐藏 */
overflow: hidden;

二、定位

定位在css中是一个非常重要的概念，主要是针对页面上的元素，进行指定位置排列方式

2.1 概述

position 属性指定了元素的定位类型

值	描述
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

设置静态定位 static（了解）：

默认每个元素都是static定位，参考标准文档流

标准文档流：在页面布局过程中，元素默认按照从上到下，从左到右，块级元素独占一行，行级元素共享一行的排列规范。

其中，绝对定位和固定定位会脱离文档流

设置定位之后，相对定位和绝对定位是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档

2.2 相对定位（重点）

语法：

position: relative;

定义偏移量：

设置定位之后可以使用四个方向值进行调整位置： left、 top、 right、 bottom

特点：

设置元素的相对定位后，元素不会脱离文档流，只是破坏文档流

什么是破坏文档流？

元素在页面布局过程中，元素移动时不遵循标准文档流的规范，移动完成后会回到标准文档流里。只是在移动过程中会破坏文档流的规范

只给元素设置相对定位，对元素本身是不会有影响，除非设置偏移量，元素才会发生移动
元素一旦设置了偏移量，会按照指定的方向进行移动，移动过程中不遵循标准文档流，移动完成后还在标准文档流里面。
移动过程是参考原来的位置进行移动
原来的位置依然保留，不会消失（原来的空间还在）

注意：

子元素相对定位后，父元素进行移动，子元素会跟着移动（子元素原来的位置跟着父元素一起移动）
相对定位一般不会单独使用，也不会单独用来布局，通常配合绝对定位来使用

2.3 绝对定位（重点）

元素会脱离文档流，按照你设置的方向进行移动

语法：

position:absolute;

偏移量：

top：距离参考位置的上边缘的距离
bottom：距离参考位置下边的距离
left：距离左边的偏移
right：距离右边的偏移

定位父级：

为什么设置定位父级？

因为绝对定位默认是参考文档进行移动，无法满足定位需求

怎么设置定位父级？

子绝父相

只需要找到结构父级或者定位父级设置一个相对定位即可，当然设置固定定位和绝对定位也是可以的。因为相对定位不会影响其他元素的排列，并且相对定位盒子本身不会脱离文档流

结构父级：盒子在html代码结构中的父元素
定位父级：作为参考位置的父级称为定位父级。父级可以是结构父级，也可以是结构父级的父级。

<style>
  	 .box2{
        width: 400px;
        height: 400px;
        background-color: green;
        /* 设置定位参考位置 
        position: fixed  absolute  relative;
        */
        position: relative;
      
    }
    .box3{
        width: 100px;
        height: 100px;
        background-color: tomato;
        position: absolute;
        right: 0;
        bottom: 0;
    
    }
  </style>
  
  <!-- 定位父级 -->
    <div class="box1">
        <!-- 结构父级 -->
        <div class="box2">
            <div class="box3">3</div>
        </div>
    </div>

特点：

会脱离文档流，原来的位置不存在
绝对定位前面的标准文档流里面的元素是不会受影响。
一旦设置了绝对定位，后面绝对定位的元素会盖住前面绝对定位的元素（后面绝对定位元素的层级更高）
绝对定位设置偏移量后，是参考整个文档进行移动
行级元素也可以设置绝对定位，一旦设置了默认支持宽高

注意：

通常需要配合相对定位使用

2.4 定位层级 z-index

设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

只针对于定位元素（相对定位，固定定位，绝对定位）有效

语法：

z-index:数字;

默认为0 ，值越大，层级越高，可以设置负值,不能是小数

如果没有设置z-index，按照代码结构，后面的元素盖住前面元素，后面定位的元素层级更高

示例：

2.5 固定定位 (重点)

固定在屏幕上，脱离文档流，按照指定的方向进行移动

语法：

position:fixed;

特点：

脱离文档流，原来的空间不存在
设置偏移量后，是参考整个文档进行移动

应用场景：

头部导航。广告，提示框等等

2.6 粘性（sticky ）定位（拓展）

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

语法：

position: sticky;

基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈（yu 界限门坎）值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意:

Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>粘性定位</title> 
<style>
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">我是粘性定位!</div>

<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>

</body>
</html>

2.7 定位元素宽度

绝对定位元素的width设置100%是参考盒子的宽度

没有定位父级，100%参考文档的宽度
有定位父级，100%参考定位父级的宽度

没有设置定位的元素，100%参考结构父级的宽度

2.8 利用定位实现下拉列表效果

      .nav {
          width: 100%;
          height: 61px;
           position: relative;
        }

        .nav li {
            list-style: none;
            float: left;
            padding: 20px 26px;
        }

        .nav a { 
            color: #000;
            text-decoration: none; 
        } 

        .nav-list { 
            width: 100%;
            height: 300px;
            background-color: red;
            position: absolute;
            left: 0; 
            top: 100%;
            display: none; 
        } 
        
        .nav li:hover>.nav-list {
            display: block; 
        }

    <div class="nav">
      <ul>
        <li>
          <a href="#"> 首页 </a>
          <div class="nav-list" style="background-color: red"></div>
        </li>
        <li>
          <a href="#"> 手机 </a>
          <div class="nav-list" style="background-color: green"></div>
        </li>
        <li>
          <a href="#"> 配件 </a>
          <div class="nav-list" style="background-color: orange"></div>
        </li>
        <li>
          <a href="#"> 服务 </a>
          <div class="nav-list" style="background-color: yellow"></div>
        </li>
        <li>
          <a href="#"> 下载 </a>
          <div class="nav-list" style="background-color: teal"></div>
        </li>
        <li>
          <a href="#">amigoOS</a>
          <div class="nav-list" style="background-color: darkorchid"></div>
        </li>
      </ul>
    </div>

2.9 利用定位实现--图片上面定位文字

        *{
            margin: 0;
            padding: 0;
        }

        body{
            background-color: #f1f1f1;
        }

        .container{
            width: 1240px;
            margin: 0 auto;
        }

        .container ul{
            overflow: hidden;
            clear: both;
        }

        /* 
            1240
            303 * 4 = 1212 + 27 = 1239
        */
        .container ul li{
            position: relative;
            float: left;
            list-style: none;
            background-color: #fff;
            margin-right: 9px;
            margin-top: 10px;
            width: 303px;
            height: 375px;
        }

        .container ul li:nth-child(4n){
            margin-right: 0;
        }

        .container ul li a{
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
        }

        .container ul li a img{
            height: 230px;
            margin-top: 30px;
        }

        .container ul li a .text{
            width: 100%;
        }

        .text .name{
            display: block;
            color: #333;
            font-size: 16px;
            margin-bottom: 2px;
        }

        .text .desc{
            display: block;
            color: #999;
            font-size: 14px;
        }

        .text .price i{
            font-style: normal;
            font-size: 14px;
            bottom: 3px;
        }

        .text .price{
            display: inline-block;
            color: #c00;
            font-size: 22px;
            padding-left: 14px;
        }

        .text .price em{
            font-size: 16px;
            font-style: normal;
        }

        .product-sign{
            position:absolute;
            top: 30px;
            left: 30px;
            display: block;
            width: 60px;
            height: 60px;
            background-color: #ff64a6;
            border-radius: 50%;
            line-height: 60px;
            color: #fff;
            font-size: 16px;
            text-align: center;
        }

    <div class="container">
        <ul>
            <li>
                <a href="#">
                    <img src="./images/1.png" alt="">
                    <div class="text">
                        <span class="name">魅族 18</span>
                        <span class="desc">限时领券至高立省1000 | 12期免息</span>
                        <span class="price"><i>￥</i>3999<em>起</em></span>
                    </div>
                    <span class="product-sign">免息</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/1.png" alt="">
                    <div class="text">
                        <span class="name">魅族 18</span>
                        <span class="desc">限时领券至高立省1000 | 12期免息</span>
                        <span class="price"><i>￥</i>3999<em>起</em></span>
                    </div>
                    <span class="product-sign">免息</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/1.png" alt="">
                    <div class="text">
                        <span class="name">魅族 18</span>
                        <span class="desc">限时领券至高立省1000 | 12期免息</span>
                        <span class="price"><i>￥</i>3999<em>起</em></span>
                    </div>
                    <span class="product-sign">免息</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/1.png" alt="">
                    <div class="text">
                        <span class="name">魅族 18</span>
                        <span class="desc">限时领券至高立省1000 | 12期免息</span>
                        <span class="price"><i>￥</i>3999<em>起</em></span>
                    </div>
                    <span class="product-sign">免息</span>
                </a>
            </li>
        </ul>
    </div>

2.10 盒子居中技巧

margin:auto auto：可以让元素水平居中，但垂直方向无法居中，auto是一个值，浏览器自动计算剩余空间再均分。

网页在垂直方向上高度变化很大，内容不一样，高度就不一样，所以垂直方向上auto被禁用。

方案一：通过margin自动计算

居中盒子上设置绝对定位，使用四个方向都为0，再配合margin:auto auto;;参考的盒子可以设为定位父级。

居中盒子相对于定位父级进行水平垂直居中，通过margin自动计算再均分

<style>
       .box1{
           width: 500px;
           height: 500px;
           background-color: blue;
           /*定位父级*/
           position: relative;
       }
       .box2{
            width:100px;
           height: 100px;
           background-color: aqua; 
           /* 设置绝对定位 */
           position: absolute;
           /*设置偏移量来确定它的活动范围  */
           top:0;
           right: 0;
           bottom: 0;
           left:0;
           margin: auto auto;
       }
   </style>
   <div class="box1">
        <div class="box2"></div>
    </div>

方法二：借助calc函数进行元素

局限性：父盒子必须是正方形，因为margin设置百分比是参考父盒子的宽度

margin-top: 大盒子的高度的一半，减小小盒子高度的一半

margin-left：大盒子宽度的一半，减去小盒子宽度的一半

注意：借助calc配合marign使盒子居中，需要父盒子的宽度和高度一致，才有效。否则不能使用。并且calc函数还有兼容性问题

/* 借助calc函数自动计算，可以进行加减乘除的运算 */
/* calc函数的符号前后需要空格隔开 */
margin-top: calc(50% - 小盒子高度的一半);
margin-left: calc(50% - 小盒子宽度的一半);

方案三：使用绝对定位，配合marign可以实现

绝对定位使用top：50%，left：50%，然后设置margin-top为小盒子高度的一半（负值），margin-left为小盒子宽度的一半（负值）

好处：兼容性比较好

坏处：margin-top和margin-left需要自己计算

<style>
       .box1{
           width: 900px;
           height: 400px;
           background-color: yellow;
           /* 设置定位父级 */
           position: relative;
       }
       .box2{
            width:300px;
           height: 100px;
           background-color:green;
           position: absolute;
           top:50%;
           left:50%;
           margin-top: -50px;
           margin-left: -150px;
 
       }
   </style>
	<div class="box1">
        <div class="box2"></div>
    </div>

方案四：利用CSS3的 transform 属性再配合 margin

.box {
    margin-left: 50%;
    margin-top: 50%;
    transform: translate(-50%, -50%);
}

三、BFC和IFC

3.1 什么是IFC

FC（formating context）格式化上下文，是css2.1提出的一个概念

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

常见的FC分为：

BFC（block formating context）和IFC（ inline formating context），他是css提出的一种视觉渲染的概念。

3.2 BFC

BFC：块级格式化上下文

指页面上的一个标签，但是不一定完全是块级元素。它有指定的满足条件，它有自己的渲染规则，决定了BFC的内部的HTML标签是如何进行定位以及不同的BFC之间如何进行定位

BFC区域的特点：

内部的盒子会在垂直方向上，一个接着一个地放置（标准文档流）

Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会产生重叠

属于不同的BFC区域的两个相邻的box的margin就不会发生重叠
解决方案：把其中一个box放到一个新BFC区域可以解决margin重叠的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [class*="box"]{
            width: 300px;
            height: 200px;
            border: 1px solid #f40;
        }

        .container {
            /* 将 container 容器变为 BFC */
            overflow: hidden;
        }

        .box1 {
            margin-bottom: 20px;
        }

        .box2 {
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
    </div>
    <div class="box2"></div>
</body>
</html>

每个元素的左外边缘与包含块的左边相接触（从左到右的格式化，否则相反）。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。（解决浮动元素与非浮动元素的重叠）
BFC的区域不会和浮动盒子重叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [class*="box"]{
            width: 300px;
            height: 200px;
            border: 1px solid #f40;
        }

        .container {
            /* 将 container 容器变为 BFC */
            /* overflow: hidden; */
            width: 820px;
            height: 300px;
            border: 1px solid;
            /* position: relative; */
        }

        .box1 {
            float: left;
            /* width: 400px; */
            background-color: #f40;
        }

        .box2 {
            width: 500px;
            /* 1. */
            /* float: left; */

            /* 2. */
            /* overflow: hidden; */

            /* 3. */
            /* position: absolute; */
            /* left: 400px; */

            /* 4. */
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

计算BFC区域的高度时，浮动元素也参与计算

可以解决子元素浮动父元素高度塌陷的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [class*="box"]{
            width: 300px;
            height: 200px;
            border: 1px solid #f40;
        }

        .container {
            width: 820px;
            border: 1px solid;

            /* 将 container 容器变为 BFC */
            overflow: hidden;
        }

        .box1 {
            float: left;
            width: 400px;
            height: 400px;
            background-color: #f40;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
    </div>
</body>
</html>

BFC 就是页面中一个独立的容器，容器里面的子元素不会影响外面元素，反之也如此

如何变成BFC容器或者说（如何升级为BFC）或者说（产生BFC的方法）：

设置overflow 不为 visible 通常：overflow:hidden
设置position为absolute和fixed（脱离文档流）
设置float不为none（脱离文档流）
设置display为inline-block、flex
html 根标签（html本身就是一个BFC容器）

三栏式布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 100%;
        }

        .left {
            float: left;
            width: 300px;
            height: 200px;
            background-color: #f6bfbc;
        }

        .center {
            width: auto;
            height: 200px;
            background-color: #cd5e3c;
            /* BFC */
            overflow: hidden;
        }

        .right {
            float: right;
            width: 300px;
            height: 200px;
            background-color: #f40;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 前面两个盒子一个左浮动，一个右浮动，
            中间盒子放最后，设置成BFC容器 -->
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="center"></div>
    </div>
</body>
</html>

两栏式布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .contanier {
            width: 100%;
        }

        .left {
            width: 25%;
            height: 200px;
            background-color: #f40;
            float: left;
        }

        .right{
            width: auto;
            height: 200px;
            background-color: skyblue;
            /* 形成BFC */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
</html>

3.3 IFC

行级格式化上下文（inline formating context ）和块格式化上下文一样，它是页面进行CSS视觉渲染时的一个概念

指的是一行区域的渲染规则，确定了一行中,行内元素如何进行排列以及对齐

行盒 ——line box（重要概念）：

这是一个显示区域，根据块级容器类，每一行的多个元素共同生成一个行盒模型。（指的是一行内容的整块显示区域）

IFC负责的矩形区域就叫做行盒

宽度：一行中放置的元素的宽度

高度：由子节点的最高点和子节点的最低点来决定。高度其实由font-size、font-family、line-height、height共同决定，决定行内元素的垂直对齐方式vertical-align

绿色：顶线

蓝色：中线

红色：基线

紫色：底线

影响行盒高度的因素：

font-size：不同的font-size值会影响行盒的高度

font-family：不同font-family也会影响行盒的高度，取最大值

原因：设计师在设计字体时，不同的字体默认的行高，字体默认的样式是不同，所以不同字体，影响行盒的高度不同。

line-height/height：设置行高会影响行盒的高度，最终显示效果会发生改变；设置元素(行内块级元素)的高度，也会影响行盒的高度

行高的取值范围：它其实是每行上边空白区域的位置，到下一行空白区域的位置。（不是顶线到下一行的顶线）

参考图片

vertical-align：设置行内元素的垂直方向的对齐方式，同时也会影响行盒的高度

文本之间及文本和图片之间垂直对齐方式：

baseline：默认值，以基线对齐
middle：中线对齐（重点）
text-top：顶线对齐
text-bottom：底线对齐
top：顶部对齐
bottom：底部对齐

文本之间

文字和文字之间排列方式，通过这个属性来设置参考位置

默认以基线进行对齐

文本和图片

文字和图片之间，可以设置参考线

文本和图片，默认图片的底部和文本的基线对齐：

给文本设置vertical-align，图片的底部参考文本vertical-align的值；
给图片设置vertical-align，文本的基线参考图片vertical-align的值；

表格中文字的对齐

可以控制表格中单元格里面的内容在垂直方向上的对齐方式

top：顶部对齐

bottom：底部对齐

middle：居中对齐（默认值）

table表格中，单元格垂直方向上对齐——居中，相当于vertical-align：middle

IFC区域的特点：

在IFC中，盒子水平放置，一个接着一个，从包含块的顶部开始。
在盒子间margin、border和padding的水平方向的值是有效。
这些盒子允许通过不同的方式进行对齐：他们的底部和顶部允许被对齐，或者通过文字的基线进行对齐。
行盒的高度由line-height的计算结果决定。

小白小白从不日白

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
css--浮动、定位、BFC

目录一、浮动1.1 Display1.2 文档流1.3 浮动1.4 常见的清除浮动的几种方式二、定位2.1 概述2.2 z-index2.3 利用定位实现下拉列表效果2.4 利用定位实现--图片上面定位文字一、浮动1.1 Display可以修改元素的类型，让块级元素和内联元素相互转换值描述 none 此元素不会被显示 block 此元素将显示为块级元素 inline 此元素会被显示为内联元素 i.
复制链接

扫一扫