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

【复习】CSS实现高等比自适应容器

于是我们就需要实现一个宽度自适应,高度为宽度一半的容器。 这里先以高度为宽度一半为例,也可以是其他任意比例。...我们就可以利用这个特性,实现移动端的高等比自适应容器。...这个方法相比原来图片的等比缩放,有个优点:无论图片是否加载成功,容器高度始终是计算完成,不会造成页面抖动,也不会造成页面重绘,从而提升性能。...三、实现方法2 - 通过子元素 padding 实现 通过设置子元素的 padding 属性来实现,是比较常用,也是效果比较好的一种,这里需要理解的是:子元素的 padding 属性百分比的值是先对父容器的宽度而言...text">我是王平安,pingan8787 .box{ width: 200px; } .text{ padding: 10%; } [2] 分析: 这里我们将父容器

1.5K00
您找到你想要的搜索结果了吗?
是的
没有找到

每天10个前端小知识 【Day 17】

,.item元素就是网格的项目,由于网格元素只能是容器的顶层子元素,所以p元素并不是网格元素。...200px 200px 200px,行高为 50px 50px 上述代码可以看到重复写单元格高,通过使用repeat()函数,可以简写重复的值。...200 px,但列的数量是固定的,只要浏览器能够容纳得下,就可以放置元素 fr:片段,为了方便表示比例关系 grid-template-columns: 200px 1fr 2fr 表示第一个列设置为...超出的部分就是隐式网格 而grid-auto-rows与grid-auto-columns就是专门用于指定隐式网格高 关于项目属性,有如下: grid-column-start 属性、grid-column-end...实现方式 实现方式有很多种,主要有如下: 内联首屏关键CSS 异步加载CSS 资源压缩 合理使用选择器 减少使用昂贵的属性 不要使用@import 内联首屏关键CSS 在打开一个页面,页面首要内容出现在屏幕的时间影响着用户的体验

11511

link和@import引入css 区别,建议使用@import

import url('b.css'); LINK @import 这个LINK @import的例子使用LINK加载a.css使用@import导入b.css: // 会导致样式表文件逐个加载...使用LINK导入a.css 和一个新的样式文件proxy.css。...="stylesheet" type="text/css"> //proxy.css的代码: @import url('b.css'); 多个@imports IE中使用@import会引起资源被按照一个不同于预期的顺序下载...="text/javascript"> LINK LINK 使用LINK来引入样式更简单和安全,使用LINK 可确保样式在所有浏览器里面都能被并行下载,同样能保证资源按照开发人员制定的顺序下载...阅读了前辈的文章,我觉得说的是正确的,我也就懒得写demo了,总结一下就是: 参考文献: 高性能网站设计:不要使用@import 、由link和@import的区别引发的CSS渲染杂谈 CSS 中的权重

2.8K10

Grid layout + 媒体查询轻易实现常用的响应式布局

先问大家一个问题,如果让css只保留一种布局,留下来解决前端布局问题?你会选择那个布局呢?...block段落、容器、导航栏垂直布局、容器尺寸控制水平布局复杂性、内联元素布局易于理解和使用、强大的高控制布局较为僵硬、不适合复杂布局inline文本、图像水平布局、内联元素间的排列垂直边距生效、大小控制与文本流自然融合无法设置高...网格布局的基本使用创建一个简单的网格容器:.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:...使用行和列来布局项目:.item { grid-column: 1 / 3; grid-row: 1;}.item 将占据从第一列到第三列之前的空间(即两列),并位于第一行。...量,毕竟这种方式写出的响应式布局代码,整体唯一性来看,会比较好。

43331

最强大的 CSS 布局 —— Grid 布局

Grid 布局即网格布局,是一种新的 CSS 布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。...比如上面 .wrapper 所在的元素为一个网格容器,其直系子元素将成为网格项目。...grid-template-columns: repeat(auto-fill, 200px) 表示列是 200 px,但列的数量是固定的,只要浏览器能够容纳得下,就可以放置元素,代码以及效果如下图所示...image 参考 常见的 Grid 布局用例[19] CSS Grid 网格布局教程[20] Grid 布局草案[21] 一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局[22]...://drafts.csswg.org/css-grid/#intro [22] 一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局: https://www.html.cn/archives

