软件开发_标签_开发者

博客(4.1k)
视频(116)
论坛(421)
云声(0)
代码示例(0)

[分享交流] 探究 width:100%与width:auto区别

作者：秋天的一阵风一、 width属性介绍width 属性用于设置元素的宽度。width 默认设置内容区域的宽度，但如果 box-sizing 属性被设置为 border-box，就转而设置边框区域的宽度。（顺手推几个技术大厂的机会，前、后端or测试，感兴趣就试试）二、话不多说，直接上代码看效果<!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> div { color: #fff; font-size: 2rem; text-align: center; } .parent { width: 600px; height: 600px; background-color: blue; border: 10px solid black; padding: 20px; } .child { background-color: red; border: 10px solid grey; margin: 20px; height: 100px; } .auto{ width: auto; } .hundred-percent{ width: 100%; } </style> <body> <div class="parent"> parent <div class="child auto">child1: width:auto</div> <div class="child hundred-percent">child2: width:100%</div> </div> </body> </html> 三、分析比较我们给parent设置了padding:20px 内边距，给两个child都设置了margin:20px的外边距。child1的width属性是auto,child2的width属性是100%。很明显地看到两个child的不同表现，child1的宽度是可以适应的，不会溢出其父元素。child1最终的宽度值:540px=600px(父元素宽度)−20px(child1外边距)∗2−10px∗2(child1边框值)−0px(child1内边距)child1最终的宽度值: 540px = 600px(父元素宽度) - 20px (child1 外边距) * 2 - 10px *2 (child1 边框值) - 0px (child1 内边距) child1最终的宽度值:540px=600px(父元素宽度)−20px(child1外边距)∗2−10px∗2(child1边框值)−0px(child1内边距)而child2的宽度则是和父元素一样大最终溢出了其父元素。child2最终的宽度值:600px=600px(父元素宽度)child2最终的宽度值: 600px = 600px(父元素宽度) child2最终的宽度值:600px=600px(父元素宽度)四、结论width:100% : 子元素的 content 撑满父元素的content，如果子元素还有 padding、border等属性，或者是在父元素上设置了边距和填充，都有可能会造成子元素区域溢出显示;width:auto : 是子元素的 content+padding+border+margin 等撑满父元素的 content 区域。所以，在开发中尽量还是选择 width:auto ,因为当从边距、填充或边框添加额外空间时，它将尽可能努力保持元素与其父容器的宽度相同。而width：100%将使元素与父容器一样宽。额外的间距将添加到元素的大小，而不考虑父元素。这通常会导致问题。

yd_244540595 发表于2024-11-14 17:16:49 2024-11-14 17:16:49 最后回复 yd_244540595 2024-11-14 17:16:49
6 0

软件开发前端
[问题求助] 关于QQ测试时间什么时侯

QQ测试名额一般什么时侯发放？

用户 发表于2024-11-10 20:27:33 2024-11-10 20:27:33 最后回复多米诺的古牌 2024-11-24 13:03:14
18 5

软件工程软件开发
[问题求助] 解答

import { BookModel } from '../model/BookModel' import router from '@ohos.router'; import font from '@ohos.font'; import call from '@ohos.telephony.call'; import Logger from '../common/Logger'; @Entry @Component struct BookDetails { @State bookDetails: string = (router.getParams() as Record<string, string>)['bookDetails']; @State bookInfo: BookModel = {} aboutToAppear() { this.bookInfo = JSON.parse(this.bookDetails);//将JSON字符串转成对象 } build() { Column() { Row({ space: 4 }) { Row() { Image($r('app.media.svg_back')) .fillColor('#123123') .width(30) Text('你好') .fontSize(29) .fontWeight(800) } .onClick(() => { router.back(); }) } .padding(13) .width('100%') Column() { Row() { Image(this.bookInfo.img) .width('90%') .height('50%') .borderRadius(8) } .justifyContent(FlexAlign.Center) .width('100%') Row({ space: 6 }) { Image($r('app.media.svg_renminbi')) .fillColor('#ffff0000') .width(26) Text(String(this.bookInfo.price)) .fontSize(28) .fontColor('#ffff0000') } .width('100%') .padding({ top: 5, bottom: 5 }) Row({ space: 6 }) { Text(this.bookInfo.bookName) .fontWeight(700) .fontSize(28) .padding({ top: 5, bottom: 5 }) Row() { Row(){ Image($r('app.media.play')) .fillColor('#ffff0000') .width(18) Text('抖音') .fontSize(14) .fontColor('#ffff0000') } .margin({right: 10}) .onClick(() => { router.pushUrl({ url: 'pages/VideoPlayPage', params: { videoUrl: this.bookInfo.videoUrl, }, }, router.RouterMode.Single) }) Image($r('app.media.phone')) .fillColor('#ffff0000') .width(18) Text('你好') .fontSize(14) .fontColor('#ffff0000') } .onClick(() => { call.makeCall(this.bookInfo.phone, err => { Logger.debug(`makeCall callback: err->${JSON.stringify(err)}`); }); }) } .width('100%') .padding({ top: 5, bottom: 5 }) .justifyContent(FlexAlign.SpaceBetween) Row() { Text('你好：' + this.bookInfo.bookAuthor) Text('你好：' + this.bookInfo.bookSalesNum) } .padding({ top: 5, bottom: 5 }) .justifyContent(FlexAlign.SpaceBetween) .width('100%') Text('你好：') .fontWeight(700) .fontSize(28) Text(this.bookInfo.bookBrief) .lineHeight(22) Text('你好：') .fontWeight(700) .fontSize(28) Text(this.bookInfo.bookContent) .lineHeight(22) } .alignItems(HorizontalAlign.Start) .padding({ left: 15, right: 15, top: 20, bottom: 20 }) .width('100%') .layoutWeight(1) } .width('100%') .height('100%') } }

yd_212563517 发表于2024-11-07 11:58:18 2024-11-07 11:58:18 最后回复泽宇-Li 2024-11-15 17:07:54
30 4

软件开发
[问题求助] 大佬些这个可以得吃不

大佬帮忙看看，小的感激不尽

yd_212563517 发表于2024-11-06 16:21:02 2024-11-06 16:21:02 最后回复泽宇-Li 2024-11-06 16:39:00
30 1

软件开发
[其他问题] 有三个toddle.switch组件，怎么让他们互斥

用的是ArkTs，要求这三个模式不能同时打开，要怎么做

yd_258629690 发表于2024-10-08 15:23:33 2024-10-08 15:23:33 最后回复小强鼓掌 2024-10-21 09:12:08
20 2

软件工程软件开发开发工具 UI 前端
[公告] 【获奖公示】DTSE Tech Talk丨NO.67：测试效率&质量提升，赋能产品研发的测试自动化工厂

中奖结果公示感谢各位小伙伴参与本次活动，欢迎关注华为云DTSE Tech Talk 技术直播更多活动~本次活动获奖名单如下（部分视频号抽奖用户无账号名）：账号名奖项名称奖品名称 xj120141121优质提问华为云开发者定制礼盒nukinsan优质提问华为云开发者定制礼盒xiaozhongy口令抽奖华为云开发者定制折叠雨伞口令抽奖华为云开发者定制折叠雨伞口令抽奖华为云开发者定制折叠雨伞视频号抽奖华为云开发者定制折叠雨伞视频号抽奖华为云开发者定制折叠雨伞视频号抽奖华为云开发者定制POLO衫视频号抽奖华为云开发者定制POLO衫hid_2bljdd3wrtjse3w调研问卷抽奖华为云开发者定制短袖T恤hw89068000调研问卷抽奖华为云开发者定制短袖T恤

云小宅 发表于2024-09-29 10:55:38 2024-09-29 10:55:38 最后回复云小宅 0
46 0

测试计划 CodeArts TestPlan 软件开发 DTSE 开发者
[问题求助] 语音呼叫ivr如何转接到视频ivr

【问题来源】【星网】【问题简要】语音呼叫ivr拨通后，如何转接到视频ivr并成功播放视频【问题类别】【可选问题分类：ivr开发】【AICC解决方案版本】【AICC可选择版本：AICC 24.200】【期望解决时间】尽快【问题现象描述】通过openeye拨通语音ivr，然后在流程中以接入码的形式路由到视频流程，未正常播放视频。单独用openeye拨打视频流程是能成功播放视频的。想问下这种ivr语音转接到视频ivr的场景如何实现？【日志或错误截图】

xxx111 发表于2024-09-03 16:17:49 2024-09-03 16:17:49 最后回复 AICC支撑人员2 2024-09-06 14:58:13
53 3

软件开发音视频
[公告] 【获奖公示】DTSE Tech Talk丨NO.62：华为云CodeArts API，为开发者打造全新的API研发体验

中奖结果公示感谢各位小伙伴参与本次活动，欢迎关注华为云DTSE Tech Talk 技术直播更多活动~本次活动获奖名单如下（部分视频号抽奖用户无账号名）：账号名奖项名称奖品名称 luanfa2008视频号抽奖华为云定制云宝盲盒hid_-60wl_dl8k9rg32视频号抽奖华为云定制云宝盲盒/视频号抽奖华为云定制云宝盲盒hw81541353 优质提问华为云定制双肩包RAkira 有奖提问华为云定制双肩包

云小宅 发表于2024-08-07 15:59:20 2024-08-07 15:59:20 最后回复云小宅 0
27 0

软件开发开发者
[活动分享] 2024年上海海思MCU开发者体验官招募，手机/MatePad大奖等你拿！

活动详情：https://developers.hisilicon.com/postDetail?tid=0296157624908214058

开发者小助手 发表于2024-08-05 10:51:05 2024-08-05 10:51:05 最后回复开发者小助手 0
31 0

软件开发嵌入式开发者硬件开发
[问题求助] spark filter 中文列名支持

我用mysql创建了一个中文列名的表，然后根据这个表创建的spark的dataset，如果直接查询没有问题，spark可以正常解析== Parsed Logical Plan =='Project ['人员, 'col1]+- Project [人员#242, 1 AS col1#245] +- Project [人员#242] +- Project [cast(人员#240 as string) AS 人员#242] +- Relation [人员#240] JDBCRelation(`test1111`) [numPartitions=1]== Analyzed Logical Plan ==人员: string, col1: intProject [人员#242, col1#245]+- Project [人员#242, 1 AS col1#245] +- Project [人员#242] +- Project [cast(人员#240 as string) AS 人员#242] +- Relation [人员#240] JDBCRelation(`test1111`) [numPartitions=1]== Optimized Logical Plan ==Project [人员#240, 1 AS col1#245]+- Relation [人员#240] JDBCRelation(`test1111`) [numPartitions=1]== Physical Plan ==*(1) Project [人员#240, 1 AS col1#245]+- *(1) Scan JDBCRelation(`test1111`) [numPartitions=1] [人员#240] PushedFilters: [], ReadSchema: struct<人员:string>一旦我准备对中文列名做数据过滤dataset = dataset.filter(" ( (`人员` = '111') ) ");spark就无法解析了== Parsed Logical Plan =='Project ['人员, 'col1]+- Filter (人员#200 = 111) +- Project [人员#200, 1 AS col1#203] +- Project [人员#200] +- Project [cast(人员#198 as string) AS 人员#200] +- Relation [人员#198] JDBCRelation(`test1111`) [numPartitions=1]== Analyzed Logical Plan ==人员: string, col1: intProject [人员#200, col1#203]+- Filter (人员#200 = 111) +- Project [人员#200, 1 AS col1#203] +- Project [人员#200] +- Project [cast(人员#198 as string) AS 人员#200] +- Relation [人员#198] JDBCRelation(`test1111`) [numPartitions=1]== Optimized Logical Plan ==Project [人员#198, 1 AS col1#203]+- Filter (isnotnull(人员#198) AND (人员#198 = 111)) +- Relation [人员#198] JDBCRelation(`test1111`) [numPartitions=1]== Physical Plan ==org.apache.spark.sql.catalyst.parser.ParseException: Syntax error at or near '人'(line 1, pos 0)== SQL ==人员^^^请问有人知道原因和解决方案么

yd_261458183 发表于2024-07-23 16:00:49 2024-07-23 16:00:49 最后回复什么哒什么 2024-07-23 19:31:17
35 1

软件开发 spark 数据处理
[问题求助] TabBar 在编译后不显示怎么处理

代码为：Tabs({barPosition:BarPosition.End}) { TabContent(){ Home() }.tabBar(this.TabBuilder(buttonInfo[0]))编译后底部的 tabBar 却不显示了，

yd_225300940 发表于2024-06-21 11:31:12 2024-06-21 11:31:12 最后回复来杯咖啡 2024-06-21 14:05:24
40 1

开发语言软件开发
[问题求助] 【重庆赛力斯项目】超图GIS上传了地图包后，无法实现楼层的切换，右侧无楼层切换按钮

【重庆赛力斯项目】超图GIS上传了地图包后，无法实现楼层的切换，右侧无楼层切换按钮

yd_212007770 发表于2024-06-12 14:41:16 2024-06-12 14:41:16 最后回复福州司马懿 2024-06-17 09:03:14
35 5

软件开发
[获奖公告] 【云声专场】开发者体验官：一站式云端DevOps平台-CodeArts云上开发实践

华为云开发者日·广州站来啦！参加“一站式云端DevOps平台-CodeArts云上开发实践”项目，提出你的建议有机会获得开发者盲盒礼包惊喜不容错过，快叫上小伙伴一起来吧【体验项目】一站式云端DevOps平台-CodeArts云上开发实践【活动时间】2024年5月23日-5月31日【参与方式】直接在此活动帖下方回帖提建议即可比如对产品功能的改进建议、对活动流程的感想、对现场活动的感悟等等PS：不要少于30字哦~【获奖规则】奖项设置有效回复楼层评选条件获奖名额激励礼品优质建议奖20对产品功能有改进价值的建议1名开发者盲盒礼品价值50-100元积极反馈奖20优质建议奖轮空的情况下进行抽取抽取1名开发者盲盒礼品价值50元【活动规则】1、本帖的回帖建议不少于30字，仅限于对“一站式云端DevOps平台-CodeArts云上开发实践”体验项目，其他项目建议不参与此次活动，否则将视为无效内容。2、本次活动将根据实际参与情况发放奖励，包括但不限于用户百分之百中奖或奖项轮空的情况；以上奖品均为实物奖品，具体发放视出库情况而定；3、活动预计于结束后七天内完成奖项公示，并于结束后15个工作日内完成邮寄。【温馨提示】1、请务必使用个人实名账号参与活动（IAM、企业账号等账号参与无效）。如一个实名认证对应多个账号，只有一个账号可领取奖励，若同一账号填写多个不同收件人或不同账号填写同一收件人，均不予发放奖励。2、所有获得奖品的获奖用户，请于获奖后3日内完成实名认证，否则视为放弃奖励。

云上有未来 发表于2024-05-20 18:11:20 2024-05-20 18:11:20 最后回复云上有未来 2024-06-11 09:47:07
99 15

云声活动软件开发云社区开发者
[问题求助] 外呼经过转接后tcurrentbilllog表记录数据如何解读

【问题来源】深圳容大【问题简要】外呼到用户手机，座席再经过转接，tcurrentbilllog记录数据不知道如何解读【问题类别】CC-DIS【AICC解决方案版本】22.100[问题描述] 您好！座席A（分机号:10030;cti号:20457)外呼到用户手机，通话接通后，座席A转接到座席B(分机号:10031；cti号:20213)。共有4条数据：1468399,1468400,1468401,1468402。1468401和1468402的callId相同，但是它们的callerNo都是121，calleeNo用户手机号。1468399的callerNo是121,calleeNo是10030。不知道这几条数据的callerNo和calleeNo应该怎样解读。还有1468399和1468400这两条数据，UVID是-1,CALLID和OrgCallID是一样的。UVID，CALLID和OrgCallID这3个id的使用场景是怎样的？具体的话单数据见附件。

yd_225462362 发表于2024-04-23 16:25:54 2024-04-23 16:25:54 最后回复 AICC支撑人员1 2024-04-23 18:25:35
33 1

软件开发
[区域复赛赛题问题] 船舶执行靠泊（berth）或重置（dept）命令时朝向会变吗

船舶执行靠泊（berth）或重置（dept）命令时船舶的朝向会变吗

yd_245992446 发表于2024-04-01 11:23:06 2024-04-01 11:23:06 最后回复软挑赛题发布助手3 2024-04-01 14:28:00
200 2

软件开发

上滑加载中

推荐直播

热门标签

Java Python 数据结构数据库 Linux 机器学习网络任务调度 MySQL JavaScript