首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么html,body {height 100%}同时影响宽度和高度,而width 100%只影响width?

html,body {height 100%}同时影响宽度和高度,而width 100%只影响width的原因是因为CSS中的百分比单位是相对于父元素的尺寸来计算的。

当设置html和body元素的高度为100%时,它们的父元素就是浏览器窗口。因此,html和body元素的高度会被设置为浏览器窗口的高度,从而撑满整个窗口。这样,如果在body中有其他元素,它们的高度也会被撑开,以适应整个窗口的高度。

另一方面,width 100%只会影响元素的宽度,因为元素的宽度通常是由其内容决定的。如果没有设置具体的宽度值,元素的宽度将自动根据内容进行调整。因此,设置width 100%只会使元素的宽度与其父元素的宽度相同,而不会影响其他元素的宽度。

总结起来,html,body {height 100%}会影响宽度和高度,因为它们的父元素是浏览器窗口;而width 100%只会影响宽度,因为宽度通常由元素的内容决定。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

css-height

div块级元素没有为其设置宽度和高度,浏览器会为其分配可使用的最大宽度(比如全屏宽度),但是不负责分配高度,块级元素的高度是由子元素堆砌撑起来的。...那么,html和body标签的高度也都是由子级元素堆砌撑起来的。 ​...设置html的height:100%,就是浏览器的可视高度! 注意: body为100*100,div1为70*70,继承的是父级元素内容高度,不包括border和padding!...> html> div2的高度为100px,受到div1的高度影响;如果去掉div1的height: 100%;,则受到其子元素影响,高度为500px!...inhert height:100%和height:inherit大部分情况下是一致的,只有当子元素为绝对定位元素,同时,父容器的position值为static的时候,会有一定的差异性! <!

1.1K21

【Web前端】CSS”包装盒“--盒模型

它们具有以下特性: 宽度:默认情况下,宽度自动扩展以填满父容器的宽度。可以通过 ​​width​​ 属性调整。 高度:可以通过 ​​height​​ 属性设置高度。...内边距、边框、外边距:这些属性的设置影响元素的总高度和总宽度。 示例代码: 这是一个区块盒子元素 body> html> 行内盒子(Inline Box) 行内盒子元素不会从新的一行开始,只占据其内容所需的宽度...其主要特征是: 宽度和高度:无法通过 ​​width​​ 和 ​​height​​ 属性设置,元素的宽度和高度由其内容决定。 内边距和边框:影响行内元素的周围空间,但不会改变其所在行的高度。...主要的值包括: ​​content-box​​ 这是默认值,宽度和高度只包括内容区域,不包括内边距、边框和外边距。