2.3K20

How to make your HTML responsive by adding a single line of CSS

-2a62de81e431 原文作者: Per Harald Borgen 翻译作者: hanxiansen 在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量...设置 在本文中,我将继续使用我在第一篇 CSS Grid 布局教程文章中的网格布局。然后,我们将在文章末尾添加图片。下面是我们初始化网格的外观: ?...高级响应 然而,上面列子并没有给出我们想要的响应性,因为网格总是三列。我们希望网格能根据容器的宽度改变列的数量。...现在,栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的 100px 的列。但如果我们将所有列硬写为 100px,我们将永远没法获得所需的弹性,因为它们很难填充整个宽度。...我们在每个网格中添加一个图片标签: 为了使图片适应于每个条目,我们将其、高设置为与条目本身一样,我们使用object-fit

1.4K10

栈之前端 | 6.CSS3基础知识之网页几种布局方法学习(2)

复习:CSS 页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置,本章将主要针对正常布局流, FlexBox(弹性盒子), Grid(网格), Column...(多列布局), 以及最后再了解一下CSS 表格布局(它是传统的布局方式,在当前开发中建议使用,我们简单了解即可)等技术进行讲解。...# Grid 布局 grid-template-columns 属性: 定义网格列的数量及宽度大小,建议使用 fr 单位来设置灵活网格,此单位代表网格容器中可用空间的一份(`1fr 1fr 1fr`.../* 格式 */ column-count: 3; column-count: auto; column-width - 列设置 描述: 此属性设置多列布局中的理想列容器将创建尽可能多的列,其中任何列的宽度都不小于列值...,如果容器的宽度小于指定值,则单列的宽度将小于声明的列

21920

CSS之垂直水平居中的背后

一、Grid   网格布局,它可以将页面划分成一个个可以任意组合的网格,以前这样的处理只能通过复杂的css框架达到预期的效果。现在,浏览器内置了这样的能力。...采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item)。你看,Grid也有类似于Flex的定义。...基于此,其中一部分css属性是针对容器的,比如flex-direction、justify-content、align-items等。...三、line-height + text-align + vertical-align   嗯,建议大家使用这种方式对布局实现垂直水平居中,你可以针对文字使用,因为这几个属性的本身设计就是如此,不要为赋新词强说愁...总之建议在布局中使用

1.6K10

栈之前端 | 6.CSS3基础知识之网页几种布局方法学习(1)

CSS 页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置,本章将主要针对正常布局流, FlexBox(弹性盒子), Grid(网格), Column...(多列布局), 以及最后再了解一下CSS 表格布局(它是传统的布局方式,在当前开发中建议使用,我们简单了解即可)等技术进行讲解。...# Grid 布局 grid-template-columns 属性: 定义网格列的数量及宽度大小,建议使用 fr 单位来设置灵活网格,此单位代表网格容器中可用空间的一份(`1fr 1fr 1fr`...属性: 定义网格列的数量及宽度大小,建议使用 fr 单位来设置灵活网格,此单位代表网格容器中可用空间的一份(1fr 1fr 1fr = repeat(3, 1fr);=>表明了后续列的配置要重复多少次..."a c c"; /* 两行 三列 */ /* 使用 . 来占位元素位置。 */ 亲,文章就要看完了,不关注一下【栈工程师修炼指南】吗?

27320

CSS】定位 ⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 )

一、需求分析及核心开发要点 ---- 要实现如下功能 , 下图 粉色 部分是 整体 父容器 , 紫色元素 是 中心的核心位置 , 蓝色是左上角的浮标 , 红色是右下角的浮标 ; 首先分析父容器元素...; 由于 子元素 需要使用 绝对定位 , 此处的 父容器 必须设置 相对定位 ; 上图中 , 父容器存在 1 像素的边框 , 父容器 中设置一个内边距 ; 设置子元素浮动后 , 浮动的元素 可以覆盖到...*/ margin: 100px auto; /* 子元素与 */ padding: 10px; background-color: pink; } 中心元素只需要设置高...200px; background-color: purple; } 左上角的子容器 , 需要覆盖 内边距范围 , 此处不能使用浮动 , 浮动可以在标准流上方浮动显示 , 但是不能覆盖到...内边距范围 ; 也不能使用 相对定位 , 相对定位会保留元素原始位置 , 其它标准流元素无法使用该位置 ; 因此此处只能使用绝对定位 , 在设置了相对定位的父元素容器中 , 可以使用绝对定位在父容器的任意位置显示任何元素

