本文概述了HTML5中的新语义化标签（如header、footer、main等）的使用，以及Flex弹性盒模型、Grid网格布局的原理与实例，展示了如何通过CSS控制元素的布局和样式。还介绍了audio/video标签、CSS3的文本注解与方向、以及元标签和link标签的扩展应用。
第五周笔记（自62开始HTML5）
51.strong和b、em和i（K112）
- strong和em都是表示强调的标签，表现形态为文本加粗和斜体。
- b和i标签同样也表示文本加粗和斜体
形如：
<body> <strong>艾雅法拉</strong> <b>伊芙利特</b> <em>澄净闪耀</em> <i>宝贝铃兰</i> </body>- 区别：strong和em是具备语义化的，而b和i是不具备语义化的（b和i只表现形式，无义）
b和i的应用场景：简化选择器操作，在内联中使用
52.引用标签（K113）
- blockquote：引用大段的段落解释
- q： 引用小段落的短语解释
- abbr： 缩写或首字母缩略词
- address： 引用文档地址信息
- cite： 引用著作的标题
示例：
分别对应：1.《出师表》 2.WWF 3.WHO 4.网地邮 5.资治通鉴
详例：
<p> <abbr title="Arknights">罗德岛</abbr>成立于十世纪巴别塔。 </p>53.iframe嵌套标签（K114）
1.iframe元素会创建包含另外一个文档的内联框架（即行内框架）
2.常见属性：
3.作用：可以引入其他的html到当前的html中显示、主要是利用iframe属性进行样式调节
4.例用：step1 简单写
<body> <iframe src="https://www.taobao.com" frameborder="0"></iframe> </body>step2 尝试属性
<iframe srcdoc="<h1>hello world</h1>" src="https://www.taobao.com" frameborder="0" scrolling="no" width="400" height="400"></iframe>注：1.前方src等级更高 2.src内可使用标签 3.各属性对应变化 4.可设置宽高
step3 样式使用
<style> iframe{ width: 100%;} </style> </head> <body> <iframe src="https://www.taobao.com" frameborder="0" scrolling="no"></iframe> </body>注：可拓展钓鱼网站
5.应用场景：数据传输、共享代码、局部刷新、第三方介入等…54.br与wbr（K115）
- br标签表示换行操作，而wbr标签表示软换行操作
注：若单词过长，或担心浏览器在错误位置换行，可使用wbr元素添加Word Break Opportunity（单词换行时机）
原：
br：
<p> wdhahdashd ahsdoiahsd ioahiod ha dsadh <br> sh dsh udhushuhudhuhs uh ashj dioasjhiod jaso </p>wbr：
<p> wdhahdashd ahsdoiahsd ioahiod ha dsadh shd haishd ashd iashidhasihdiashdias dsh udhushuhudh<wbr>usuasgdugha<wbr>sudhuhdhhs uh ashj dioasjhiod jaso </p>55.pre与code（K116）
a.pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。
b.只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是把文字变成等宽字体，但它暗示着这段文字是源程序代码。
c.针对网页中程序代码的显示效果
例：step1 常规替换<；>；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <pre> <code> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> hello world </body> </html> </code> </pre> </body> </html>step2 运用程序代码转译（Markdown语法+md尾缀软件）
56.map与area（K117）
a.定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。
b.area元素的href属性定义区域的URL，shape属性来定义区域的形状，coords属性定义热区的坐标。
c.给特殊图形添加链接，area能添加的热区的形状：矩形（rect）、圆形（circ）、多边形（poly）
例：
<img src="D:\XY\音律1.png" alt="" usemap="#star"> <map name="star"> <area shape="rect" coords="557 280 636 367" href="https://ak.hypergryph.com/" alt=""> </map>57.embed与object（K118）
a.embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太大区别，主要是为了兼容不同的浏览器
b.object元素需要配合param元素一起完成1.<embed src="地址" type=""> 2. <object data="" type=""> <param name="" value="地址"> </object>58.audio与video（K119）
a.audio标签表示嵌入音频文件，video标签表示嵌入视频文件。默认控件是不显示的，可通过controls属性来显示控件
b.为了能够支持多个设备的兼容支持，可以配合source标签
c.引入音频与视频的标签，属于H5功能
1.一般使用：<audio src="地址.mp3" controls loop autplay></audio><!--controls显示 loop循环 autplay自动播放--> <video src="地址.mp4" controls></video>2.source：备选，无一则二，逐下至成
<video> <source src="地址.ogv"> <source src="地址.mp4"> </video>59.文字注解与文字方向（K120）
a.ruby标签定义ruby注释（中文注音或字符），rt标签定义字符（中文注音或字符）的解释或发音
<ruby> 寒<rt>hán</rt> </ruby>b.bdo标签可覆盖默认的文本方向（ltr正向 rtl逆向）
<p> <bdo dir="rtl">铃兰小姐</bdo>永远的光 </p>css样式使用：
<style> span{ direction: rtl; unicode-bidi:bidi-override;} </style> </head> <body> <bdo dir=""></bdo> <p> <bdo dir="rtl">铃兰小姐</bdo>永远的光 </p> <p> <span>铃兰小姐</span>永远的光 </p>60.扩展link标签（K121）
- < link rel="stylesheet" type="text/css" href="theme.css">
- < link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
icon：地址栏中引入一个小图标
例题：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">- < link rel="dns-prefetch" href="//static.360buyimg.com">
dns解析，更加快捷
61.扩展meta标签（K122）
a.meta添加一些辅助信息
1.name属性里对应一些功能
1）description：描述网页主要做什么（传输给计算机，利于搜索引擎优化 ）
形如<meta name="description" content="XXXXX">2）renderer：浏览器内核（设定主浏览器、备用浏览器）
2.http-equiv可设置一些功能<meta http-equiv="X-UA-Compatible" content="IE=edge">主要针对IE浏览器，让IE使用更高版本进行渲染
1）refresh：刷新<meta http-equiv="refresh" content="3" url="">表述：3秒后刷新，跳转某个界面（URL内容） 无URL可做刷新手法
2）expires：缓存<meta http-equiv="expires" content="Web, 20 Jun 2019 22:33:00 GMT">若该时间已过，则再去服务器获取最新资源
62.HTML5新语义化标签（div替代）（K123-K125 ）
1.主体
1）header：页眉
2）footer：页脚
3）main： 主体
4）hgroup：标题组合
5）nav： 导航
形如：<body> <header> <hgroup> <h1>主标题</h1> <h2>副标题</h2> </hgroup> <nav> <ul> <li>首页</li> <li>论坛</li> <li>关于</li> </ul> </nav> </header> <main></main> <footer></footer> </body>注：header、footer、main在一个网页中只能出现一次
2.main中的…
1）article：独立内容
…
2）aside： 辅助信息内容
3）section：区域
注：article与section的区别：article更多表示独立，section注重区域
4）figure： 描述图像或视频
5）figcaption：描述图像或视频的标题部分
形如：<main> <article> <section> <ul> <li> <figure> <img src="" alt=""> <figcaption> 纳尼(ÒωÓױ)！纳尼 <br> QAQ QAQ<!--小标题--> </figcaption> </figure> </li> </ul> </section> <section> <ul> <li> <figure> <img src="" alt=""> <figcaption> 纳尼(ÒωÓױ)！纳尼 <br> QAQ QAQ<!--小标题--> </figcaption> </figure> </li> </ul> </section> <section> <ul> <li> <figure> <img src="" alt=""> <figcaption> 纳尼(ÒωÓױ)！纳尼 <br> QAQ QAQ<!--小标题--> </figcaption> </figure> </li> </ul> </section> </article> <aside> </aside> </main>3.main中的… …
1）datalist：选项列表
<section> <input type="text" list="elems"> <datalist id="elems"> <option value="!"></option> <option value="?"></option> <option value="/"></option> <option value="+"></option> </datalist> </section>2）details/summary：文档细节/文档标题
<details> <summary>HTML</summary> <P>超文本标记语言</P> </details>3）progress/meter：定义进度条/定义度量范围（前进度，后完成度）
<section> <progress min="0" max="10" value="5"></progress> </section>
<section> <meter min="0" max="100" value="35"></meter> </section>注：meter设置low与high属性，value所处值域影响显示结果（在绿否红）
4）time：定义日期或时间
注：< p>中使用，无大意，设置title属性设定时间
5）mark：带有记号的文本
注：标记，变黄（经常用啊哈哈）63.（K184-K190 HTML+CSS系列教程③之风生水起）
1.Flex弹性盒模型
背景：随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。 2009年，W3C提出了一种新的方案——Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
2.属性：
step1 原样
3.实例
<style> #parent{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto;} #box{ width: 100px; height: 100px; background: red; margin: auto;} </style> </head> <body> <div id="parent"> <div id="box"></div> </div> </body>step2 添加flex
#parent{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;}4.父元素属性详细（K184-K186）
1）flex-direction
用来控制子项整体布局方向，是从左往右还是右往左，上往下还是下往上
原
#box{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;} #box div{ width: 50px; height: 50px; color: white; line-height: 50px; text-align: center; background: red;} </style> </head> <body> <div id="box"> <div>1</div> <div>2</div> <div>3</div> </div>row-reverse
#box{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;flex-direction: row-reverse;}column
#box{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;flex-direction: column;}column-reverse
#box{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;flex-direction: column-reverse;}2）flex-wrap
用来控制子项整体单行显示好事换行显示
某例：实践得块不满容器，文本在容器内堆叠，块超容器，块堆叠，文本超出容器范围
#box div{ width: 50px; height: 50px; color: white; line-height: 50px; text-align: center; background: red;} #box2{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;} #box2 div{ width: 50px; height: 50px; color: white; line-height: 50px; text-align: center; background: red;} </style> </head> <body> <div id="box2"> <div>1222222222</div> <div>2222222222</div> <div>3222222222</div> <div>1222222222</div> <div>2222222222</div> <div>3222222222</div> <div>2222222222</div> <div>3222222222</div> </div>wrap换行
#box2{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;flex-wrap: wrap;}3）flex-flow
flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局和flow流动特性。 第一个值表示方向，第二个值表示换行，中间用空格隔开
#box2{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;flex-flow: column wrap;}4）justify-content
justify-content属性决定了主轴方向上子项的对齐方式和分布方式
（主轴：之前设定的方向）
step 原初
#box3{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;} #box3 div{ width: 50px; height: 50px; color: white; line-height: 50px; text-align: center; background: red;} </style> </head> <body> <div id="box3"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>step flex-end（start为行首开始，end为行尾开始）
#box3{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;justify-content: flex-end;}step center居中
#box3{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;justify-content: center;}step space-between（空间最大化分隔）
#box3{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;justify-content: space-between;}step space-around环绕
#box3{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;justify-content: space-around;}step space-evenly均匀分隔
#box3{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;justify-content: space-evenly;}5）align-items 一行中子项
align-items中的items指的就是flex子项们。因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式
step 原初
#box4{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;} #box4 div{ width: 50px; height: 50px;background: red;} </style> </head> <body> <div id="box4"> <div>塞雷娅</div> <div>塞雷娅大猫猫</div> <div>塞雷娅大猫猫水泡温蒂</div> <div>塞雷娅</div> </div>step 去高（结论：不适应文本）
#box4 div{ width: 50px; background: red;}step 均匀分隔
#box4{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;justify-content: space-evenly;}step align-items：flex-start
#box4{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;justify-content: space-evenly; align-items: flex-start;}step align-items：center
#box4{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;justify-content: space-evenly; align-items: center;}6）align-content 多行排列方式
align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的
5.作用在flex子项上的CSS属性（K187-K190）
step 原初
<style> #box{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;} #box div{ width: 50px; height: 50px; color: white; line-height: 50px; text-align: center; background: red;} </style> </head> <body> <div id="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body>1）order（默认值0）
#box div{ width: 50px; height: 50px; color: white; line-height: 50px; text-align: center; background: red;} #box div:/*注意此处无空格*/nth-child(2)/*子项选定*/{ order:1;}#box div{ width: 50px; height: 50px; color: white; line-height: 50px; text-align: center; background: red;} #box div:/*注意此处无空格*/nth-child(2)/*子项选定*/{ order:1;} #box div:nth-child(3){ order: -1;}2）flex-grow（默认值0）
#box div:nth-child(2){ background: yellow; color: black; flex-grow: 1;}#box div:nth-child(2){ background: yellow; color: black; flex-grow: 0.5;}3）flex-shrink（默认值1）
step 原初
#box2{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;} #box2 div{ width: 50px; height: 50px; color: white; line-height: 50px; text-align: center; background: red;} </style> </head> <body> <div id="box2"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>1</div> <div>2</div> <div>3</div> </div>step 改造颜色
#box2 div{ width: 50px; height: 50px; color: white; line-height: 50px; text-align: center; background: red;} #box2 div:nth-child(2){ background: yellow; color: black;}step flex-shrink：0
#box2 div:nth-child(2){ background: yellow; color: black; flex-shrink: 0;}4）注：flex-basis优先级高于width
5）flex：为grow、shrink、basis统合缩写（flex优先级高于flex-grow）
#box2 div:nth-child(2){ background: yellow; color: black; flex:0 1 auto}6）align-self
#box2 div:nth-child(2){ background: yellow; color: black; /* flex:0 1 auto*/} </style> </head> <body> <div id="box2"> <div>1</div> <div>艾雅法拉</div>#box2 div:nth-child(2){ background: yellow; color: black; /* flex:0 1 auto*/} #box2 div:nth-child(1){ align-self: center;} </style> </head> <body> <div id="box2"> <div>1</div> <div>艾雅法拉</div>#box2 div:nth-child(2){ background: yellow; color: black; /* flex:0 1 auto*/} #box2 div:nth-child(1){ align-self: flex-end;} </style> </head> <body> <div id="box2"> <div>1</div> <div>艾雅法拉</div>step 全居中（去高）
#box2{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;} #box2 div{ width: 50px; color: white; line-height: 50px; text-align: center; background: red;} #box2 div:nth-child(2){ background: yellow; color: black; align-self: center;/* flex:0 1 auto*/} #box2 div:nth-child(1){ align-self: flex-end;}#box2{ width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex; align-items: center;} #box2 div{ width: 50px; color: white; line-height: 50px; text-align: center; background: red;} #box2 div:nth-child(2){ background: yellow; color: black; align-self: center;/* flex:0 1 auto*/} #box2 div:nth-child(1){ align-self: center;}6.Flex案例
1）骰子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1{ width: 100px; height: 100px; border: 1px black solid; border-radius: 5px; display: flex; justify-content: center; align-items: center;} #box1 div{ width: 30%; height: 30%; background: black;border-radius: 50%;} #box2{ width: 100px; height: 100px; border: 1px black solid; border-radius: 5px; display: flex; justify-content: space-between;} #box2 div{ width: 30%; height: 30%; background: black;border-radius: 50%;} #box2 div:last-child{ align-self: flex-end;} #box3{ width: 100px; height: 100px; border: 1px black solid; border-radius: 5px; display: flex; justify-content: space-between; align-items: center;} #box3 div{ width: 30%; height: 30%; background: black;border-radius: 50%;} #box3 div:first-child{ align-self: flex-start;} #box3 div:last-child{ align-self: flex-end;} #box4{ width: 100px; height: 100px; border: 1px black solid; border-radius: 5px; display: flex; flex-wrap: wrap;} #box4 div{ width: 100%; display: flex; justify-content: space-between;} #box4 div:last-child{ align-items: flex-end;} #box4 i{ display: block; width: 30%; height: 60%; background: black;border-radius: 50%;} #box5{ width: 100px; height: 100px; border: 1px black solid; border-radius: 5px; display: flex; flex-wrap: wrap;} #box5 div{ width: 100%; display: flex; justify-content: center; align-items: center;} #box5 div:first-child{ align-items: flex-start; justify-content: space-between;} #box5 div:last-child{ align-items: flex-end; justify-content: space-between;} #box5 i{ display: block; width: 30%; height: 90%; background: black;border-radius: 50%;} #box6{ width: 100px; height: 100px; border: 1px black solid; border-radius: 5px; display: flex; flex-wrap: wrap;} #box6 div{ width: 100%; display: flex; justify-content: center;justify-content: space-between;} #box6 div:first-child{ align-items: flex-start;} #box6 div:last-child{ align-items: flex-end;} #box6 i{ display: block; width: 30%; height: 90%; background: black;border-radius: 50%;} </style> </head> <body> <div id="box1"> <div></div> </div> <div id="box2"> <div></div> <div></div> </div> <div id="box3"> <div></div> <div></div> <div></div> </div> <div id="box4"> <div> <i></i> <i></i> </div> <div> <i></i> <i></i> </div> </div> <div id="box5"> <div> <i></i> <i></i> </div> <div> <i></i> </div> <div> <i></i> <i></i> </div> </div> <div id="box6"> <div> <i></i> <i></i> </div> <div> <i></i> <i></i> </div> <div> <i></i> <i></i> </div> </div> </body> </html>2）自适应
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0;} #main{ display: flex;} #left{ width: 200px; height: 200px; background: red;} #center{ flex: 1; height: 300px; background: yellow;} #right{ width: 150px; height: 200px; background: blue;} </style> </head> <body> <div id="main"> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> </body> </html>64.Grid网格布局（K191-K193）
Grid布局是一个二维的布局方法，纵横两个方向总是同时存在
1.grid-template-columns和grid-template-rows
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）
有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat（）语法进行简化操作
1）初设置
<style> .box{ width: 500px; height: 500px; border: 1px gray dotted; display: grid; grid-template-rows: 100px auto 25%; grid-template-columns: 100px 100px 200px 100px; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> </div> </body>2）fr（剩余空间比例适应）
<style> .box{ width: 300px; height: 300px; border: 1px gray dotted; display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;} </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>3）repeat缩写
.box{ width: 300px; height: 300px; border: 1px gray dotted; display: grid; grid-template-rows: repeat(3,1fr); grid-template-columns: repeat(3,1fr);}2.grid-template-areas和grid-template
area：区域，grid-template-areas即划分网格区域的，此时grid子项只要使用grid-area属性指定其隶属那个区
grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写
1）原初
.box2{ width: 300px; height: 300px; border: 1px gray dotted; display: grid; grid-template-rows: repeat(3,1fr); grid-template-columns: repeat(3,1fr);} .box2 div{ background: red; border: 1px black solid} </style> </head> <body> <div class="box2"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>2）grid-template-area（注意ax的排布，写法是否准确）
grid-template-columns: repeat(3,1fr);}*/ .box2{ width: 300px; height: 300px; border: 1px gray dotted; display: grid; grid-template-rows: repeat(3,1fr); grid-template-columns: repeat(3,1fr); grid-template-areas: "a1 a1 a1" "a2 a2 a3" "a2 a2 a3";} .box2 div{ background: red; border: 1px black solid} .box2 div:nth-child(1){ grid-area: a1;} .box2 div:nth-child(2){ grid-area: a2;} .box2 div:nth-child(3){ grid-area: a3;} </style> </head> <body> <div class="box2"> <div>1</div> <div>2</div> <div>3</div> </div>3）复合写法
.box2{ width: 300px; height: 300px; border: 1px gray dotted; display: grid; /*grid-template-rows: repeat(3,1fr); grid-template-columns: repeat(3,1fr); grid-template: "a1 a1 a1" 1fr "a2 a2 a3" 1fr "a2 a2 a3"; /1fr 1fr 1fr;}3.grid-column-gap和grid-row-gap
grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸
CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写
1） grid-column-gap列间隙
.box2{ width: 300px; height: 300px; border: 1px gray dotted; display: grid; grid-template: "a1 a1 a1" 1fr "a2 a2 a3" 1fr "a2 a2 a3"; /1fr 1fr 1fr; grid-column-gap:10px;}2） grid-row-gap行间隙
.box2{ width: 300px; height: 300px; border: 1px gray dotted; display: grid; grid-template: "a1 a1 a1" 1fr "a2 a2 a3" 1fr "a2 a2 a3"; /1fr 1fr 1fr; grid-column-gap:10px; grid-row-gap:20px;}3）复合写法
.box2{ width: 300px; height: 300px; border: 1px gray dotted; display: grid; grid-template: "a1 a1 a1" 1fr "a2 a2 a3" 1fr "a2 a2 a3"; /1fr 1fr 1fr; grid-gap:20px;}4.justify-items和align-items
justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐
place-items可以让align-items和justify-items属性写在单个声明中
1）justify-items：start/end/center（列）
.box3{width: 300px; height: 300px; border: 1px gray dotted; display: grid; grid-template-rows: repeat(3,1fr); grid-template-columns: repeat(3,1fr); justify-items: start;}2）align-items：start/end/center
.box3{width: 300px; height: 300px; border: 1px gray dotted; display: grid; grid-template-rows: repeat(3,1fr); grid-template-columns: repeat(3,1fr); justify-items: start; align-items: end;}3）place-items
.box3{width: 300px; height: 300px; border: 1px gray dotted; display: grid; grid-template-rows: repeat(3,1fr); grid-template-columns: repeat(3,1fr); place-items: start start;}5.justify-content和align-content
justify-content指定了网格元素的水平分布方式，align-content指定了网格元素的水平分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中
1）原初
.box3{width: 500px; height: 500px; border: 1px gray dotted; display: grid; grid-template-rows: repeat(3,100px); grid-template-columns: repeat(3,100px);} /*place-items: start start;}*/ .box3 div{ background: red; border: 1px black solid}2）列变
.box3{width: 500px; height: 500px; border: 1px gray dotted; display: grid; grid-template-rows: repeat(3,auto); grid-template-columns: repeat(3,auto); justify-content: start;}3）弹性变换
.box3{width: 500px; height: 500px; border: 1px gray dotted; display: grid; grid-template-rows: repeat(3,auto); grid-template-columns: repeat(3,auto); justify-content: space-evenly;}注：content：所有网格，items：每一个网格内元素对于网格
4）复写
.box3{width: 500px; height: 500px; border: 1px gray dotted; display: grid; grid-template-rows: repeat(3,auto); grid-template-columns: repeat(3,auto); place-content: space-between space-between;}65.作用在grid子项上的CSS属性（K194-K197）
1.grid-c/r-s/e
1）初试
<style> .box{ width: 300px; height: 300px; border: 1px gray dotted; display: grid; grid-template-rows: repeat(3,1fr); grid-template-columns: repeat(3,1fr);} .box div{ background: red; border: 1px black solid;} </style> </head> <body> <div class="box"> <div></div> </div>2）初调
.box div{ background: red; border: 1px black solid; grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3;}2）初调pro
.box div{ background: red; border: 1px black solid; grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4;}3）初调plus（span：结束位置。上为个数）
.box div{ background: red; border: 1px black solid; grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: span 2;}4）复写
.box div{ background: red; border: 1px black solid; /*grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: span 2;*/ grid-column: 2 / 3; grid-row: 2 / span 2;}2.grid-area
.box div{ background: red; border: 1px black solid; grid-area: 3 / 2 / 4 / 4;}/*横向起始，纵向起始，横向结束，纵向结束*/3.place-self
.box2{ width: 300px; height: 300px; border: 1px gray dotted; display: grid; grid-template-rows: repeat(3,1fr); grid-template-columns: repeat(3,1fr);} .box2 div{ background: red; border: 1px black solid;} .box2 div:nth-child(2){ place-self: end start;}4.Grid案例
1）骰子的点数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100px; height: 100px; border: 1px black solid; border-radius: 5px; display: grid; grid-template-columns: repeat(3 , 1fr); grid-template-rows: repeat(3 , 1fr); place-items: center center;} .box div{ width: 20px; height: 20px; background: black; border-radius: 50%;} .box div:nth-child(1){ grid-area: 2 / 2 / 3 / 3;} .box2{ width: 100px; height: 100px; border: 1px black solid; border-radius: 5px; display: grid; grid-template-columns: repeat(3 , 1fr); grid-template-rows: repeat(3 , 1fr); place-items: center center;} .box2 div{ width: 20px; height: 20px; background: black; border-radius: 50%;} .box2 div:nth-child(2){ grid-area: 3 / 3 / 4 / 4;} .box3{ width: 100px; height: 100px; border: 1px black solid; border-radius: 5px; display: grid; grid-template-columns: repeat(3 , 1fr); grid-template-rows: repeat(3 , 1fr); place-items: center center; grid-template-areas: "a1 a2 a3" "a4 a5 a6" "a7 a8 a9";} .box3 div{ width: 20px; height: 20px; background: black; border-radius: 50%;} .box3 div:nth-child(2){ grid-area: a5;} .box3 div:nth-child(3){ grid-area: a9;} .box4{ width: 100px; height: 100px; border: 1px black solid; border-radius: 5px; display: grid; grid-template-columns: repeat(3 , 1fr); grid-template-rows: repeat(3 , 1fr); place-items: center center; grid-template-areas: "a1 a2 a3" "a4 a5 a6" "a7 a8 a9";} .box4 div{ width: 20px; height: 20px; background: black; border-radius: 50%;} .box4 div:nth-child(2){ grid-area: a3;} .box4 div:nth-child(3){ grid-area: a7;} .box4 div:nth-child(4){ grid-area: a9;} .box5{ width: 100px; height: 100px; border: 1px black solid; border-radius: 5px; display: grid; grid-template-columns: repeat(3 , 1fr); grid-template-rows: repeat(3 , 1fr); place-items: center center; grid-template-areas: "a1 a2 a3" "a4 a5 a6" "a7 a8 a9";} .box5 div{ width: 20px; height: 20px; background: black; border-radius: 50%;} .box5 div:nth-child(2){ grid-area: a3;} .box5 div:nth-child(3){ grid-area: a7;} .box5 div:nth-child(4){ grid-area: a9;} .box5 div:nth-child(5){ grid-area: a5;} .box6{ width: 100px; height: 100px; border: 1px black solid; border-radius: 5px; display: grid; grid-template-columns: repeat(3 , 1fr); grid-template-rows: repeat(3 , 1fr); place-items: center center; grid-template-areas: "a1 a2 a3" "a4 a5 a6" "a7 a8 a9";} .box6 div{ width: 20px; height: 20px; background: black; border-radius: 50%;} .box6 div:nth-child(2){ grid-area: a3;} .box6 div:nth-child(3){ grid-area: a7;} .box6 div:nth-child(4){ grid-area: a9;} .box6 div:nth-child(5){ grid-area: a4;} .box6 div:nth-child(6){ grid-area: a6;} </style> </head> <body> <div class="box"> <div></div> </div> <div class="box2"> <div></div> <div></div> </div> <div class="box3"> <div></div> <div></div> <div></div> </div> <div class="box4"> <div></div> <div></div> <div></div> <div></div> </div> <div class="box5"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="box6"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>2）百度搜索风云榜（样板）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 280px; height: 352px; margin: 20px auto; display: grid; grid-template-columns: repeat(3 , 1fr); grid-template-rows: repeat(4 , 1fr); grid-template-areas: "a1 a2 a2" "a3 a2 a2" "a4 a4 a5" "a6 a7 a7"; grid-gap: 6px 6px;} .box div{ background: red;} .box div:nth-child(1){ grid-area: a1;} .box div:nth-child(2){ grid-area: a2;} .box div:nth-child(3){ grid-area: a3;} .box div:nth-child(4){ grid-area: a4;} .box div:nth-child(5){ grid-area: a5;} .box div:nth-child(6){ grid-area: a6;} .box div:nth-child(7){ grid-area: a7;} </style> </head> <body> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
扫一扫
1821
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
