【HTML+CSS】宽高自适应与BFC

芒果Cake

已于 2022-12-13 18:44:45 修改

阅读量235

点赞数

分类专栏： HTML 文章标签： css html css3 前端 html5

于 2022-11-28 21:27:01 首次发布

本文链接：https://blog.csdn.net/huangwfu/article/details/128087702

版权

HTML 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本文详细介绍了BFC（Block Formatting Context）的概念及其触发条件，包括内部元素的排列规则和margin处理。BFC在解决margin重叠、两栏布局、高度塌陷等问题上的应用也进行了阐述。同时，讨论了CSS中的宽度自适应和高度自适应策略，以及min-height属性在确保内容物至少占据一定高度时的作用。最后，通过实例分析了最大最小宽度和高度在不同情况下的表现。

摘要由CSDN通过智能技术生成

文章目录

BFC的规则

BFC是什么?
BFC是块状格式化上下文, 块状元素才能参与的格式化上下文

块级盒子–>触发了BFC的条件–>BFC

触发BFC的条件

html
overflow: hideen/scroll/auto
position: absolute/fixed
float: left/right
display: inline-block/flex/linline-flex

BFC盒子的渲染规则

内部块级元素从上往下排列
内部的块级元素的垂直方向的距离有marign控制, 相邻的两个元素之间的marign控制, 相邻的两个元素之间marign会发生重叠, 以大的为准
BFC区域的元素的marign-left和区域的border-left相接触
BFC区域与外界毫不相干
BFC屈原不和浮动元素相重叠
计算BFC区域的高度, 浮动元素参与计算

BFC的应用

解决marign重叠问题
两栏布局和三栏布局
解决高度塌陷问题

宽度自适应

一个元素不写宽度或者宽度写为100%的时候, 宽度自适应父元素
一个脱离文档流(浮动、绝对定位、固定定位)的元素，宽度靠内容撑开

<style>
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .son{
            /* width: 100px; */
            height: 100px;
            background-color: skyblue;
        }
</style>
		<div class="father">
        <div class="son"></div>
    </div>

高度自适应

一个元素不写高度或者高度为auto的时候, 元素高度由内容物决定

<style>
         .father{
            width: 500px;
            /* height: 300px; */
            background-color: blue;
        }
        .son{
            width: 300px;
            height: 500px;
            background-color: pink;
        }
</style>
    <div class="father">
        <div class="son"></div>
    </div>

最小高度

一个元素高度为300px, 当内容物超过300px时, 还能由内容决定设置min-height
- min-height最小高度

<style>
        div{
            width: 500px;
            /* height: 300px; */
            border: 1px solid red;
            min-height: 300px;
        }
</style>

最小高度min-height
最大高度max-height
最小宽度min-width
最大宽度max-width

面试题案例-最大最小宽高

判断元素宽高

<style>
        .d1{
            min-width: 300px;
            max-width: 500px;
            background-color: pink;
            /* 父元素没有设置宽度,所以与父元素同宽
                然后收到最大范围的控制,所以是500px
            */
        }
        .d2{
            min-width: 300px;
            max-width: 500px;
            background-color: skyblue;
            float: left;
            /* 由于浮动脱离文档流的原因,元素宽高靠内容撑开,但是下面内容宽度很小
                然后又受到最小范围的限制,所有是300px
            */
        }
</style>
<div class="d1">文本1</div>
<div class="d2">文本2</div>