zoukankan      html  css  js  c++  java
  • BFC规范

    ##BFC规范 ###BFC规范是什么? BFC规范也叫块级格式化上下文。是指一个独立的容器。 ###如何触发BFC? 我们可以通过一下几种方式触发BFC

    1.通过浮动触发:float(除none)

    2.通过绝对固定定位触发:position:absoluteflxed

    3.通过display触发:display:inline-blockflex able-cells

    4.通过overflow触发:overflow:hiddenautoscroll

    ###什么时候需要触发BFC? 1、上下块级元素的margin相叠加的时候。

    style:
    .box1{
    	 300px;
    	height: 200px;
    	background: red;
    	margin:20px 0; 
    }
    .box2{
    	 300px;
    	height: 200px;
    	background: blue;
    	margin:50px 0; 
    }
    .box{
    	overflow: hidden;
    }
    
    html:
    <div class="box">
    <div class="box1"></div>
    </div>
    <div class="box">
    <div class="box2"></div>
    </div>
    

    2、解决margin传递问题

    style:
    .box1{
    	background: red;
    	border:1px solid #ccc;
    	overflow: hidden;
    }
    .box2{
    	 300px;
    	height: 100px;
    	background: blue;
    	margin-top:50px; 
    	float: left;
    }
    
    html:
    <div class="box1">
    	<div class="box2"></div>
    </div>
    

    3.解决浮动问题

    style:
    .box1{
    	background: red;
    	border:1px solid #ccc;
    	overflow: hidden;
    }
    .box2{
    	 300px;
    	height: 100px;
    	background: blue; 
    	float: left;
    }
    
    html:
    <div class="box1">
    	<div class="box2"></div>
    </div>
    

    4、解决覆盖问题

    style:
    .box1{
    	background: red;
    	 300px;
    	height: 100px;
    	border:1px solid #ccc;
    	float: left;
    }
    .box2{
    	overflow: hidden;
    	height: 300px;
    	background: blue; 
    }
    
    html:
    <div class="box1"></div>
    <div class="box2">154545</div>
    

    可以实现左边固定,右边自适应的两栏布局。

  • 相关阅读:
    Playwright安装及基本用法
    生成随机数、随机字符串
    xmind2testcase使用
    jmeter5.0二次开发环境搭建(IDEA)
    pytest配置文件pytest.ini
    pytest+allure2生成测试报告
    pytest生成html报告-使用pytest-html插件方式
    pytest一些简单参数
    pytest简单搭建和入门
    python3学习-元组
  • 原文地址:https://www.cnblogs.com/xiaojianwei/p/10138040.html
Copyright © 2011-2022 走看看