元素宽度width用百分比表示时，如果不能全占满父元素的宽度会出现一条白杠（移动端某些浏览器）

最新推荐文章于 2024-03-28 15:13:48 发布
最新推荐文章于 2024-03-28 15:13:48 发布
阅读量2.1k 收藏
点赞数
分类专栏： 工作中遇到的问题 文章标签： width百分之百
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31411389/article/details/60768621
版权

这里写图片描述

如图：在箭头指的元素中，‘遮罩元素’的右边有个白边（在小米note，和iphone中会存在这个问题），‘遮罩’的宽度是100%，很蒙。。。进过思考后，觉得是不是有的浏览器识别width：100%；时不会把父元素的边框包进去啊，于是就动态获取父元素的宽并加了2px ，在小米note中不存在这个问题了，但是iphone中还是存在‘白边’的问题，连上电脑后查看，分析到如果一排的元素宽度 + margin-left + margin-right(每个元素的左右两边的空白是通过margin实现的) = 100%则不会有，所以，仔细调整后，iphone上的白边也不在了。

说明：元素宽度width用百分比表示时，如果不能全占满父元素的宽度会出现一条白杠（移动端某些浏览器）

尼古拉斯-托尔斯泰-赵四
关注
专栏目录
十五、less语法、移动端浏览器及内核分析、viewport、移动端适配方案、移动端重置样式、移动端特殊处理、移动端其他适配方案设备像素、独立像素和css像素、
qq_52426181的博客
12-05 394
一、less语法 1、注释 less共有两种注释风格。 标准的CSS注释，多行注释 /* comment */ ，会保留到编译后的文件。 单行注释 // comment，只保留在less源文件中，编译后被省略。 // 单行注释，这种只会在less文件中存在，不会编译到css里面去 /* 注释内容，可以被编译到css文件中去的 */ 2、导入 @import "导入文件的地址"; .css 后缀名不能省略，引入 .less 文件可以省略扩展名 3、变量 定义 @变量名:值; 使用 ​
（一）移动端 Web 开发基础
weixin_46227563的博客
04-17 2489
文章目录一、移动 Web 开发基础概念1. 像素(1) 分辨率(2) 物理像素(3) CSS 像素(4) 设备像素比(5) 标清屏和高清屏(6) 缩放(7) PPI / DPI2. 视口 viewport二、移动 Web 开发基础知识1. box-sizing2. 图标字体3. flex 布局(1) 什么是 flex 布局(2) flex 布局的基本概念(3) flex 容器的属性(4) flex 项目的属性4. 媒体查询(1) 什么是媒体查询（media query）(2) 为什么需要媒体查询(3) 媒体
前端解决宽度设置百分比和边框后样式超出的问题
zzqz的博客
09-30 2154
项目中经常会遇到一类问题：就是设置宽度百分比后再加border边框出现边框溢出显示不出的问题 原因很简单，就是宽度已经是百分百了，再设边框，实际内容就是百分百再加上边框的宽度，肯定就溢出了 这个问题很好解决，一个属性就搞定：calc div { width: calc(~"100% - 2px"); border: 1px solid #eee; } 注意： 以上代码即可实现，但是必...
CSS一个子元素大小固定，另一个子元素宽度自适应占满父元素
weixin_42527398的博客
06-27 3560
方法一 原理：对固定大小的子元素设为float，自适应的子元素通过margin避免两个元素的重叠，利用块级元素具有默认继承父元素宽度的特性 .child1{ float: left; width: 200px; height: 200px; background-color: aqua; } .child2{ height: 200px; margin-left: 200px; background-color: blue; } 方法二 原理：
CSS 如何将子元素宽度填充满父元素剩余宽度
最新发布
lth002的博客
03-28 1131
【代码】CSS 如何将子元素宽度填充满父元素剩余宽度。
body{width:100%}但窗口出现滚动条&body的子元素height：100%实际高度未填满整个页面
persistence2020的博客
02-15 1472
参考文章：http://t.csdn.cn/lKQvQ。
移动端布局——移动适配
m0_45659764的博客
04-05 3901
什么叫移动适配？网页元素的宽高都要随着设备的宽度等比缩放 如何实现？ rem：目前多数企业再用的解决方案 vw/vh：未来的解决方案 一、rem 能够使用rem单位设置网页元素的尺寸 网页效果 屏幕宽度不同，网页尺寸不同（等比缩放） px单位或百分比布局可以实现吗？ px单位是绝对单位 百分比布局特点宽度自适应，高度固定 rem单位 相对单位 rem单位相对于HTML标签（根标签）的字号计算结果 1rem=1HTML字号大小 注意：使用re...
移动端页面布局
小王的博客
07-29 2863
流式布局、弹性盒布局、媒体查询、Rem布局、Sass
移动端常见布局
HXL521666的博客
11-09 3630
移动端技术选型 1.单独制作移动端页面（主流） 流式布局（百分比布局） flex弹性布局（强烈推荐） less+rem+媒体查询布局 混合布局 2.响应式页面兼容移动端（其次） 媒体查询 bootstrap 流式布局（百分比布局） 流式布局，就是百分比布局，也称非固定像素布局 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充 流式布局方式是移动Web开发使用的比较常见的布局方式 max-width(max-height)最大宽度 min-widt
解决图片等比缩放时，无法完全覆盖父级，且用高宽都用100%时，图片变形的问题
qq_49198238的博客
07-16 798
解决图片等比缩放时，无法完全覆盖父级，且用高宽都用100%时，图片变形的问题
html盒子模型子元素怎么水平占满父元素_CSS子元素在父元素中水平垂直居中的几种方法...
weixin_39658716的博客
12-21 343
1. 水平居中(margin: auto;)子父元素宽度固定，子元素上设置 margin: auto; 子元素不能设置浮动，否则居中失效。#div1{width:300px;height:300px;border:1px solid red;}#div1 p{width:100px;height:100px;background-color:green;/*float: left; !*如果...
为什么设置一个内容width:100%加了一个padding以后就会出现横线的滚动条。
肖肖肖丽珠的博客
01-04 1754
<label class="sheetName">基本信息</label> .sheetName{ padding:10px;display:inline-block;font-size:16px;width:100%;background-color:#E9EAEE;} 这里我给基本信息加了一个黑色背景，但是为了让他宽度100%。这样却发现出现滚动条。把宽度去掉或...
如何让div的大小占满整个屏幕？
热门推荐
会清的博客
09-21 3万+
一、先来代码 *{ margin: 0; padding: 0; } html,body{ height: 100%; width: 100%; } .test{ height: 100%; width: 100%; background: #EE6AA7; }
CSS 子元素铺满整个父元素、CSS + JQuery 实现遮罩层
蚩尤后裔-汪茂雄
12-17 1万+
目录 CSS 子元素铺满整个父元素 CSS + JQuery 实现遮罩层 CSS 子元素铺满整个父元素 1、有时候需要咋们的内容容器铺满整个页面，如在pad上访问时，希望它完全铺满，而且外围还不出现滚动条，以至于让它看起来像桌面App一样 2、如下所示".fileTreeContainer"虽然为div设置了"wdth:100%;height:100%"，但是却只有宽度有效，其高度并没有...
如何让表格（table）充满整个页面
mydeman的学习日志
07-17 2万+
        在开发过程中遇到了这个问题，需要将表格充满这个页面，实际的表格并没有那么高，于是使用如下代码设置：     test1     test1        但是表格并没有想象中的那样铺满这个页面，无论怎么调整都不行。此处是不能使用固定像素的高度的，因为那样将会随着屏幕分辨率的变化而变得非常难看。        最后只有借助于Google，将代码改为：              tes
CSS样式使HTML标签占满父容器的方法
简单就是美
03-01 3万+
CSS样式使HTML标签占满父容器的方法
html盒子模型子元素怎么水平占满父元素_CSS 盒模型
weixin_29503627的博客
01-04 2717
常见盒模型区域书写元素内容区域：width+height盒子可以实体化的区域：width+height+padding+border (背景可显示)盒子实际占位的位置：width+height+padding+border+margin宽度 width!注意:如果一个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其特点自动计算出实际宽度.<div> 元素等独占...
img 宽度占满父元素宽度，高度等于宽度
07-12
然后，将子元素的宽度设置为100%以占满父元素的宽度。 接下来，您可以使用`height`属性来设置子元素的高度，使其等于宽度。这可以使用CSS中的`aspect-ratio`属性来实现。 以下是一个示例代码： ```html .parent...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值