html 当元素浮动时，宽度设置为百分制时的问题

最新推荐文章于 2022-10-17 17:53:56 发布
原创 最新推荐文章于 2022-10-17 17:53:56 发布 · 1.2k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #浮动情况下百分制的依据

博客介绍了HTML中元素宽度百分制设置的依据。普通情况下，子元素宽度百分制以父元素大小为依据；设置为绝对位移或固定位移且父元素不是body时，以body为依据；设置为相对位移时，仍以父元素为依据。

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

普通情况下:

当子元素的宽度值以百分制的形式设置时，100%应该为父元素的大小，也就是说百分之多少是以父元素的宽度大小为依据的

当元素设置为绝对位移(absolute)或固定位移(fixed)时

元素脱离标准文档流，这时元素的大小设置为百分制就不是以父元素为依据（若父元素不是body），而应该是以body为依据。

当元素设置为相对位移(relative)

若元素设置为相对位移，虽然是脱标，但仍占位置，所以百分制的依据仍是父元素

【白嫖党】如何把前端学好？看完这篇，直呼：太强了！（历经半个月之作）
超逸の学习技术博客
04-04 2万+
很少有文章做到将知识形成一个体系，于是需要翻阅很多资料，但这篇文章做到了！共34815字数。
HTML/CSS共7k字带你能独立完成简单网页的制作
m0_52586550的博客
06-20 567
文章目录HTMLHello World语法标签行级标签a标签属性块级标签HTML设置水平分割线行内块级标签表单元素input type属性值input 属性常用特殊符号区别软件架构CSSCSS引入方式css样式字体样式文本样式背景样式隐藏样式浮动属性盒子模型position定位属性CSS选择器新建项目 HTML HTML（Hyper texte mark-up language）:超文本标记语言，可以描述文字、数字、字母，特殊符号、声音、图片、图像等多媒体内容。 Hello World <html..
关于浮动元素宽度自适应父容器宽度的问题
FuChenRenShen的博客
08-31 5059
希望有朋友能帮忙解答！ 自己对于这块的理解：作为一个浮动元素，其应该是脱离了文档流的，而其父容器是属于文档流的，那这个浮动元素的宽度又是根据什么来计算的呢？为什么其脱离了文档流，却会去适应文档流的父容器的宽度呢？样例如下列格式： (样例参照张鑫旭老师《css世界》6.1章节魔鬼属性float 所写，当然前提是排除掉文字不换行和长串英文字符) &lt;div class="parent"&gt...
百分比宽度并排元素浮动之后,设置margin,padding换行的问题
weixin_33834075的博客
04-16 532
今天遇到一个问题, 如下图,右边的div加了内边距换行: 解决方法: box-sizing: border-box; 转载于:https://www.cnblogs.com/Skrillex/p/10715923.html
html子元素浮动使用百分比时，父元素宽度等于子元素所有宽度的和，你看到的现象。拿来即用，拿来测试
mengzhanfei1的博客
12-29 479
子元素浮动使用百分比时，父元素宽度等于子元素所有宽度的和，你看到的现象。拿来即用，拿来测试
html自适应_HTML文档流，设置元素浮动，导致父元素高度无法自适应的解决方法...
weixin_39731107的博客
12-01 187
元素浮动定义float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。why 子元素浮动 会导致...
子div浮动，父div宽度设置100%
qq_43664969的博客
10-07 1084
今天在做导航条时，由于想要居中导航栏（子div），使用了float，导致父div高度塌陷，样式都没用，具体看下图： 结构大概是这样： nav是导航栏子div，使用了float:left，header是父div，我在父级中设置width 100%,背景颜色不能铺满 开始以为清除浮动就行了，试了各种清除浮动技术，弄了很久都没用，后来才发现是很简单的问题 原来是width:100%是需要父级wid...
web前端期末大作业：基于HTML+CSS+JavaScript制作我的音乐网站（带设计报告）
qq_3200628753的博客
08-07 2722
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结......
HTML+CSS
Nie_XiaoGang的博客
07-31 731
HTML+CSS笔记
HTML详解
LJT_1314520的博客
07-14 1012
1.标题文字.......... #=1~6；h1为最大字，h6为最小字 2.字体变化.......... 3.显示小字体.......... 4.显示大字体.......... 5.粗体字.......... 6.斜体字.......... 7.打字机字体.......... 8.底线.......... 9.删除线.........
浮动之后，宽和高去哪里了？CSS的一些误区（二）
weixin_42493393的博客
04-25 1767
往期回顾：CSS的一些误区（一） 一、浮动带来的问题 内盒浮动，外层包裹的盒子高度塌陷，与自己预期不符。 内盒必须全部浮动，得安排内盒得浮动方向，没有默认，都必须显式设置。 使用外盒使用overflow:hidden清除浮动，但是内盒使用margin负值等情形，造成页面被截断。 这些是过去几年中，如果使用浮动布局产生的“尴尬返工时刻”。迎来了flex布局后，再也不使用浮动进行布局了。由此我大胆推测flex布局的发明就是为了消灭浮动。弄清楚元素浮动之后，对其自身实体产生的宽高变化，对于解决浮动产生的问题就迎
子元素position为fixed时，宽度如何保持与父元素一致。
qq_24243695的博客
03-28 9483
position: fixed是生成绝对定位的元素，相对于浏览器窗口进行定位。 如果设置宽度100%，宽度会超过父元素 如果设置宽度width: inherit，会继承父元素宽度
CSS的浮动与定位
qq_36801250的博客
04-20 207
##浮动与定位 浮动 浮动可以理解成向网页的元素发布一个排列命令，它常用的值是left/right/none这三种，当为left的时候，元素从左向右排成一行，当为right时，元素从右向左排成一行 当一个元素或多个元素浮动以后，这个时候，一定要注意以下几点： 当浮动了元素总的宽度大于外层的宽度的时候，这个时候，它一排放不下，会折反到下面来 浮动以后的元素会脱离当前的文档流（也就是我们所指漂浮...
宋图图的工学课程6
Song_Tutu的博客
09-17 279
content宽度和高度 使用宽度属性width和高度属性height可以对盒子的大小进行控制。 width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。 大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是： /*外盒尺寸计算（元素空间尺寸）*/ Element空间高度 ...
HTML5基础（height,width设置）
HandsomeLeft的博客
03-08 2369
对于html5，height和witch有4种可以设置的单位，分别是px，百分比，em，rem。并且他们都是相对的单位类型。 px是以你当前屏幕分辨率和电脑缩放比例为基准 当你的分辨率保持不变，更改电脑的缩放比例，你会发现相应的height和width也会发生改变。 百分比是以当前标签的父标签的 ...
HTML5里浮动效果的说明与展示
L20220927Y的博客
10-17 861
HTML5里浮动效果的说明与展示
浮动（float）
qq_44846625的博客
06-01 1011
float 文档流 默认状态下元素在文档中所处的位置 浮动布局 适用场景 块元素的横向排布 浮动元素的特点 浮动(float)的值有两个 ：左浮动（left）和右浮动（right）。 设置了浮动的元素，其默认大小有内容撑出 （对于块元素而言） div中没有设置宽度，宽度等于其父元素的宽度,给div和span都设置左浮动后div的宽度是内容撑开的宽度 设置了浮动的元素，可以设置宽高。（对于行元素而言） 设置了浮动元素，水平浮动，直到遇到父级元素的边界或者另外一个浮动元素停止浮动（哪个元素在前面哪
元素的默认宽高、浮动问题、划块、权重、 内联元素和块元素的区别
Braque的博客
06-09 732
元素的默认宽高： 1.未浮动的元素宽度默认为父级的100%（浮动的元素会脱离文档流。什么是脱离文档流，以后再讲。） 2.高度默认为0，如果有子集的话高度由子集决定 如果父级为body，高度百分比不生效，不是body，高度百分比是生效的 3.浮动的元素的宽度由内容决定，没有内容默认为0 元素的浮动： 1.希望哪几个元素在一行上显示就给哪几个元素加浮动， 不管左浮动还是右浮动，都是居父级的最左边或者最右边 清除浮动不是一劳永逸的，页面中有多少处用到了浮动，就需要清除多少次(这点特别重要，虽然表现形式可能看不出差
为什么清除浮动？
hahahaha__init__的博客
09-09 390
因为最大的父元素不方便给高度，子元素不确定多少 所以应该让子元素撑开父元素 但是会使父元素变为0 会影响下一个元素 这时候就需要清除浮动了 因为浮动不占有位置，需要清除浮动，来占位置 ...
CSS浮动元素与闭合问题深度解析：解决方法与实例
浮动元素（通过`float`属性实现）在网页设计中被广泛应用，如实现多栏布局，但它们会带来一些挑战，尤其是当涉及到父元素如何正确包含未设置高度的浮动子元素时。 浮动元素的一个关键特性是它们脱离了常规文档流，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值