#yyds干货盘点# 前端歌谣的刷题之路-第一百四十一题-flex-grid-区域
题目 Grid，即网格布局。它将页面划分为一个个网格，可以任意组合不同的形态，做出理想的布局效果。Grid布局与Flexbox布局的区别在于，Flexbox是根据轴线对弹性项进行排列，而Grid布局是将容器划分为行和列，产生单元格，然后再对单元格进行操作。 采用网格布局的区域称为容器。容器内部采用网格定位的每个子元素称为容器项，也是单元格。划分网格的线称为网格线，比如，3x3的网格有4条水平网格....
#yyds干货盘点# 前端歌谣的刷题之路-第一百三十九题-flex-order
题目使用Flexbox的order属性，可以完全摆脱项目在源码中顺序的约束。默认情况下，每个项目的order值都为0，意味着按照他们在源代码中的顺序进行排列。可以观看右边的代码效果，从设计上说，把图片放在最前面可以抓住读者的眼球，是比较好的设计方式，但是对于浏览器而言，拿到标题并且直接将标题呈现给读者的代价一定比获取一张照片并渲染出来小得多。所以可以考虑折中的方式，先渲染标题但是优先显示图片。 ....
#yyds干货盘点# 前端歌谣的刷题之路-第一百三十八题-flex标签
题目 Flexbox支持对弹性项的灵活控制。Flex的意思为可伸缩，这体现在以下三个属性中：1. flex-basis：基础值2. flex-grow：拉伸弹性系数，如果容器宽度减去弹性项的基础值之和之后还有剩余空间，那么就按照弹性系数比例去分配剩余空间3. flex-shrink：缩减弹性系数，和拉伸弹性系数逻辑相反 这三个属性应用给弹性项，而不是容器。 现在首先给所有的"li"添....
#yyds干货盘点# 前端歌谣的刷题之路-第一百三十七题-可伸缩属性
题目 Flexbox支持对弹性项的灵活控制。Flex的意思为可伸缩，这体现在以下三个属性中：1. flex-basis：基础值2. flex-grow：拉伸弹性系数，如果容器宽度减去弹性项的基础值之和之后还有剩余空间，那么就按照弹性系数比例去分配剩余空间3. flex-shrink：缩减弹性系数，和拉伸弹性系数逻辑相反 这三个属性应用给弹性项，而不是容器。 现在首先给所有的"li"添....
#yyds干货盘点# 前端歌谣的刷题之路-第一百三十六题-display-flex
题目 固定定位是由绝对定位衍生出来的，不同之处在于，固定定位元素的父级始终是视口。因此固定定位可以用来创建始终停留在窗口相同位置的元素。比如：固定侧栏、固定顶栏等。这样方便用户，不必再费事寻找栏目。 现在给"nav"盒子设置固定定位属性"position: fixed"、设置"top: 0"、设置自定义宽度、背景颜色。此时滑动滚轮，可以发现"nav"盒子始终固定在页面的最上方。但是，数字1却被覆....
#yyds干货盘点# 前端歌谣的刷题之路-第一百三十五题-定位-fixed-广告
题目 固定定位是由绝对定位衍生出来的，不同之处在于，固定定位元素的父级始终是视口。因此固定定位可以用来创建始终停留在窗口相同位置的元素。比如：固定侧栏、固定顶栏等。这样方便用户，不必再费事寻找栏目。 现在给"nav"盒子设置固定定位属性"position: fixed"、设置"top: 0"、设置自定义宽度、背景颜色。此时滑动滚轮，可以发现"nav"盒子始终固定在页面的最上方。但是，数字1却被覆....
#yyds干货盘点# 前端歌谣的刷题之路-第一百三十四题-定位-fixed
题目 固定定位是由绝对定位衍生出来的，不同之处在于，固定定位元素的父级始终是视口。因此固定定位可以用来创建始终停留在窗口相同位置的元素。比如：固定侧栏、固定顶栏等。这样方便用户，不必再费事寻找栏目。 现在给"nav"盒子设置固定定位属性"position: fixed"、设置"top: 0"、设置自定义宽度、背景颜色。此时滑动滚轮，可以发现"nav"盒子始终固定在页面的最上方。但是，数字1却被覆....
#yyds干货盘点# 前端歌谣的刷题之路-第一百三十三题-定位-relative
题目 相对定位的元素仍然会待在原来的地方，即不会从流中出来。此后可以通过"top"、"right"、"bottom"和"left"属性使元素相对于初始位置进行移动。现在给类名为"center"的盒子设置相对定位属性"position: relative"、设置"left: 50px"、设置"top: 50px"，再自定义背景颜色以便于观察。此时可以观察到中间盒子在原始的位置上向右、向下均移动了5....
#yyds干货盘点# 前端歌谣的刷题之路-第一百三十二题-定位-z-index
题目 z-index属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上面。z-index可以设置为负数，且该属性只能作用于定位元素。 现在给"img"图片标签添加"position: absolute"、"left: 0px"和"top: 0px"属性，此时会发现图片被定绝对定位在了页面的左上角，并且遮挡住了下方的内容。现在继续给图片标签添加"z-index: -1"....
#yyds干货盘点# 前端歌谣的刷题之路-第一百三十一题-absolute-评注
题目绝对定位会把元素拿出文档流，不会再占据原来的空间。绝对定位元素的父级是距离该元素最近的定位祖先，也就是"position"属性不为"static"的最近任意祖先。如果没有这个定位祖先，那么绝对定位元素就相对于文档的根元素"html"进行定位。 当前类名为"outer"、"middle"、"inner"的盒子（外、中、里盒子）嵌套在一起，现在给三个盒子均设置左内边距10px，再自定义盒子背景颜....
本页面内关键词为智能算法引擎基于机器学习所生成，如有任何问题，可在页面下方点击"联系我们"与我们沟通。
阿里巴巴终端技术
阿里巴巴终端技术最新内容汇聚在此，由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界，将面向未来，制定技术策略和目标并落地执行，推动终端技术发展，帮助工程师成长，打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号：阿里巴巴终端技术，欢迎关注。
+关注