前端HTML/CSS知识点系列

1. 什么是块级格式化上下文?【BFC(Block formatting context)】

BFC(Block FormattingContext,块级格式化上下文)是一个独立的渲染区域,其中的元素的布局不会受到外部元素的影响,反之亦然。BFC的创建有助于解决一些常见的布局问题,如清除浮动、避免外边距合并等
From:国内直连GPT:GPT4o

1.1如何触发BFC

可以通过以下几种方式来创建BFC:

浮动元素 (float 的值不为 none)
绝对定位元素 (position 的值为 `absolute``fixed`)
display 的值为 `inline-block、table-cell、table-caption``flex``overflow` 的值不为 `visible`

示例demo
在这里插入图片描述
在这里插入图片描述

2.关于页面布局

2.1 左侧固定宽度,右侧自适应的几种实现方式

2.1.1 Flex布局(推荐)

父容器设置display:flex,左侧子div设置一个固定宽度,右侧设置:flex:1,实现自适应宽度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flexbox Layout</title><style>.container {display: flex;}.left {width: 200px; /* 固定宽度 */background-color: lightcoral;}.right {flex: 1; /* 自适应宽度 */background-color: lightblue;}</style>
</head>
<body><div class="container"><div class="left">左侧固定宽度</div><div class="right">右侧自适应宽度</div></div>
</body>
</html>

2.1.2 Grid布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid Layout</title><style>.container {display: grid;grid-template-columns: 200px 1fr; /* 左侧固定宽度,右侧自适应 */}.left {background-color: lightcoral;}.right {background-color: lightblue;}</style>
</head>
<body><div class="container"><div class="left">左侧固定宽度</div><div class="right">右侧自适应宽度</div></div>
</body>
</html>

2.1.2 使用浮动和BFC(传统方法)

使用浮动和BFC来实现布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Float Layout</title><style>.container {overflow: hidden; /* 创建BFC */}.left {float: left;width: 200px; /* 固定宽度 */background-color: lightcoral;}.right {margin-left: 200px; /* 右侧宽度等于左侧固定宽度 */background-color: lightblue;}</style>
</head>
<body><div class="container"><div class="left">左侧固定宽度</div><div class="right">右侧自适应宽度</div></div>
</body>
</html>

2.2 圣杯布局

圣杯布局是一个经典的三栏布局,左右两侧固定宽度,中间栏自适应宽度。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Holy Grail Layout</title><style>body {display: flex;flex-direction: column;margin: 0;}.header, .footer {height: 50px;background-color: #ccc;}.main {display: flex;flex: 1;}.main > .left, .main > .right {width: 200px;background-color: #f0f0f0;}.main > .center {flex: 1;background-color: #e0e0e0;}</style>
</head>
<body><div class="header">Header</div><div class="main"><div class="left">Left Sidebar</div><div class="center">Main Content</div><div class="right">Right Sidebar</div></div><div class="footer">Footer</div>
</body>
</html>

2.3 卡片、网格布局

在这里插入图片描述

2.3.1使用grid布局

.grid-model-card {display: grid;/* grid-template-columns: repeat(4, 1fr); */grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));gap: 10px;padding: 10px;overflow: auto;
}
.kg-card-item {height: 288px;
}

2.3.1使用flex布局

使用flex布局有一点不方便,就是最后几个卡片可能会居中显示,而不是我们 想要的从左到右,所以需要在html补上占位元素,这样右边就有了”看不见的元素“占位置

在这里插入图片描述

  .card_content {width: 100%;display: flex;flex-wrap: wrap;justify-content: center;}.child_content {width: 340px;padding: 16px;height: 170px;}i {width: 340px;margin-right: 20px;}

等待更新…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/34619.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker环境部署ruoyi系统前后端分离项目

创建局域网 docker network create net-ry 安装Redis 1 安装 创建两个目录 mkdir -p /data/redis/{conf,data} 上传redis.conf文件到/data/redis/conf文件夹中 cd /data/redis/conf 3.2 配置redis.conf文件 配置redis.conf文件&#xff1a; redis.conf文件配置注意&…

【数据库】四、数据库编程(SQL编程)

四、数据库编程 另一个大纲&#xff1a; 5.1存储过程 5.1.1存储过程基本概念 5.1.2创建存储过程 5.1.3存储过程体 5.1.4调用存储过程 5.1.5删除 5.2存储函数 5.2.1创建存储函数 5.2.2调用存储函数 5.2.3删除存储函数 目录 文章目录 四、数据库编程1.SQL编程基础1.1常量1.2变…

轻松两步,借助向量数据库 VectorDB 与千帆 Appbuilder 构建个性化本地问答知识库

在我们日常的工作和生活中&#xff0c;经常会遇到需要快速获取和管理大量信息的情况。无论是解答客户的问题&#xff0c;还是整理公司内部的资料&#xff0c;一个高效的知识库系统都能帮我们省下大量时间和精力。 为了帮助大家快速构建 RAG 应用&#xff0c;我们之前发布了一个…

虚拟机中VSCode+gcc环境配置

一、安装VSCode 1、在官网下载软件包&#xff1a; 地址&#xff1a;Documentation for Visual Studio Code 2、下载后在放置deb包的文件夹直接打开终端&#xff0c;然后输入sudo dpkg -i code_1.90.2-1718751586_amd64.deb 3、安装成功提示&#xff0c;并显示该图标 二、配…

nginx+keepalived+tomcat集群实验

如遇星河 | nginx+keepalived高可用集群实验 木子87 | Keepalived+Nginx+Tomcat 实现高可用Web集群 环境 192.168.40.204 tomcat-1 192.168.40.138 tomcat-2 安装tomcat [root@bogon local]# vim /etc/profile 添加环境变量 JAVA_HOME=/usr/local/java PATH=$J…

