前端面试算法题1

1.已知:

• 布局分为:父元素A和N个子元素B;

• A宽度不固定:最小宽度为1000px,内部边距是32px

• B的宽度不固定:相邻两个B元素的间距是16px,所有B的宽度相同,边框为1像素,颜色为999

• 每行只能有3个B元素,超过的话需要换行;

• 最左侧B元素和最右侧的B元素,距离A的边缘都是32px;

你可以去试试呢 怎么写

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.Abox {min-width: 1000px;padding: 32px;padding-top: calc(32px - 16px);padding-left: calc(32px - 16px);background-color: pink;overflow: hidden;display: flex;flex-wrap: wrap;}.Bbox {width: calc(100% / 3 - 16px);padding-top: 20%;border: 1px solid #999;margin-left: 16px;margin-top: 16px;/* background-color: red; */box-sizing: border-box;/* float: left; */}</style>
</head><body><div class="Abox"><div class="Bbox"></div><div class="Bbox"></div><div class="Bbox"></div><div class="Bbox"></div><div class="Bbox"></div></div></body></html>

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

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

相关文章

docker-如何离线安装部署

离线安装Docker通常涉及到以下几个主要步骤&#xff0c;这里是一个简化的流程概述&#xff0c;适用于大多数Linux发行版&#xff08;如Ubuntu、CentOS等&#xff09;&#xff1a; 下载离线安装包 访问Docker官方下载页面或者使用已有的网络环境提前下载所需的Docker引擎安装包和…

【JAVA语言-第19话】多线程详细解析(一)

目录 多线程 1.1 并发和并行 1.2 线程和进程 1.2.1 进程 1.2.2 线程 1.3 单线程 1.3.1 单线程案例 1.4 创建多线程的方式 1.4.1 继承Thread类 1.4.2 实现Runnable接口 1.4.3 使用匿名内部类 1.5 Thread类 1.5.1 构造方法 1.5.2 常用方法 1.5.3 Thread类中…

《QT实用小工具·二十四》各种数学和数据的坐标演示图

1、概述 源码放在文章末尾 该项目实现了各种数学和数据的坐标演示图&#xff0c;下面是demo演示&#xff1a; 项目部分代码如下&#xff1a; #ifndef FRMMAIN_H #define FRMMAIN_H#include <QWidget> class QAbstractButton;namespace Ui { class frmMain; }class fr…

吴恩达机器学习-异常检测(Anomaly Detection)

在本练习中&#xff0c;您将实现异常检测算法&#xff0c;并将其应用于检测网络上出现故障的服务器。 文章目录 1-包2-异常检测2.1问题陈述2.2数据集2.3高斯分布2.2.1高斯实现的估计参数&#xff1a;2.2.2选择阈值&#x1d716; 2.4高维数据集 1-包 首先&#xff0c;让我们运…

基于FPGA的以太网相关文章导航

首先需要了解以太网的一些接口协议标准&#xff0c;常见的MII、GMII、RGMII时序&#xff0c;便于后续开发。 【必读】从MII到RGMII&#xff0c;一文了解以太网PHY芯片不同传输接口信号时序&#xff01; 介绍一款比较老的以太网PHY芯片88E1518&#xff0c;具有RGMII接口&#xf…

PTA 三足鼎立

当三个国家中的任何两国实力之和都大于第三国的时候&#xff0c;这三个国家互相结盟就呈“三足鼎立”之势&#xff0c;这种状态是最稳定的。 现已知本国的实力值&#xff0c;又给出 n 个其他国家的实力值。我们需要从这 n 个国家中找 2 个结盟&#xff0c;以成三足鼎立。有多少…

代码随想录阅读笔记-二叉树【总结】

二叉树的理论基础 代码随想录 (programmercarl.com)&#xff1a;二叉树的种类、存储方式、遍历方式、定义方式 二叉树的遍历方式 深度优先遍历 代码随想录阅读笔记-二叉树【递归遍历】-CSDN博客&#xff1a;递归三部曲初次亮相代码随想录阅读笔记-二叉树【迭代遍历】-CSDN博…

网络工程师练习题(12)

网络工程师 下列分组交换网络中&#xff0c;采用的交换技术与其他3个不同的是IP网。路由器与计算机串行接口连接&#xff0c;利用虚拟终端对路由器进行本地配置的接口是Console口&#xff0c;路由器通过光纤连接广域网的接口是SFP端口。点对点协议PPP中LCP的作用是建立和配置数…

Java异常处理之旅:解救迷失的程序员(二)

本系列文章简介&#xff1a; 在编程世界中&#xff0c;程序员们常常会遇到各种各样的问题和挑战。有时候&#xff0c;这些问题很容易解决&#xff0c;而有时候&#xff0c;它们却会让我们感到迷失和无助。 在这个旅程中&#xff0c;我们将探索Java异常处理的世界&#xff0c;解…

thinkphp6入门(22)-- 如何下载文件

假设在public/uploads文件夹下有一个文件test.xlsx 在前端页面添加下载链接&#xff0c;用户点击该链接即可下载对应的文件。 <a href"xxxxxxx/downloadFile">下载文件</a> 2. 在后端控制器方法中&#xff0c;我们需要获取要下载的文件路径&#xff0…

java+saas模式医院云HIS系统源码Java+Spring+MySQL + MyCat融合BS版电子病历系统,支持电子病历四级

javasaas模式医院云HIS系统源码JavaSpringMySQL MyCat融合BS版电子病历系统&#xff0c;支持电子病历四级 云HIS系统是一款满足基层医院各类业务需要的健康云产品。该产品能帮助基层医院完成日常各类业务&#xff0c;提供病患预约挂号支持、病患问诊、电子病历、开药发药、会员…

C语言—用EaxyX绘制实时钟表

代码效果如图 #undef UNICODE #undef _UNICODE #include<graphics.h> #include<conio.h> #include<math.h>#define width 640 #define high 480 #define PI 3.14159int main() {initgraph(width, high);int center_x, center_y;center_x width / 2;center_y…

基于 SMM 汽车交易系统(源码+配套文档)

摘要 电子商务的兴起不仅仅是带来了更多的就业行业。同样也给我们的生活带来了丰富多彩的变化。多姿多彩的世界带来了美好的生活&#xff0c;行业的发展也是形形色色的离不开技术的发展。作为时代进步的发展方面&#xff0c;信息技术至始至终都是成就行业发展的重要秘密。不论…

【LeetCode热题100】【二叉树】二叉树的最大深度

题目链接&#xff1a;104. 二叉树的最大深度 - 力扣&#xff08;LeetCode&#xff09; 最大深度等于左子树的最大深度和右子树的最大深度中的较大者加一 class Solution { public:int maxDepth(TreeNode *root) {if (!root)return 0;return max(maxDepth(root->left), max…

nginx学习记录-负载均衡策略

1. 负载均衡基本策略配置 1.1 weight&#xff08;权重&#xff09;配置 weight表示当前服务器承载的业务比例。假设现在有两台服务器A和B组成集群&#xff0c;但是A和B的配置不一样&#xff0c;A的性能更好些&#xff0c;那么此时我们希望服务器A能承载更多的业务&#xff0c…

【Ubuntu】update-alternatives 命令详解

1、查看所有候选项 ​​​​​​​sudo update-alternatives --list java 2、​​​​​​​更换候选项 sudo update-alternatives --config java 3、自动选择优先级最高的作为默认项 sudo update-alternatives --auto java 4、删除候选项 sudo update-alternatives --rem…

halcon缺陷检测-印刷品检测(差异化模型),键盘字符缺陷检测

前言 在实际项目中&#xff0c;印刷品缺陷检测是缺陷检测中的难点项目。通常印刷品检测往往具备缺陷小&#xff0c;缺陷所在位置不固定&#xff0c;出现少印或者多印的情况。并且由于产线原因&#xff0c;大量的印刷品在视野中的大小并不是完全一致的&#xff0c;可能出现细微…

java-数组转换为List集合

方法一&#xff1a;使用 Arrays.asList() 方法 Arrays.asList() 方法可以将数组转换为一个固定大小的List。 import java.util.Arrays; import java.util.List; import java.util.ArrayList; public class ArrayToListExample { public static void main(String[] args…

易绘创云打印怎么样?易绘创云打印好用吗?

随着云技术的发展&#xff0c;云打印等概念也逐渐火热了起来。作为当下云打印服务行业中的佼佼者&#xff0c;易绘创云打印服务页一直被众多用户讨论着。那么易绘创云打印怎么样&#xff1f;易绘创云打印好用吗&#xff1f;今天小易就带大家来介绍一下。 易绘创云打印怎么样&am…

C语言面试题之合法二叉搜索树

合法二叉搜索树 实例要求 实现一个函数&#xff0c;检查一棵二叉树是否为二叉搜索树&#xff1b; 示例 1: 输入:2/ \1 3 输出: true 示例 2: 输入:5/ \1 4/ \3 6 输出: false 解释: 输入为: [5,1,4,null,null,3,6]。根节点的值为 5 &#xff0c;但是其右子节点值为 4 …