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为依据；设置为相对位移时，仍以父元素为依据。

普通情况下:

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

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

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

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

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

CSS盒状模型-描述网页元素布局，HTML元素抽象为矩形盒子，由内容（content）、内边距（padding）、边框（border）、外边距（margin）以及实际开发中的具体应用（详细讲解）
weixin_43608968的博客
09-17 111
本教程详细介绍了CSS中的盒子模型，包括边框、内边距和外边距的使用，以及它们如何影响元素的尺寸。每个知识点都有精彩的案例支持，同时也讨论了边框合并、外边距合并的现象及解决方案，并探讨了CSS3的新特性如圆角边框、盒子阴影和文字阴影。此外，还提到了在布局前清除默认内外边距的重要性。
【白嫖党】如何把前端学好？看完这篇，直呼：太强了！（历经半个月之作）
热门推荐
超逸の学习技术博客
04-04 2万+
很少有文章做到将知识形成一个体系，于是需要翻阅很多资料，但这篇文章做到了！共34815字数。
关于浮动元素宽度自适应父容器宽度的问题
FuChenRenShen的博客
08-31 5092
希望有朋友能帮忙解答！ 自己对于这块的理解：作为一个浮动元素，其应该是脱离了文档流的，而其父容器是属于文档流的，那这个浮动元素的宽度又是根据什么来计算的呢？为什么其脱离了文档流，却会去适应文档流的父容器的宽度呢？样例如下列格式： (样例参照张鑫旭老师《css世界》6.1章节魔鬼属性float 所写，当然前提是排除掉文字不换行和长串英文字符) <div class="parent"&gt...
百分比宽度并排元素浮动之后,设置margin,padding换行的问题
weixin_33834075的博客
04-16 543
今天遇到一个问题, 如下图,右边的div加了内边距换行: 解决方法: box-sizing: border-box; 转载于:https://www.cnblogs.com/Skrillex/p/10715923.html
html子元素浮动使用百分比时，父元素宽度等于子元素所有宽度的和，你看到的现象。拿来即用，拿来测试
mengzhanfei1的博客
12-29 491
子元素浮动使用百分比时，父元素宽度等于子元素所有宽度的和，你看到的现象。拿来即用，拿来测试
html自适应_HTML文档流，设置元素浮动，导致父元素高度无法自适应的解决方法...
weixin_39731107的博客
12-01 194
元素浮动定义float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。why 子元素浮动 会导致...
子div浮动，父div宽度设置100%
qq_43664969的博客
10-07 1096
今天在做导航条时，由于想要居中导航栏（子div），使用了float，导致父div高度塌陷，样式都没用，具体看下图： 结构大概是这样： nav是导航栏子div，使用了float:left，header是父div，我在父级中设置width 100%,背景颜色不能铺满 开始以为清除浮动就行了，试了各种清除浮动技术，弄了很久都没用，后来才发现是很简单的问题 原来是width:100%是需要父级wid...
HTML/CSS共7k字带你能独立完成简单网页的制作
m0_52586550的博客
06-20 585
文章目录HTMLHello World语法标签行级标签a标签属性块级标签HTML设置水平分割线行内块级标签表单元素input type属性值input 属性常用特殊符号区别软件架构CSSCSS引入方式css样式字体样式文本样式背景样式隐藏样式浮动属性盒子模型position定位属性CSS选择器新建项目 HTML HTML（Hyper texte mark-up language）:超文本标记语言，可以描述文字、数字、字母，特殊符号、声音、图片、图像等多媒体内容。 Hello World <html..
HTML详解
LJT_1314520的博客
07-14 1043
1.标题文字.......... #=1~6；h1为最大字，h6为最小字 2.字体变化.......... 3.显示小字体.......... 4.显示大字体.......... 5.粗体字.......... 6.斜体字.......... 7.打字机字体.......... 8.底线.......... 9.删除线.........
《Web前端开发技术(HTML+CSS+JavaScript)》题库附答案
m0_63394128的博客
03-14 1万+
什么是Web技术？ 答：Web即全球广域网（World Wide Web），也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。它是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超链接将Internet上的信息节点组织成一个互为关联a的网状结构。 什么是Web前端？ 答：Web前端是指基于Web（现在一般指动态页面技术）的客户端软件，也就是通常说的在浏览器端运行的网页程序...
浮动之后，宽和高去哪里了？CSS的一些误区（二）
weixin_42493393的博客
04-25 1786
往期回顾：CSS的一些误区（一） 一、浮动带来的问题 内盒浮动，外层包裹的盒子高度塌陷，与自己预期不符。 内盒必须全部浮动，得安排内盒得浮动方向，没有默认，都必须显式设置。 使用外盒使用overflow:hidden清除浮动，但是内盒使用margin负值等情形，造成页面被截断。 这些是过去几年中，如果使用浮动布局产生的“尴尬返工时刻”。迎来了flex布局后，再也不使用浮动进行布局了。由此我大胆推测flex布局的发明就是为了消灭浮动。弄清楚元素浮动之后，对其自身实体产生的宽高变化，对于解决浮动产生的问题就迎
子元素position为fixed时，宽度如何保持与父元素一致。
qq_24243695的博客
03-28 9591
position: fixed是生成绝对定位的元素，相对于浏览器窗口进行定位。 如果设置宽度100%，宽度会超过父元素 如果设置宽度width: inherit，会继承父元素宽度
CSS的浮动与定位
qq_36801250的博客
04-20 216
##浮动与定位 浮动 浮动可以理解成向网页的元素发布一个排列命令，它常用的值是left/right/none这三种，当为left的时候，元素从左向右排成一行，当为right时，元素从右向左排成一行 当一个元素或多个元素浮动以后，这个时候，一定要注意以下几点： 当浮动了元素总的宽度大于外层的宽度的时候，这个时候，它一排放不下，会折反到下面来 浮动以后的元素会脱离当前的文档流（也就是我们所指漂浮...
HTML5基础（height,width设置）
HandsomeLeft的博客
03-08 2397
对于html5，height和witch有4种可以设置的单位，分别是px，百分比，em，rem。并且他们都是相对的单位类型。 px是以你当前屏幕分辨率和电脑缩放比例为基准 当你的分辨率保持不变，更改电脑的缩放比例，你会发现相应的height和width也会发生改变。 百分比是以当前标签的父标签的 ...
HTML5里浮动效果的说明与展示
L20220927Y的博客
10-17 881
HTML5里浮动效果的说明与展示
浮动（float）
qq_44846625的博客
06-01 1026
float 文档流 默认状态下元素在文档中所处的位置 浮动布局 适用场景 块元素的横向排布 浮动元素的特点 浮动(float)的值有两个 ：左浮动（left）和右浮动（right）。 设置了浮动的元素，其默认大小有内容撑出 （对于块元素而言） div中没有设置宽度，宽度等于其父元素的宽度,给div和span都设置左浮动后div的宽度是内容撑开的宽度 设置了浮动的元素，可以设置宽高。（对于行元素而言） 设置了浮动元素，水平浮动，直到遇到父级元素的边界或者另外一个浮动元素停止浮动（哪个元素在前面哪
元素的默认宽高、浮动问题、划块、权重、 内联元素和块元素的区别
Braque的博客
06-09 745
元素的默认宽高： 1.未浮动的元素宽度默认为父级的100%（浮动的元素会脱离文档流。什么是脱离文档流，以后再讲。） 2.高度默认为0，如果有子集的话高度由子集决定 如果父级为body，高度百分比不生效，不是body，高度百分比是生效的 3.浮动的元素的宽度由内容决定，没有内容默认为0 元素的浮动： 1.希望哪几个元素在一行上显示就给哪几个元素加浮动， 不管左浮动还是右浮动，都是居父级的最左边或者最右边 清除浮动不是一劳永逸的，页面中有多少处用到了浮动，就需要清除多少次(这点特别重要，虽然表现形式可能看不出差
为什么清除浮动？
hahahaha__init__的博客
09-09 408
因为最大的父元素不方便给高度，子元素不确定多少 所以应该让子元素撑开父元素 但是会使父元素变为0 会影响下一个元素 这时候就需要清除浮动了 因为浮动不占有位置，需要清除浮动，来占位置 ...
CSS一个子元素大小固定，另一个子元素宽度自适应占满父元素
weixin_42527398的博客
06-27 3827
方法一 原理：对固定大小的子元素设为float，自适应的子元素通过margin避免两个元素的重叠，利用块级元素具有默认继承父元素宽度的特性 .child1{ float: left; width: 200px; height: 200px; background-color: aqua; } .child2{ height: 200px; margin-left: 200px; background-color: blue; } 方法二 原理：
CSS浮动元素与闭合问题深度解析：解决方法与实例
浮动元素（通过`float`属性实现）在网页设计中被广泛应用，如实现多栏布局，但它们会带来一些挑战，尤其是当涉及到父元素如何正确包含未设置高度的浮动子元素时。 浮动元素的一个关键特性是它们脱离了常规文档流，...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值