一、基本用法 grid-area是CSS3中的一种属性,可以在CSS样式表中为元素指定一个或多个网格区域。它可以被应用于任何元素,包括块级元素和内联元素。以下是一个基本的grid-area用法示例: ```css div{ /*将div元素放置在网格区域的左上角*/ grid-area:div; } ``` 在上面的示例中,div元素被放置在网格区域的左...
意思为将1号项目位于e区域 grid-area属性一般与上述讲到的grid-template-areas搭配使用。 3.10 justify-self 属性、align-self 属性以及 place-self 属性 justify-self属性设置单元格内容的水平位置(左中右),跟justify-items属性的用法完全一致,但只作用于单个项目。 align-self属性设置单元格内容的垂直位置(上中下),...
Cell: 网格单元，两个相邻的行和列之间的区域，也就像是小字本里的每个小格子了。Area: 网格区域，四条网格线包围起来的区域。好了，基本概念了解的差不多了，我们去往下一站。基本用法 第二站到了，我们要继续吹牛了。本站要介绍的 api：grid-template-columns 和 grid-template-rowsgrid-gap -> grid-row-...
<style>.GFG1{grid-area:heading; }.GFG2{grid-area:margin; }.GFG3{grid-area:subtitle1; }.GFG4{grid-area:info; }.main{display:grid;grid-gap:30px;background-color:green;padding:20px;grid-template-areas:'margin heading heading heading heading heading ''margin subtitle1 info info info info'...
用法: <grid-area-name>:在grid-area中指定的网格区域名字 .:一个句点表示一个空的网格单元 none:没有网格区域被定义 实例: css: html: 最终效果 2.3 grid-column-gap/grid-row-gap/grid-gap 指定网格线的大小,也可以说是网格子项之间的间距。词法: <line-size>:长度值 grid-gap是grid-column-gap和grid...
对于某个横跨多个格子的元素,重复写上那个元素grid-area属性定义的区域名字 所有名字只能出现在一个连续的区域,不能在不同的位置出现 一个连续的区域必须是一个矩形 使用.符号,让一个格子留空 9.浮动 float属性最初只用于在成块的文本内浮动图像 浮动内容仍然遵循盒子模型诸如外边距和边界 ...
23 多行输入的textarea标签 05:00 24 下拉列表的标签们 select option 06:38 25 其他表单元素 form button fieldset legend 08:18 26 表单标签总结练习 13:06 27 稍稍了解一下表格的标签们 05:49 28 了解页面的焦点 04:52 29 标签们的复习与总结 13:05 30 练习页面结构拆解 10:45 31 最后...
grid-area: 1 / 1 / 3 / 3; } 1. 2. 3. 4. 4.4属性 justify-self 属性, align-self 属性, place-self 属性 justify-self属性设置单元格内容的水平位置(左中右),跟justify-items属性的用法完全一致,但只作用于单个项目。 align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全...
1.grid container 2.grid lrem 3.grid line 4.grid track 5.grid cell 6.grid area 三,日常用法 1.容器: 设置grid布局 display:grid: 画虚拟格子 grid:30px auto 30px /10% 10px 1fr 10px 10% 2.子项: 放置自己的位置:grid-area:3/3/4/5; ...