前端知识库Html5和CSS3

1、常见的水平垂直居中实现方案

最简单的方案是flex布局

.container{display: flex;align-items: center;justify-content: center;
}

绝对定位配合margin:auto(一定要给.son宽高)

.father {position: relative;height: 300px;
}
.son {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 50px;height: 50px;
}

绝对定位配合transform实现

.father {position: relative;
}
.son {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

2、行内元素,块级元素,空(void)元素(即没有内容的HTML元素)

块级元素: div、ul、li、dl、dt、dd、p、h1-h6、blockquote

行内元素: a、b、span、img、input、strong、select、label、em、button、textarea

空元素: br、meta、hr、link、input、img

3、BFC元素

我们在页面布局的时候,经常出现以下情况:

  • 这个元素高度怎么没了?
  • 这两栏布局怎么没法自适应?
  • 这两个元素的间距怎么有点奇怪的样子?
  • ......
原因是元素之间相互的影响,导致了意料之外的情况,这里就涉及到 BFC概念

BFC(Block Formatting Context)

即块级格式化上下文,它是页面中的一块渲染区域,并且有一套属于自己的渲染规则:

  • 内部的盒子会在垂直方向上一个接一个的放置
  • 对于同一个BFC的俩个相邻的盒子的margin会发生重叠,与方向无关。
  • 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时,浮动子元素也参与计算
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然

如何生成一个BFC元素呢

  • 根元素,即HTML元素
  • 浮动元素:float值为left、right
  • overflow值不为 visible,为 auto、scroll、hidden(常用)
  • display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
  • position的值为absolute或fixed

常用于以下3个场景

  • 防止margin重叠(塌陷)
  • 自适应多栏布局
  • 清除内部浮动

防止margin重叠(塌陷)

正常情况下,如果没有.container容器那么两p间隔是100px,这就是margin重叠了,解决方案就是给其中一个p套上一个BFC(div加上overflow: hidden;),那么两p间隔是200px了

<style>.container {overflow: hidden;// 新的BFC}p {color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align:center;margin: 100px;}
</style>
<body><p>Haha</p ><div class="container"><p>Hehe</p ></div>
</body>

清除内部浮动

正常情况下,由于浮动元素的存在.par是不会有高度的,可以给他加上overflow: hidden;变为BFC,就会计算浮动元素的高度了

<style>.par {border: 5px solid #fcc;width: 300px;overflow: hidden;}.child {border: 5px solid #f66;width:100px;height: 100px;float: left;}
</style>
<body><div class="par"><div class="child"></div><div class="child"></div></div>
</body>

自适应多栏布局

正常情况下.aside会浮动并且压在.main上,可以根据BFC的区域不会与浮动盒子重叠的特性,把.main变为BFC,这样.main就实现了宽带自适应了,并且实现左右两栏布局了。

<style>body {width: 300px;position: relative;}.aside {width: 100px;height: 150px;float: left;background: #f66;}.main {height: 200px;background: #fcc;overflow: hidden;}
</style>
<body><div class="aside"></div><div class="main"></div>
</body>

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

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

相关文章

PID控制参数整定(调节方法)原理+图示+MATLAB调试

PID控制参数整定&#xff08;调节方法&#xff09;原理图示MATLAB调试 Chapter1 PID控制参数整定&#xff08;调节方法&#xff09;原理图示MATLAB调试序一、P参数选取二、I的调节三、D的调节四、总结 Chapter2 PID参数调整&#xff0c;个人经验&#xff08;配输出曲线图&#…

【51单片机系列】独立按键介绍

本文是关于独立按键的介绍及使用。首先介绍了按键&#xff0c;包括什么是按键及使用按键时如何实现软件消抖。然后使用proteus仿真实现独立按键控制LED指示灯的操作。 之前的LED、蜂鸣器、数码管中IO口都是作为输出使用&#xff0c;这里通过独立按键实验介绍IO口作为输入的使用…

Edge 中的msedgewebview2总想联网

目录预览 一、问题描述二、原因分析三、解决方案四、参考链接 一、问题描述 使用Edge浏览器的时候&#xff0c;右下角火绒总会弹出“msedgewebview2”想要联网的弹窗&#xff0c;如下 点击发起程序&#xff0c;找到路径如下&#xff1a; C:\Program Files (x86)\Microsoft\…

zabbix 进阶

zabbix的字段发现机制&#xff1a; zabbix客户端主动和服务端联系&#xff0c;将自己的地址和端口发送服务端实现字段添加监控主机。 客户端是主动一方。 缺点&#xff1a;自定义网段中主机数量太多&#xff0c;登记耗时会很久&#xff0c;而且这个自动发现机制不是很稳定。…

centos6.8下载地址

Index of /centos-store/6.8/isos/x86_64/ (liu.se) archive.kernel.org : http - rsynclinuxsoft.cern.ch : http - rsyncmirror.nsc.liu : http - rsync

被遗忘的书籍

C-被遗忘的书籍_牛客小白月赛82 (nowcoder.com) #include <iostream> #include <queue> #include <string> #include <stack> #include <vector> #include <set> #include <map> #include <unordered_map> #include <unor…

计组中各种透明性总结

虚拟存储器&#xff0c;对应用程序员不可见。主存- cache层由硬件自动完成&#xff0c;对程序员不可见。cache纯硬件&#xff0c;程序员不可见。内存&#xff0c;对程序员可见。知识点来源&#xff1a;王道模拟第六套主存-辅存层由硬件和操作系统共同完成&#xff0c;对应用程序…

【Docker一】Docker架构、镜像操作和容器操作

一、docker基本管理和概念 1、概念 docker&#xff1a;开源的应用容器引擎。基于go语言开发的。运行在Linux系统中的开源的轻量级的“虚拟机” docker的容器技术可用在一台主机上轻松到达为任何应用创建一个轻量级到的&#xff0c;可移植的&#xff0c;自给自足的容器 dock…

免费的数据采集软件,最新免费的几款数据采集软件【2024】

在当今数字化时代&#xff0c;数据是企业决策和业务发展的关键。而如何高效获取数据成为许多企业和研究机构的关注焦点。本文将深入探讨数据采集软件的种类。帮助大家选择最适合自己需求的数据采集工具。 数据采集软件种类 在众多数据采集软件中&#xff0c;有一类强大而多样…

postgresql自带指令命令系列二

简介 在安装postgresql数据库的时候会需要设置一个关于postgresql数据库的PATH变量 export PATH/home/postgres/pg/bin:$PATH&#xff0c;该变量会指向postgresql安装路径下的bin目录。这个安装目录和我们在进行编译的时候./configure --prefix [指定安装目录] 中的prefix参…

跨境电商运营常用的ChatGPT通用提示词模板

市场分析&#xff1a;如何分析目标市场&#xff1f; 选品策略&#xff1a;如何选择要销售的商品&#xff1f; 供应链管理&#xff1a;如何管理供应链&#xff1f; 物流解决方案&#xff1a;如何选择合适的物流解决方案&#xff1f; 跨国支付&#xff1a;如何处理跨国支付&a…

labelimg遇到的标签修改问题:修改一张图像的标签时,保存后导致classes.txt改变

问题描述&#xff1a;修改一张图像的标签时候&#xff0c; classes.txt 会同步更新&#xff0c;导致重新生成了 classes.txt 但是这个 classes.txt 只有你现在写的那个类别名&#xff0c;以前的没有了。 解决&#xff1a;设置一个 predefined_classes.txt&#xff0c;内容和模…

Metasploit渗透测试的漏洞利用和攻击方法

预计更新 第一章 Metasploit的使用和配置 1.1 安装和配置Metasploit 1.2 Metasploit的基础命令和选项 1.3 高级选项和配置 第二章 渗透测试的漏洞利用和攻击方法 1.1 渗透测试中常见的漏洞类型和利用方法 1.2 Metasploit的漏洞利用模块和选项 1.3 模块编写和自定义 第三章 Me…

基于ssm理发店会员管理系统的设计和实现论文

摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&#xff0c;尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代&#xff0c;所以对于信息的宣传和管理就很关键。因此理发店会员信息…

Cache的基本概念和原理

目录 一. Cache的工作原理二. 局部性原理三. 性能分析四. 待解决的问题 \quad 一. Cache的工作原理 \quad 存储系统存在的问题 虽然双端口RAM、多模块存储器提高存储器的工作速度, 但是优化后的速度与CPU差距依然很大, 为了改善这个问题就出现了Cache, 来解决存储器与CPU速度不…

创作活动(五十一)———编程中常见的技术难题有哪些?

#编程中常见的技术难题有哪些&#xff1f;# 编程世界里的三大谜题&#xff1a;bug、性能优化与跨平台兼容性 每个职业都有其固有的挑战和困难&#xff0c;对于程序员来说&#xff0c;这些困难往往来自于技术本身。编程&#xff0c;就像是一个充满谜题的世界&#xff0c;而程序…

大屏适配方案二——vw和vh

按照设计稿的尺寸&#xff0c;将px按比例计算转为vw和vh&#xff0c;转换公式如下 假设设计稿尺寸为 1920*1080&#xff08;做之前一定问清楚 ui 设计稿的尺寸&#xff09;即&#xff1a; 网页宽度1920px 网页高度1080px我们都知道 网页宽度100vw 网页宽度100vh所以&#xff0…

ubuntu安装docker及docker常用命令

docker里有三个部分 daemon 镜像 和 容器 我们需要了解的概念 容器 镜像 数据卷 文章目录 docker命令docker镜像相关命令docker容器相关命令数据卷ubuntu安装docker docker命令 #启动&#xff0c;停止&#xff0c;重启docker systemctl start docker systemctl stop docker s…

SpringBoot的依赖管理和自动配置

与其明天开始&#xff0c;不如现在行动&#xff01; 文章目录 1 依赖管理机制2 自动配置机制2.1 初步理解2.2 完整流程 &#x1f48e;总结 1 依赖管理机制 为什么导入starter-web后所有相关依赖都会导入进来&#xff1f; 开发什么场景&#xff0c;导入什么场景启动器-spring-bo…

vscode调试pytorch分布式训练

launch.json文件如下"cwd" "${fileDirname}"表示代码调试的根目录是当前你调试的文件&#xff0c;也就是pretrain.py所在的目录。其他路径参数都是相对这个目录的 如果改成"cwd" "${workspaceFolder}" 表示代码调试的根目录是打开的工…