10610
  • 关于Div的宽度与高度的100%设定

    正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?...其实,要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的,只需弄懂一个简单的问题就可以了,即100%的基数是谁,就是这个100%是相对于谁的width、height来说是...div的padding和margin影响,而其实际宽高不受影响。...但是只要为html和body设置高度为100%就可以了:html,body{height:100%;},这样之后div会按比例来继承上一级的高度了,仅仅设置的DIV元素的height属性貌似没有什么效果...,Html级元素默认宽度是100%,即整行;但是高度并不是100%,而仅仅是一行而已。

    3.9K20

    三. CSS layout(布局)

    width 设置内容区的宽度 height 设置内容区的高度 边框(border) ​ 边框(border),边框属于盒子边缘,边框里边属于盒子内部,出了边框都是盒子的外部,边框的大小会影响到整个盒子的大小...和 height两个属性来设置 width 设置内容区的宽度 height 设置内容区的高度...行内元素的盒模型: 行内元素不支持设置宽度和高度(宽度高度由内容决定) 行内元素可以设置padding,但是垂直方向padding不会影响页面的布局 行内元素可以设置border,垂直方向的border...box-sizing 用来设置盒子尺寸的计算方式(设置width和height的作用) 可选值: - content-box 默认值,宽度和高度用来设置内容区的大小 - border-box...宽度和高度用来设置整个盒子可见框的大小 width 和 height 指的是内容区 和 内边距 和 边框的总大小 <!

    2.2K40

    前端面试实录CSS篇(最近一周)

    加载差异:link 引用的 css,在页面加载时同时加载。而 @import 在页面加载完后才加载 3. 兼容性:link 是 html 标签,没有兼容问题。...• 组成:由四部分组成:margin, padding, border, content • 分类:标准盒模型 和 怪异盒模型(IE 盒模型) • 标准盒模型:width 和 height 的范围只包含了...content • 怪异盒模型:width 和 height 的范围只包含了 border, padding, content • 两者区别:在于 width 和 height 所包含的范围不同...当重置浏览器大小的过程中,页面会根据浏览器的宽度和高度重新渲染页面。 8. 对 BFC 的理解,如何创建 BFC?...计算 BFC 的高度时,需要计算浮动元素的高度 4. BFC 区域不会与浮动的容器发生重叠 5. BFC 是独立的容器,容器内部的元素不会影响外部元素 6.

    11210

    【云+社区年度征文】2020一网打尽CSS世界

    内联盒模型.png 内容区域:只与字号和字体有关,与行高无关!...>helloworld 包含块:如上述标签 幽灵空白节点:在HTML5文档声明中,内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”,同时具有该元素的字体和行高属性的...有了“幽灵空白节点”,`line-height` 就有了作用对象【 line-height影响行框的布局 】,从而相当于span前面撑起了一个高度为36px的宽度为0的内联元素。...替换元素尺寸从内而外分为3类:固有尺寸(源本身的宽度和高度)、HTML尺寸(HTML标签的width和height属性)和CSS尺寸(CSS中的widht和height以及max-/min-)其优先级为..."高度塌陷"可以让跟随的内容和浮动元素在一个水平线上;行框盒子如果和浮动元素的垂直高度有重叠,则行框盒子在正常定位下只会跟随浮动元素,而不会产生重叠。这是实现文字环绕的重要两点!

    5K11

    【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度外边距其他元素所占空间的影响

    一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度。...在设置width:100%后,子元素“溢出”了父元素 【注意】宽度默认为width:auto,但高度默认height:0 二.浮动/定位对width:auto和width:100%的影响 1.浮动/定位对...width:100%的影响 浮动/定位是通过改变元素width的参考基准来影响width:100%的,有以下三点规律 1.1 默认情况下:以它的父级元素宽度为参考基准 这也就是我们上面看到的demo所展示的...证明毫无影响 1.3子元素绝对定位,则分两种情况讨论  默认情况下以body元素宽度为参考基准 我们把inner-100percent对应的style改成: .inner-100percent{...-100percent的宽度变成了body也就是全屏的宽度 ?

    2.1K110

    Css详细介绍

    只在IE5以上才能识别,而link是HTML标签,无兼容问题; (4) link方式的样式的权重 高于@import的权重. 9、css中px和em,rem的区别 相同点:都是长度单位; 异同点: 1)...15、width: auto 和 width: 100% 的区别?...元素的宽度/高度由border + padding + content的宽度/高度决定,设置width/height属性指的是content部分的宽/高 布局所占宽度Width: Width = width...28、清除浮动 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素,高度会塌陷,而高度的塌陷使我们页面后面的布局不能正常显示。...如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:30px; width:100px

    9710

    【CSS3】CSS3 2D 转换 - scale 缩放 ① ( 使用 scale 设置缩放 | 使用 scale 设置缩放 与 直接设置盒子模型大小 对比 )

    ); 样式 ; 可以为 宽度 和 高度 设置不同的倍数 , 如 : 设置 transform:scale(2,0.5); 样式 , 表示 盒子模型 宽度放大到原来的 2 倍 , 高度缩小到原来的 0.5...height: 200px; /* 上下 100 像素外边距, 居中对齐 */ margin: 100px auto; /* 设置背景颜色...> body> html> 执行结果 : 初始状态 : 鼠标移动到盒子模型上之后 : 宽度变为原来的 2 倍 , 高度变为原来的 0.5 倍 ;...height: 200px; /* 上下 100 像素外边距, 居中对齐 */ margin: 100px auto; /* 设置背景颜色...> body> html> 执行结果 : 初始状态 : 鼠标移动到盒子模型上之后 : 宽高都变为原来的 2 倍 ;

    2.2K10

    【移动端网页布局】移动端网页布局基础概念 ⑥ ( 背景图像缩放 | 不等比例拉伸 - 同时设置宽高值 | 等比例拉伸 - 设置宽度 cover contain 值 )

    , 高度根据该宽度等比例缩放 ; background-size: 500px; 只设置宽度百分比值 : 宽度占父容器的 100% , 高度根据该宽度等比例缩放 ; background-size:...> body> html> 显示结果 : 2、宽高不等比例拉伸 - 同时设置 宽度 / 高度 的 像素值 / 百分比值 如果为盒子模型 同时设置了 宽度...和 高度 像素值 , 则 图片的宽度和高度分别进行拉伸 , 以达到样式中定义的宽高值 , 宽高不会等比例拉伸 ; /* 宽高不等比例拉伸 */ background-size...: 400px 400px; 或 /* 宽高不等比例拉伸 */ background-size: 100% 100%; 代码示例 : 设置 宽度 和 高度...> body> html> 设置 宽度 和 高度 的百分比值 : <!

    1K20

    前端学习笔记之CSS属性设置 CSS属性设置

    #1、内容的宽度和高度 通过标签的width和height属性设置 #2、元素的宽度和高度 宽度= 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度...#3、元素空间的宽度和高度 宽度= 左外边距 + 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度 + 右外边距 高度= 。。。。 我是强调 body> html> 如何让 height:100%起作用:你需要给这个元素的所有父元素的高度设定一个有效值。...换句话说,你需要这样做: 现在你给div的高度为100%,它有两个父元素body>和html>。为了让你的div的百分比高度能起作用,你必须设定body>和html>的高度。...> html> 五 盒子模型各部分详解 1、border边框 同时设置四条边的边框 border:边框的宽度 边框的样式 边框的颜色 分别设置四条边的边框 border-left:边框的宽度 边框的样式

    5.9K30

    「HTML+CSS」--自定义加载动画【042】

    > body> html> CSS html, body { margin: 0; height: 100%; } body { display:...、高度均为96px 背景色:quamarine(这里只是为了先显示span,后面会删除的) 相对定位 span { width: 96px; height: 96px; position:...步骤2 使用span::before、span::after伪类元素 设置 绝对定位(top:50% left:50%) 宽度、高度均为48px 背景色:白色 span::before, span::after...动画理解 对于白球来说 开始(0%) 是位于translate(0, 0),也就是不移动,待在原来位置; 50% 时位于translate(-50%, -50%),也就是向左移、上移相对于自身宽度(或高度...步骤9 将步骤8、步骤9的动画同时叠加 效果图如下 ? 疑点 步骤4中的 transform: scale(0.5) translate( -96px, -96px);为什么实际只移动了48px?

    46440

    前端课程——浮动

    有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定位、固定定位。 浮动 float属性指定一个 元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。...当前元素设置浮动后,之影响当前元素后边的元素 所有元素都设置为浮动的话,块级元素排列顺序变为水平方向的排列, 块级元素的浮动 块级元素默认的宽度和高度 宽度是父级元素宽度的100% 高度是0或者所有后代元素高度之和...设置为浮动后 宽度默认是0或者所有后代元素宽度之和 高度默认是0或者所有后代元素高度之科 多个块级元素都设置为浮动后->垂直方向排列变为水平方向排列 如果占满父级元素宽度的100%后,会自动换行 内联元素...内联元素的默认宽度和高度 宽度是内容的宽度- width属性是无效的 高度是内容的高度- height 属性是无效的 内联元素设置为浮动后 width 和height属性有效 多个内联元素依旧是水平排列...: 100%; height: 40px; } body> <a href

    89031

    css必知的几个底层知识和技巧

    2.2.子元素宽度设为100%时的奇怪现象原理探究 父元素的宽度 = 图片宽度 + 文字内容宽度 浏览器渲染原理:先下载文档内容,加载头部样式资源,然后按从上到下、自外而内的顺序渲染dom内容。...本例的现象产生的原因就是:当渲染到父元素时,子元素的width:100%并没有渲染,宽度就是图片加文字内容的宽度;等渲染到文字这个子元素的时候,父元素的宽度已经固定,此时的width:100%就是以固定好的父元素的宽度...: 100%; } 理论上父元素宽度应该是子元素宽度之和,但是却出现了上图的现象,原因归根就在于浏览器渲染的顺序:自外而内,这点十分重要。...border box内边缘而不是padding box内边缘 在PC端,默认滚动条均来自,PC端滚动高度可以用document.documentElement.scrollTop获取,在移动端用document.body.scrollTop...: auto;     overflow-x: hidden; } :root body{     position: absolute; } body{     width: 100vw;     overflow

    2.1K20

    Web 技术:CSS最小和最大(宽度高度)知识点及优缺点

    上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。 通常,我们希望限制元素相对于其父元素的宽度,同时使其具有动态性。因此,有一个基础宽度或高度的能力,使其扩展的基础上,可用的空间。...min-width 和 padding 在内容较长的情况下,min-width可以扩展按钮的宽度,而水平方向上的padding应该被添加,以实现一个合适的外观按钮。 ?...如果图像比父图像小,则max-width: 100%不会对图像产生实际影响,因为它比父图像小。 使用最小宽度和最大宽度 ?...混合最小宽度和最大宽度 在某些情况下,我们有一个最小宽度的元素,但同时,它没有最大宽度。这可能会导致组件太宽,而我们并不想这样做。考虑以下示例 ?...思路1 .c-modal__body { width: 600px; max-width: 100%; } 思路2 .c-modal__body { width: 100%;

    6.1K20
    领券