CSS中width的百分比设置

最新推荐文章于 2024-07-29 18:03:30 发布
最新推荐文章于 2024-07-29 18:03:30 发布
阅读量7.7k 收藏 6
点赞数 4
分类专栏： 工作经验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xu3tu/article/details/79594063
版权

   元素的width的百分比设置： 定义基于包含块（父元素）宽度的百分比宽度。 话虽如此，实际上无论怎么设置盒模型(box-sizing)的宽度，子元素都是基于父元素的内容（content）宽度并非width的实际大小。

结论：子元素的width是基于父元素 内容宽度 而并非 width的大小。（Demo简单，自行测试吧，无图了）

xu3tu
关注
专栏目录
关于width: 100%的一些看法
weixin_33754913的博客
05-16 1585
一.position对width 设置为百分比的影响<html> <head> <style type="text/css"> img { width: 50% } body { margin: 8px; } </style&...
css定位的百分比的算法,css定位中的百分比
weixin_29821223的博客
08-03 1351
----转载自自己在牛人部落中的相关文章---在前端css定位中经常面对的一个问题是，百分比定位究竟是针对于谁定位？一、margin，padding的百分比首先从css的设计意图说起，在浏览器默认的writing-mode: horizontal-tb;和direction: ltr;的情况下，因为CSS的基础需求是排版，而通常我们所见的横排文字，其水平宽度一定(仔细回想一下，如果没有显式...
width百分比
weixin_33713707的博客
06-20 144
table中的td可以在页面中直接在元素上设置width；但是li不能只能在页面中写style； <!-- <li width="20%" class="p-box">1</li> <li width="20%" class="t-box">2</li> ...
【CSS】css 如何实现固定宽高比
最新发布
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
07-29 1002
总结起来，使用属性是实现固定宽高比的现代方法，因为它直接控制元素的宽高比，不受元素宽度的影响。而技巧则是一种兼容性更好的解决方案，适用于那些不支持属性的旧浏览器。
table-layout:fixed
前端队长Daotin
08-11 200
table-layout: fixed; 在table上设置上面属性后，如果不设置td的宽度，那么所有td的宽度平分总table宽度。如果设置了td的宽度，则以设置的宽度为准。 table-layout: auto; // 此为默认值 ...
html设置页面大小始终100%,css width 100% 宽度百分之百设置与不设置
weixin_39896256的博客
06-03 1万+
css宽度百分之百设置与不设置css width可以设置具体固定数值比如10px、500px、980px、1200px等，以达到网页固定宽度显示。css 宽度 width也可以设置百分比值，比如80%、90%、100%等。这里为大家介绍100%宽度知识，究竟100% width宽度究竟是多宽？一、随浏览器分辨率宽度而改变100% width如果是最外层DIV布局设置css宽度100%(width:...
关于css中百分比的问题
m0_47531829的博客
05-22 429
还记得去年秋招的时候，我遇到一个及其刁蛮的面试官，各种装×，本来不想面了，到最后问了我一个css中的百分比问题，让我说一下定位，移动(transform/tranlate)，以及margin中的百分比都是相对于谁的，定位和移动我知道，但是margin却没使用过百分比，很少使用吧。于是，我直接傻傻的回答了margin没有百分比。后来我也没怎么review这段面试，但是这段面试却让我非常印象深刻，秋招面了这么多公司，见了这么多面试官，就这一个令我非常非常无语。不过话说，我在今天根据b站up主----极梦小屋的视
html width 可以用百分比吗,CSS：Width如何以百分比形式工作？
weixin_42524762的博客
06-14 1088
我有我认为是一个奇怪的问题.我有一个div,在父div中,我给了孩子div宽度为100％,但它没有增长到父div的大小.父div没有任何类型的设置宽度.所以我的问题是：宽度百分比仅在父元素具有设置宽度时才起作用,或者它是否应该增长？澄清：如果父div没有设置宽度,有些人可能想知道父div的宽度是如何增长的.原因是我在父div中有其他兄弟元素,并且设置了它们的宽度,所以父div已经增长到满足那些兄弟...
浅谈CSS中的百分比
09-27
CSS中的百分比单位是CSS布局中非常重要的一个概念，它常常用于宽度、高度、边距以及定位等属性的设定。在使用百分比时，需要清楚其计算基准是相对于谁的，以及不同定位方式下，百分比是如何计算的。 首先，百分比在...
彻底掌握CSS中的percentage百分比值使用
09-24
在CSS中，百分比（percentage）是一个非常重要的概念，它被广泛用于定义元素的尺寸、位置和布局。百分比值的使用使得网页设计更具灵活性，能够适应不同屏幕尺寸和设备。下面我们将深入探讨CSS中百分比值的使用，以及...
css制定百分比宽度
wenqingzzz的专栏
04-08 708
当我们给块级元素设置响应式高度的时候，例如给div设置height=50%，往往没能看到效果。  原因是百分比的大小是相对其父级元素宽高的大小，如最外层元素设置的百分比是对应屏幕而言的。  需要了解的是对于宽度来说，其父级元素无须确定宽度就能设置百分比，例如我们可以利用这个特性给未知宽度的块级元素设置水平居中效果：  父元素css： position: relative/abso
css自适应宽度width百分比
hugejihu9的专栏
10-15 2407
随外级对象变化而自适应百分比显示宽度。   举个例子   css代码： html代码： 浏览器效果如下图：     文章来自：源码在线https://www.shengli.me/css/45.html...
CSS中 height/width取值为百分比时参考值 以及 padding/margin(内外边距)设置为百分比时的参考值
qq_37899792的博客
10-22 1531
宽高取值为百分比时的参考值 width 是 基于父元素的 width 计算的值 height 是基于父元素的 height 计算的值 内外边距取值为百分比时的参考值 margin(四个方向：top，right，bottom，left )以及padding(四个方向：top，right，bottom，left )设置的值为百分比的时候， 是相对于最近的父级块级元素的width。 ...
Css表格布局的百分比
QueenJade的收录
04-10 3706
通常网页应用显示表格不是满屏的，然后就有按百分比来界定显示范围，比较死板的办法就是写像素值写死了。      T1      T2 这么一个表格咱当前页的70%,列宽由第一行的各个单元格的宽度决定，但是各个列宽的百分比之和不能超出100%，就是可以小于等于100%。 否则超出的那个最后一列就不能分到列宽。
CSS-移动端适配问题
weixin_41075407的博客
06-15 371
正在学习前端，发现移动端适配问题各种概念容易混，便梳理一下，进行了总结
element-ui设置table组件宽度（width）为百分比
热门推荐
小太阳的博客
04-28 2万+
直接设置width：'xx%'是无效的， 所有的width都设置为min-width，然后每一个el-table-column都需要设置百分比才会生效。 代码如下： <el-table-column prop="projectName" min-width="24%" //设置百分比 label="项目点位名称"/> <el-t...
网页设计04
Yangcongming1130的博客
12-16 516
第四章 盒子模型 4.1 认识盒子模型 所谓盒子模型就是把HTML页面中的元素看做看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距边框、外边距组成。 4.2盒子模型相关属性 4.2.1边框属性 在CSS中边框属性包括边框样式属性(border-style)、边框宽度属性（border-width)、边框颜色属性（border-color）、单侧边框的属性、边框的...
正确使用“width:100%“
weixin_43601701的博客
05-31 6326
文章目录不使用 绝对定位 时的width:100%;使用 绝对定位 时的width:100%; 不使用 绝对定位 时的width:100%; 这是一个div，里面没有任何的元素。等会要加入内容div <div style=" height: 120px; width: 200px; margin: 20px; border: 30px solid rgb(216, 186, 89); padding
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值