为什么已经指定了background-size: contain;还要设置height: 100%;? background-size设置的是背景。溢出部分会被隐藏。标签内没有内容,宽高默认都是0。...亲测只设置height,不设置width,也可以显示。为什么还要设置宽度? 可以加一个background-color辅助调试。...原因包括: 作为视频背景,需要设置宽高为100%。但视频100%可能会溢出父元素,而且是相对窗口大小的溢出。无论多大的窗口,都对多出一段滚动条。...需要设置一个与视图大小相同的div标签,设置为overflow: hidden; 代码中各标签及属性的作用: autoplay:自动播放,但可能被拦截。 loop:循环播放。 muted:静音播放。...即使是拖动窗口大小,如果元素采用了相对定位,也会有一个过渡的动画。
对最后的子元素设置的margin-top:80px;等同于为父元素设置了margin-top:80px;(父元素的margin-top=0,最后的子元素的margin-top=80px,发生了外边距重叠...例2: image.png 我们设置左右定位值left:0; right:0;,它的宽度同样自动填充填满了它所在的容器,只不过它的容器是它的第一个父级相对定位元素。...以上两个例子是比较常见的,没有设置宽高也会自动填充所在容器。 若刚才的两个例子,如果设置了width或heigth,自动填充特性就会被覆盖。...通过以上的例子,很多事情就很好理解了,比方说: 1.为什么图片设置了margin:0 auto不水平居中? image.png 如上图,设置了margin auto,图片为什么还是不居中呢?...2.为什么明明容器定高,子元素也定高了,margin auto 0 无法垂直居中?
有时我们会困惑为什么设置div的height:100%;没有效果,如下所示: ?...要解决这个问题,先的知道设置height:100%的原理,当你让一个元素的高度设置为百分比高度时,是相对于父元素的高度根据百分比来计算高度。...> 进阶 html 的父元素可以理解成window,浏览器会将html填充完一个浏览器窗口。...设置html的height为具体的像素值,当其值大于浏览器窗口时,浏览器出现滚动条,当其值小于浏览器窗口时,同样会将html填充完整个浏览器窗口(可以设置背景测试)。 ? ?...设置html的height为百分比时,当其值大于100%出现滚动条,当小于100%时同样会将html填充完整个浏览器窗口(可以设置背景测试)。
③、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。 如何将一个元素设置为块状元素? ...元素内容与边框之间是可以设置距离的,称之为“填充”。...30px; } 如果上、右、下、左的填充都为10px;可以这么写 div{padding:10px;} 如果上下填充一样为10px,左右一样为20px,可以这么写: div{padding:10px...p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数。...如: p{color:rgb(20%,33%,25%);} 3、十六进制颜色 这种颜色设置方法是现在比较普遍使用的方法,其原理其实也是 RGB 设置,但是其每一项的值由 0-255 变成了十六进制 00
其实不是的,最简单的适应就是这样的,这也是最简单的一种处理办法,有人说了,有的时候我们需要的是将一个logo铺满是不是也是可以的,logo的处理可以这样: 假设这是一个logo: ?...可以看出来和之前的区别是中间的空间变得很大,这是为什么呢?因为我们使用具体的数值+rem的时候,他会将布局的空间展示为那么大,那么我们的style里面已经设置好的是height为auto,什么意思呢?...就是css为什么保证图片不会变形,还要不失真,只能将图片等比缩放,那么等比缩放的时候就意味着有一些地方是不会出现图片的,所以只能是空白来填充!那么怎么解决这样的问题呢?...第二: 我们使用比较小的图片的时候,我们设置一个比较大的宽度的时候,图片是没办法完全填充的,举个例子: ...这是之前的比较小的图片,认真的可以发现我们最后一张是和之前的一张的宽度一样的,那么其实我们设置的时候不是的,我们写的是70rem的宽度,为什么会出现这样的情况呢?
div的height:100%;没有效果,如下所示: ?...要解决这个问题,先的知道设置height:100%的原理,当你让一个元素的高度设置为百分比高度时,是相对于父元素的高度根据百分比来计算高度。...> 进阶 html 的父元素可以理解成window,浏览器会将html填充完一个浏览器窗口。...设置html的height为具体的像素值,当其值大于浏览器窗口时,浏览器出现滚动条,当其值小于浏览器窗口时,同样会将html填充完整个浏览器窗口(可以设置背景测试)。 ? ?...设置html的height为百分比时,当其值大于100%出现滚动条,当小于100%时同样会将html填充完整个浏览器窗口(可以设置背景测试)。
主要的不同之处就是在解决中间部分被挡住的问题时,采取的解决办法不一样,圣杯布局是在父元素上设置了padding-left和padding-right,在给左右两边的内容设置position为relative...,通过左移和右移来使得左右两边的内容得以很好的展现,而双飞翼则是在center这个div中再加了一个div来放置内容,在给这个新的div设置margin-left和margin-right 。...效果图 原本录制了一个小视频,奈何不能上传到博客中,视频中通过缩放页面可以发现随着页面的宽度的变化,这三栏布局是中间盒子优先渲染,两边的盒子框子宽度固定不变,即使页面宽度变小,也不影响我们的浏览...中间的container是一个三栏布局。 三栏布局两侧宽度固定不变,中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。...双飞翼布局的实现 left、center、right三种都设置左浮动 设置center宽度为100% 设置负边距,left设置负边距为100%,right设置负边距为自身宽度 设置content的margin
最近复习html和css的内容,想起来一个之前没想明白的问题,为什么块级元素margin:0 auto可以实现水平居中,而margin:auto不能实现水平垂直双居中呢?...{ height: 100px; width: 100px; background: red; margin: 0 auto; } 块级元素设置居中的前提是设置了width,若在css中没写width...auto指平分剩余空间 比如上图中我父div宽度为200px,子div宽度为100px,则水平方向平分剩余宽度为(200-100)/2 我们知道margin:0 auto和margin:0 auto 0...divmargin:0 auto 0 0,只给了右边设置了auto相当于让右边自己平分剩余空间,即把父div的剩余空间全都给了右侧; 怎么实现垂直方向居中 为什么margin:auto不能实现在垂直方向上的居中呢...因为默认垂直方向上没有剩余空间 如果子元素设置了绝对定位且四边都设为0,子元素会填充整个父元素的所有剩余空间,auto就能平均分配水平和垂直方向的剩余空间了。
元素的高度等于默认值为auto的内容。 考虑下面的例子 What's my height?...CSS grid 和自动设置一个 auto 列 ? 在CSS Grid中,我们可以设置一个列为auto,这意味着它的宽度将基于它的内容长度。...如果内容适合填充框内部,则它看起来与可见内容相同,但仍会建立新的块格式化上下文。 如果内容溢出,桌面浏览器会提供滚动条。...如果我检查了子项并转到computed styles,你猜下left属性的值会是什么? ? left的默认值为16px,即使没有设置。为什么会发生这种情况?...假设子项必须在较小的视口中位于距左侧100像素的位置,对于桌面,它应恢复为默认位置。
接下来就是写css了,先让class="wall"的div的宽和高都为100%,以填充整个页面,CSS如下: 1 2 body{ margin...:0; top:0; text-align:center;} 4 .img404{ border:0;width:700px;} 5 以上CSS里面值得一说的恐怕就是为什么要用绝对定位...(position:absolute)以及_height:100%这个样式了;我试了很多方法,结果我只能用绝对定位才能让它的height:100%生效,当然固定定位(position:fixed)也是可以的...,可是IE6不支持;_height:100%是为了兼容IE6,让class="wall"的div在IE6里也能高度为100%。...接下来就利用vertical-align:middle来实现垂直居中了,因为class="wall"的div填充了整个页面,所以只要让图片在class="wall"的div里面垂直居中就达到目的了。
例如: div, p { color: red; } 上面的代码为div标签和p标签统一设置字体为红色。...p { color: green; } 此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。...6.2 relative(相对定位) 相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。...: none; /*删除列表默认的圆点样式*/ margin: 0; /*删除列表默认的外边距*/ padding: 0; /*删除列表默认的内填充*/ } /*...padding: 0 15px; /*设置左右各15像素的填充*/ color: #b0b0b0; /*设置字体颜色*/ line-height: 40px; /*设置行高*/
relative(相对定位) 相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。...这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、Bottom、Left...因为它原本所占的空间仍然占据文档流。 在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。 示例代码: <!...padding: 0 15px; /*设置左右各15像素的填充*/ color: #b0b0b0; /*设置字体颜色*/ line-height: 40px; /*设置行高*/...padding: 0 15px; /*设置左右各15像素的填充*/ color: #b0b0b0; /*设置字体颜色*/ line-height: 40px; /*设置行高*/
该属性默认为 0,表示即使该行有额外空间也不会占满,设置为 1 表示右元素占满额外空间。...此时布局是这样的: image.png 这里要注意的点:块级元素在不显式设置宽度的情况下确实撑满整个屏幕,从这个角度来看,width 设置为 100% 似乎没有必要。...center 的宽度为 100%,此时,left 和 right 部分会跳到下一行; 通过设置负 margin 让 left 和 right 部分回到与 center 部分同一行; 这里开始有所不同:...flex 有三个值时,设置的是 flex-grow,flex-shrink,flex-basis。这里左右两列的 flex-basis 都是 100px,实际上为它们设置了固定宽度。...撑不开高度),即父盒子由最高列撑开,其他两列不足高度的部分由 padding 填充。
) nowrap 即使超出容器也不会进行换行,而是尝试压缩内部flex元素的宽度(在下边的子元素相关的属性会讲到) 三种取值的示例: ?...flex-grow flex-grow用来控制某个子元素在需要沿主轴填充时所占的比例,取值为正数(浮点数也可以的)。...selector { flex-grow: 1; flex-grow: 1.5; } 举例说明: 如果一个容器中有三个元素,容器剩余宽度为100px,三个元素需要进行填充它。...如果其中一个元素设置了flex-grow: 2,而其他的设置为1(默认不设置的话,不会去填充剩余宽度) 则会出现这么一个情况,第一个元素占用50px,而其他两个元素各占用25px。 ?...比如说,如果我们的容器宽为100px,三个元素均为40px,则会出现容器无法完全展示所有子元素的问题。
例如: div, p { color: red; } 上面的代码为div标签和p标签统一设置字体为红色。...p { color: green; } 此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。...display:"block" 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。...relative(相对定位) 相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。...padding: 0 15px; /*设置左右各15像素的填充*/ color: #b0b0b0; /*设置字体颜色*/ line-height: 40px; /*设置行高*/
="middle">中间 右侧 实现过程: 仅需将容器设置为display:flex; 盒内元素两端对其,将中间元素设置为...100%宽度,或者设为flex:1,即可填充空白。...visibility:hidden 设置元素的visibility为hidden也是一种常用的隐藏元素的方法。...opacity:0 opacity属性表示元素的透明度,将元素的透明度设置为0后,在我们用户眼中,元素也是隐藏的。 不会引发重排,一般情况下也会引发重绘。...设置height、width属性为0 将元素的margin,border,padding,height和width等影响元素盒模型的属性设置成0,如果元素内有子元素或内容,还应该设置其overflow:
当我们为图像应用不同的宽度和/或高度时,我们实际上是在改变内容框的尺寸。如果内容框的尺寸发生变化,图像仍然会填充内容框。...这是因为,默认情况下,图像无论设置了什么尺寸都会填充其内容框。 因为 fill 属性可能会扭曲图像,所以在大多数情况下,它可能不是最好的选择。...结果与图像设置为宽度和高度为 100% 并包含在一个设置为 300px 乘300px 的 div 中的结果相同。...更好的选择可能是将iframe的宽度设置为可用空间的width: 100%,然后使用aspect-ratio属性来保持其比例。...更常见的是,有一个图像需要适应的特定空间,所以 object-fit 对于允许图像适应该空间而不被扭曲(即使其中一部分必须被隐藏)非常有用。
但是这么做在 Chrome 和 Edge 中 thumb 也是水平缩放的,因为 thumb 是 track 的子节点。...Edge 中填充区域的宽度为 thumb 的中间点到 track 内容左边界的距离: 在 Firefox 中填充区域的宽度为 thumb 左右边界距离 input 内容框左右边界的比例点到 track...不过,如果 thumb 的宽度为 0 的话,那么填充区域的表现就会与其他浏览器一样了。如果一定有 thumb 的尺寸,那么就能需要自己根据当前的值来绘制填充区域。...在计算填充区域范围时,需要考虑上文提到的 Chrome 已填充区域范围的表现,具体实现如下 @mixin track { background: linear-gradient(100deg,...#5dd8fb 2%, #5dc1fb 100%) 0/ var(--sx) 100% no-repeat, $track-color; } // --val: 当前input的值
(1)外层div使用position:relative;高度要求自适应的div使用position:absolute;top:100px;bottom:0; left:0;right:0; (2)使用...flex布局,设置主轴为竖轴,第二个div的flex-grow为1。...使用绝对定位的元素会有计算值,即使祖先元素的height计算为auto也是如此。 70.min-width/max-width 和 min-height/max-height 属性间的覆盖规则?...(5)支持小数值,即使0.1px也是支持的。 (6)暂不支持百分比值。 94.word-spacing 与单词间距?...; height: 100px; background: lightgreen; } /*(2)利用flex布局的方式,左右两栏的放大和缩小比例都设置为0,基础大小设置为固定的大小,中间一栏设置为
领取专属 10元无门槛券
手把手带您无忧上云