1.1K10

CSS实现垂直居中布局

height: 100%; } 垂直居中大致分为两类,父元素定高与父元素不定高,将两类样式以及子容器设定好 .set-parent,.dy-parent{ width...父元素定高 position+margin 使用margin: auto使水平居中,将子容器设定为relative以在不脱离文档流的情况下偏移50%,由于本身子容器占用一定高,会将其撑下,使用margin...若是子容器使用absolute定位,则父容器应设置为relative,否则会其相对于static定位以外的第一个父元素进行定位,在本Demo中会以浏览器为基准定位;此外absolute无法使用margin...父元素定高 position+transform 原理与position+margin相同,CSS3的transform使得div向上平移自身高度的50%。 <!...父元素不定高 grid Grid布局将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局 Grid布局与Flex布局有一定的相似性,都可以指定容器内部多个项目的位置。

1.8K30

简明 CSS Grid 布局教程

一、定义一个网格 我们可以将 display 属性设为 grid 来定义一个网格。与弹性盒子一样,将父容器改为网格布局后,他的直接子项会变为网格项。...,而容器的宽度是可变的,也就没办法确定 repeat 的次数了,这时可以使用 repeat 函数中的关键字auto-fill来实现这个效果。...假设现在我们定义一个 1 行x 2 列的高都为 100px 的网格容器,并在其中放置了 a 和 b 两个网格项: 如果我们把网格项 a 和 b 放置到已定义的网格之外的话: .a { grid-column...start end center 4.3 justify-content 如果网格容器的尺寸比整个网格内容的大,这时候就可以使用 justify-content 或 align-content 来调整网格内容的对齐了.../zh-CN/docs/Web/CSS/grid-auto-flow https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com

2.5K20

前端|Grid实现自适应九宫格布局

1 前言 现在无论是做app还是做网站,宫格的布局也是必然存在的,那么如何使用css实现自适应的九宫格布局呢?下面简单来介绍一下css里面的grid实现九宫格布局。...2 相关属性和函数 2.1 fraction单位 CSS 栅格布局带来了一个全新的值:fraction单位,fraction单位通常简写为fr,它允许你根据需要将容器拆分为多个块。...让我们使用repeat()函数来更改网格: grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr); 在上面代码中...它会尝试在容器中容纳尽可能多的 100px 的列。但如果我们将所有列硬写为 100px,我们将永远没法获得所需的弹性,因为它们很难填充整个宽度。 为了解决上述问题,我们需要minmax()。...2.3 gap属性 创建宫格布局时,每一个网格之间肯定会有间隙,可以使用grid-gap来控制其大小,代码如下: grid-row-gap:2%; //控制行间隙 grid-column-gap

3.1K30

css学习笔记,持续记录。

Grid网格布局 网格属性的大小和宽度都是相对于网格容器元素本身。 grid-template-columns: 20% 20%;  //定义网格的列数和网格宽度。...: center;   //当网格的长小于整个容器时,整个网格在它的父容器内的上下对齐方式  (口内一个田) justify-content: center;  //当网格小于整个容器时,整个网格在它的父容器内的左右对齐方式...使用网格的元素可用的网格属性:grid-area:a; (所处的网格)、align-self、justify-self(代替网格的相关属性)。...在两个容器内元素的html代码之间加注释符号  ; 5. 容器高相等 当容器的内边距设置100%且高度为0时,元素高度取的是容器的宽度单位。...最小高,防止图片加载导致抖动 场景:加载前图片所在容器为10px,图片为50px,图片加载后撑开盒子,导致二次布局变化(抖动) 给图片的上层容器加个最小高,防止页面加载图片前后导致长宽变化,页面发生抖动

2.6K60
领券