mac 常用工具命令集合

一、vim 快捷键 1、移动光标 h j k l 左 下 上 右 箭头上 上移一行 箭头下 下移一行 0 跳至行首&#xff0c;不管有无缩进&#xff0c;就是跳到第0个字符 ^ 跳至行首的第一个字符 $ 跳至行尾 gg 跳至文首 G 调至文尾 5gg/5G 调至第5行w 跳到下一个字首&#xff0c;按标点或…

Java中如何处理ArrayIndexOutOfBoundsException异常?

Java中如何处理ArrayIndexOutOfBoundsException异常&#xff1f; 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在Java编程中&#xff0c;ArrayIndexOutOfBoun…

微信小程序学习(十):生命周期

1、应用生命周期 生命周期说明onLaunch监听小程序初始化&#xff0c;全局只会执行 1 次onShow监听小程序启动或切前台onHide监听小程序切后台 &#x1f517;应用生命周期官方文档 App({/*** 当小程序初始化完成时&#xff0c;会触发 onLaunch&#xff08;全局只触发一次&…

固特超声波清洗机怎么样?三大超声波清洗机美的、固特、希亦谁更好?

眼镜是我们日常生活中不可或缺的用具&#xff0c;但随着使用时间的增长&#xff0c;眼镜上的灰尘和污垢也会逐渐积累&#xff0c;传统的清洗方法往往难以彻底清洁。为了解决这一难题&#xff0c;超声波清洗机出现了&#xff01;它利用超声波振动原理&#xff0c;可以轻松、快速…

加载资源文件失败

背景 自己以前装了一个海康的深度学习算法平台&#xff0c;试用期是一个月&#xff0c;过了一个月之后&#xff0c;因为没有有效注册码或者加密狗的支持了导致无法使用&#xff0c;于是打算卸载掉&#xff0c;在卸载一个软件的时候&#xff0c;无论是使用控制面板还是软件自带的…

http 和 https 建立连接的不同

HTTP和HTTPS在建立连接时都需要进行“三次握手”&#xff0c;因为三次握手是TCP协议的一部分&#xff0c;用于建立可靠的传输层连接。 HTTP和HTTPS在建立连接时的过程 HTTP 的三次握手 HTTP协议本身是无状态的应用层协议&#xff0c;它依赖于传输层的TCP协议来建立和管理连接…

AI写文章生成器,这些工具都可以一键智能生成文章

在AI技术快速发展的今天&#xff0c;AI写作生成器成为我们创作内容的重要工具&#xff0c;它可以提高我们的写作效率&#xff0c;节省时间和精力。下面小编就来和大家分享几款优秀的AI写作生成器&#xff0c;帮助你快速生成高质量的文章。 1.专业AI写作工具-文章在线生成器 专…

LeetCode热题100——字母异位词分组

给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入: strs [“eat”, “tea”, “tan”, “ate”, “nat”, “bat”] 输出: [[“bat”],[“nat”,“tan”…

计算机网络 访问控制列表以及NAT

一、理论知识 1. 单臂路由 单臂路由是一种在路由器上配置多个子接口的方法&#xff0c;每个子接口代表不同的 VLAN&#xff0c;用于在一个物理接口上支持多 VLAN 通信。此方法使得不同 VLAN 之间可以通过路由器进行通信。 2. NAT (网络地址转换) NAT 是一种在私有网络和公共…

步步精科技诚邀您参加2024慕尼黑上海电子展

尊敬的客户&#xff1a; 我们诚挚地邀请您参加即将于2024年7月8日至7月10日在上海新国际博览中心举办的2024慕尼黑上海电子展&#xff08;electronica China&#xff09;。此次展会汇聚了国内外优秀企业&#xff0c;展示从元器件到系统集成方案的完整产品链&#xff0c;为各行…

FragMent嵌套问题

在我们日常项目中应该经常会用到多个fragment嵌套的代码架构&#xff0c;虽然架构简单&#xff0c;但是其中会经常遇到各种不知名和各种奇葩的问题 1.页面显示空白 现象&#xff1a;当我们应用切换到其他应用&#xff0c;然后再重新进入到我们的应用&#xff0c;这时&#xff…

linux 下配置docker mirrors

一、配置mirrors vi /etc/docker/daemon.json {"registry-mirrors": ["https://docker.blfrp.cn"],"log-opts": {"max-size": "10m","max-file": "3"} }#完成配置后重启docker systemctl restart dock…

Python里dict是什么?

在Python中&#xff0c;dict&#xff08;或称为字典&#xff09;是一种可变的数据类型&#xff0c;用于存储键值对&#xff08;key-value pairs&#xff09;。它允许你以任意类型的数据作为键&#xff08;key&#xff09;&#xff0c;并将键与值&#xff08;value&#xff09;关…

自学指南:必备书籍清单--近100本R语言及生物信息相关书籍

R语言是一种功能丰富的编程语言&#xff0c;数据处理、统计分析是大家所熟知的基本功能。开源免费、活跃的全球社区、灵活可扩展等优点促使R语言飞速发展。目前&#xff0c;CRAN 软件包存储库包含 20446 个可用软件包&#xff0c;涵盖了从生物信息到金融分析等广泛的应用领域。…

【uniapp】uniapp开发微信小程序入门教程

HBuilderx中uniapp开发微信小程序入门教程 一、 环境搭建 1. HBuilderx下载安装 HBuilderx下载安装地址 2. 微信开发者工具下载安装 微信开发者工地址具下载安装 二、创建uniapp项目 选择&#xff1a;文件>新建>项目>uni-app 输入项目名称>选择默认模板>…