块状box自由添加且自适应屏幕

最新推荐文章于 2022-03-20 16:07:41 发布
原创 最新推荐文章于 2022-03-20 16:07:41 发布 · 227 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文展示了一个使用HTML、CSS和JavaScript实现的基础布局实例，包括响应式设计和交互效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

例子：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Test</title>

<style type="text/css">

body{

margin: 0px;

padding: 0px;

text-align: center;

}

.box1 {

width: 19.5%;

height: 150px;

background-color: red;

display: inline-block;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.box2 {

height: 150px;

border: 1px solid red;

}

</style>

</head>

<body>

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box1">

</div>

 

<div class="box2">

</div>

</body>

</html>

CSS布局思路/CSS布局模型 并举例自适应布局（左右固定中间自适应或者右侧固定左侧自适应）
酷酷的旭
09-21 5513
CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应) 经常在工作中或者在面试中会碰到这样的问题，比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题。 下面我们分别来学习下，当然我也是总结下而已，有如以下方法： 一： 右侧固定宽度 左侧自适应 第一种方法：左侧用margin-right，右侧float：right 就可以实现。 HTML代码可以如下写...
高性能计算(HPC)和智能计算理解
tugouxp的专栏
07-24 6217
1.现代终端设备一般都跟云端服务器相连，但只要可能，我们都希望计算可以在本地终端解决，这样做的好处是多方面的：既可以减小网络带宽的压力，又可以避免网络传输产生的时延，还可以让用户的数据更安全。现代终端设备一般用一个片上系统 (SoC)做计算，上面部署了通用的CPU和集成显卡。对于日益增多的卷积神经网络推理计算来说，在移动端的CPU（多数ARM，少数x86）上虽然优化实现相对简单（参见我们对CPU的优化），但此处它并非最佳选择，因为：1）移动端CPU算力一般弱于集成显卡（相差在2-6倍之间）；2）更重要的是，
关于自适应布局box 与 flex
u012986736的博客
09-08 420
box虽然出的比较早，但现在使用还是需要加上前缀，而且兼容性也说不上太好。但看到美团在用的是box，而非flex。我想box应该有flex的过代码之处吧。 下面详说box与flex的使用。 **flex弹性布局** html代码 <div class="flexBox"> <p>1</p> <p>2</p> <p>3</p> </div> 横向布局 只需设置css代码如下
移动端 css/html (box-flex)自适应、等比布局
weixin_38168590的博客
10-27 139
移动端 css/html (box-flex)自适应、等比布局 对于移动端自适应的一种布局方式。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="i...
html设置box设置长度自适应,CSS实现宽度自适应宽高16:9的矩形的示例
weixin_28941715的博客
06-19 221
前面我们讲了怎么做一个自适应宽高1:1的正方形现在我们来讲讲做自适应16:9的矩形要怎么做第一步先计算高度，假设宽100%，那么高为h=9/16=56.25%第二步利用之前所说设置padding-bottom方法实现矩形*{margin: 0px;padding: 0px;}/* .wrap:包裹矩形的div，用来控制矩形的大小 */.wrap{width: 20%;}/* .box 矩形div，...
自适应布局webkit-box的用法
weixin_30258027的博客
12-01 1235
Flexible Box Model(灵活盒子模型)在平常的web横排布局中，会经常用到float或display:inline-block，但是在多种不同宽度的移动设备的自适应布局中用的话，还得设置百分比宽度和考虑清除浮动。而Flexible Box Model可以自动计算宽度和自适应，更加方便。 Flexible Box Model有几个属性：1、box-orient 在父元...
flex和box、flexbox高度自适应常见坑
weixin_34087301的博客
05-16 2232
2019独角兽企业重金招聘Python工程师标准>>> ...
vue pc端缩小放大屏幕自适应，用了REM + Viewport，里面内容串行了？
最新发布
03-08
用户将两者结合使用，可能是为了在不同屏幕尺寸下实现缩放自适应。 接下来，用户提到内容串行，也就是布局错乱，元素可能换行或者溢出。这通常是由于元素尺寸或间距计算不当，特别是在动态调整视口或根字体大小时。...
手机端卡片模式网站模板是一款常用的网站模板小部件下载。_html网站模板_网页源码移动端前端_H5模板_自适应响应式源.rar
08-06
例如，可以使用`border-radius`创建圆角，`box-shadow`添加阴影效果，`transition`实现平滑过渡，以及`flexbox`或`grid`布局来实现卡片的灵活排列。 三、JS（JavaScript） JavaScript是一种客户端脚本语言，用于...
wangEditor实现用户自定义图片大小（改源码）
疑问 搜索 动手 解决 记录
03-04 1万+
效果图 1、WangEditor本身提供的 “编辑图片” 功能，调整图片大小选项只能为30%，50%，100%。 2、修改 wangEditor.js 源码后，用户可以输入自定义大小。例如，50%效果如下： 再例如，20%效果如下： 修改方式 在 wangEditor.js 中进行修改，整体修改内容如下图： 在这里插入图片描述 主要分为两个部分的修改：输入框、事件方法。 1、增加输入框： 大约在源码的2681行，添加以下块（用于用户输入框）： <span style="float:left
CSS盒模型自适应布局——calc与box-sizing
m0_49662897的博客
03-07 1654
CSS盒模型自适应布局——calc与box-sizing
如何在页面插入一个跟随页面移动的盒子_铁熊玩创客 | 小白也能学会的激光切割创意盒子设计方法...
weixin_39556064的博客
11-20 762
最近捣鼓车间对装备进行了全面升级。因为前段时间，创客教育行业激光切割领导品牌雷宇激光与我们捣鼓车间进行了深度的交流与合作。我们换上了高大上的雷宇激光切割机。新机器切割过程中几乎没有烟熏痕迹，并且切割速度和切割质量也是国内一流！最重要的是雷宇激光开发的LaserMaker软件让操作难度大大降低，更适用于学校或机构内的创客老师，简直是创客老师们的福利！ 激光切割机可以方便创客们通过数字制造快速成型的方...
网页设计（二）——HTML与BOX
m0_55401536的博客
03-20 4801
HTML标签 HTML5简介 DIV与CSS布局入门 认识盒模型 外边距与内边距 边框与CSS布局理念 用CSS定位控制网页布局 position定位 浮动定位 定位层叠 常见布局类型 移动网页设计基础CSS3 边框与背景 文本与多列 转换与过渡 动画与用户界面 HTML标签 HTML是网页制作的...
web前端入门到实战：css 让一个盒子的高度自适应屏幕剩余的部分
软件开发-前端开发-IT
10-25 2482
在项目中，移动端要自适应，由于有时候数据不够，所以导致了有的区域空白 要求：没有数据的时候能够充满屏幕，数据超出屏幕就出现滚动条 做法 1-让容器高度充满这个屏幕 在容器内容很少的情况下，要想让这个容器充满整个屏幕： `.container{ min-height:100vh; display:flex }` 2-让容器高度充满剩余屏幕高度 要让容器充满屏幕的剩余高度，用 vh 结合 fle...
HTML5---响应式和页面自适应问题（自动适应屏幕大小）
热门推荐
mei0515的博客
07-08 7万+
属性 描述 width=device-width width为设置layout viewport 的宽度，为一个正整数，”width-device”表示宽度是设备屏幕的宽度 initial-scale=1.0 initial-scale为设置页面的初始缩放值，可以是一个带小数的数字，1.0就是占网页的100% minimum-scale=1.0 表示最小的缩放比例 maximum-scale=1.0 表示最大的缩放比例 user-scalable=no 表示用户是否可以调整缩放比例，值为”no”或”yes”
自适应实现多栏等高布局
Alice_sy314的博客
08-02 273
方法一、flex布局 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .conta
HTML LISTBOX例子
伴神之朱慧鹏大人成长的伙伴们
08-25 961
原文：http://hi.baidu.com/xyjh007/blog/item/0758dcf3f043221bb07ec513.html [code="html"] listbox and combobox function visitOption(){ var oSelCode=document.getElementById("selColor...
display:box自适应宽度
weixin_30294709的博客
05-14 251
一个外层div内嵌2个div,左边div宽度定死，右边自适应宽度，右边的宽度要填充满 <li class="law-case-detail"> <div style="width:70px;">案情简介</div> <textarea class="comment" placeholder="描述信息..."></texta...
OFDM系统中改进的块状导频自适应策略
"该资源是一篇2011年的自然科学论文，主要研究了适用于OFDM（正交频分复用）系统的块状导频自适应方案。该方案旨在解决传统OFDM系统中导频插入密度固定导致的信道利用率低的问题，通过控制导频密度来提高系统的信道...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值