前端面试算法题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,一经查实,立即删除!

相关文章

【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…

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

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

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;信息技术至始至终都是成就行业发展的重要秘密。不论…

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 …

Vuex(vue 项目中实现 频繁、大范围数据共享的技术方案)

参考文档(点击查看) 好处 1.数据的存取一步到位&#xff0c;不需层层传递 2.数据的流动非常清晰 3.存储在Vuex中的数据都是响应式的&#xff08;数据更新后&#xff0c;使用数据的组件都会自动更新&#xff09; Vuex基础配置 npm i vuex3.6.2state中用来存储数据&#xff0c…

三:synchronized 关键字

目录 1、共享带来的问题2、synchronized 用法3、类加载器对 Class 锁的影响4、synchronized 实现原理4.1、同步方法、同步代码块4.2、对象内存布局4.3、Monitor 对象定义 5、synchronized 与原子性6、synchronized 与可见性7、synchronized 与有序性8、synchronized 锁升级8.1、…

外包干了15天,技术倒退明显

先说情况&#xff0c;大专毕业&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近6年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落&#xff01; 而我已经在一个企业干了四年的功能…

第十四届蓝桥杯大赛软件赛省赛C/C++大学 B 组

第十四届蓝桥杯大赛软件赛省赛C/C大学 B 组 文章目录 第十四届蓝桥杯大赛软件赛省赛C/C大学 B 组1、日期统计2、01串的熵3、冶炼金属4、飞机降落5、接龙数列6、岛屿个数7、子串简写8、整数删除9、景区导游10、砍树 1、日期统计 分析&#xff1a; 本题的意思就是2023年一整年&a…

c++作业day4

头文件&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimer> #include <QTime> #include <QTextToSpeech> #include <QMessageBox> QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass…