首页 > 其他分享 >通过 BFC 实现页面布局

通过 BFC 实现页面布局

时间:2022-11-15 13:45:00浏览次数:43  
标签:BFC color 布局 height column background hidden 页面 你好

 

 

 

 实现效果如图

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Title</title>
        <style>
            .contain0 {
                overflow: hidden;
                width: 100px;
                height: 100px;
                background-color: pink;
            }

            .wrapper {
                overflow: hidden;
            }

            .box1 {
                height: 20px;
                margin: 10px 0;
                background-color: blue;
            }

            .box2 {
                height: 20px;
                margin: 20px 0;
                background-color: blue;
            }
            .contain1 > .column:nth-of-type(1) {
                float: left;
                width: 200px;
                height: 300px;
                margin-right: 10px;
                background-color: pink;
            }

            .contain1 > .column:nth-of-type(2) {
                /* 创建bfc */
                /* 不设宽度,实现宽度自适应 */
                overflow: hidden;
                height: 300px;
                background-color: purple;
            }

            .contain2 > .column:nth-of-type(1),
            .contain2 > .column:nth-of-type(2) {
                width: 100px;
                height: 300px;
                background-color: blue;
            }
            .contain2 > .column:nth-of-type(1) {
                float: left;
            }

            .contain2 > .column:nth-of-type(2) {
                float: right;
            }

            .contain2 > .column:nth-of-type(3) {
                /* 创建bfc */
                /* 不设宽度,实现宽度自适应 */
                overflow: hidden;
                height: 300px;
                background-color: pink;
            }
            .contain3 > .left {
                float: left;
                width: 100px;
                height: 100px;
                background-color: yellow;
            }

            .contain3 > p {
                background-color: blue;
                /* 创建bfc */
                /* 不设宽度,实现宽度自适应 */
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <h2>全部通过overflow:hidden,来变成BFC容器</h2>
        <div class="contain0">
            <div class="wrapper">
                <div class="box1"></div>
            </div>
            <div class="box2"></div>
        </div>
        <div>============================================</div>
        <h3>左侧宽度固定,右边自适应</h3>
        <div class="contain1">
            <div class="column"></div>
            <div class="column"></div>
        </div>
        <div>============================================</div>
        <h3>两侧宽度固定,中间自适应</h3>
        <h4>
            子元素浮动,子元素不浮动元素设置高度或者父元素overflow:hidden清除浮动,从而撑起父元素高度
        </h4>
        <div class="contain2">
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
        </div>
        <div>============================================</div>
        <h3>避免文字环绕</h3>
        <div class="contain3">
            <div class="left"></div>
            <p>
                你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
                你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
                你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
            </p>
        </div>
    </body>
</html>

 

标签:BFC,color,布局,height,column,background,hidden,页面,你好
From: https://www.cnblogs.com/beileixinqing/p/16892145.html

相关文章

  • 页面间通信
    url传参index.js路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如'path?key=value&key2=value2'wx.navigateTo({url:'./te......
  • 自定义页面
    [Page构造器]Page({/***页面的初始数据*/data:{},/***生命周期函数--监听页面加载*/onLoad:function(e){},/**......
  • 新增弹框内表单布局
    //表单element-ui//表单<el-formlabel-width="120px":model="form":rules="rules"ref="form"><el-form-itemprop="rulesprop"label="部门名称">//文本框<......
  • vue 前端读取后端excel文件流在页面显示、导出
    前端读取后端excel文件流在页面显示、导出,主要是样式布局要完全不变,所以不能用a-table/el-table,采用三方luckyexcel安装依赖 npminstallluckyexcel<template><......
  • 使用router跳转页面出现空白页
    一、问题使用router进行页面跳转,路径已经跳转但是出现了空白页,并且显示以下提示  同时在空白页刷新之后能够出现二、解决办法1、出现问题的原因<transition>中的......
  • Linux虚拟地址空间布局
       在多任务操作系统中,每个进程都运行在属于自己的内存沙盘中。这个沙盘就是虚拟地址空间(VirtualAddressSpace),在32位模式下它是一个4GB的内存地址块。在Linux系统......
  • 直播小程序源码,小程序移动端登录界面调整布局
    直播小程序源码,小程序移动端登录界面调整布局XML布局代码如下: <?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk......
  • C# iText 7 切分PDF,处理PDF页面大小,添加水印
    C#iText7切分PDF,处理PDF页面大小,添加水印 一、itext我要使用itext做一个pdf的页面大小一致性处理,然后再根据数据切分出需要的pdf.iText的官网有关于它的介绍,http......
  • 如何在调试页面的时候清除页面的缓存?
    1.按F12,弹出下图2.点击右上角的三个点:3.点击settings  4.找到Network,下面的Disablecache(whileDevToolsisopen) ......
  • uniapp 微信小程序分享页面
    <buttonopen-type="share"v-bind:data-student="item"class="share">分享</button>指定按钮的类型open-type="share"分享需要的信息要使用v-b......