CSS和HTML笔记11.18

strong和b、em和i

strong和em都是表示强调的标签，表现形态为文本加粗和斜体。b和i标签同样也表示文本加粗和斜体。
区别在于，strong和em是具备语义化的，而b和i是不具备语义化的。

<!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><strong>文字</strong><b>文字</b><em>文字</em><i>文字</i>
</body>
</html>

引用标签

blockquote：引用大段的段落解释
q：引用小段的短语解释
abbr：缩写或首字母缩略词
address：引用文档地址信息
cite：引用著作的标题

<!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><p><abbr title="World Health Organization">WHO</abbr>成立于1948</p>
</body>
</html>

iframe嵌套页面

iframe元素会创建包含另外一个文档的内联框架（即行内框架）。

<!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></style>
</head>
<body><iframe  src="https://www.taobao.com" srcdoc="<h1>hello</h1>" frameborder="0" scrolling="no" width="400" height="400"></iframe>\
<!--srcdoc和src同时存在时只会srcdoc-->
</body>
</html>

br与wbr

br标签表示换行操作，而wbr标签表示软换行操作
提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用  wbr  元素来添加 Word Break Opportunity（单词换行时机）
软换行可以把单词拆开，一般自动换行单词是整个换行，会浪费空间。

pre 与 code？

  pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 code 标签。虽然 code 标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。

map 与 area？

    定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。area 元素的href属性定义区域的URL，shape属性来定义区域的形状，coords属性定义热区的坐标。给特殊图形添加链接，area能添加的热区的形状：矩形，圆形，多边形。

<!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></style>
</head>
<body><img src="#" alt="" usemap="#star"><map name="star"><!--<area shape="rect" coords="205 83 386 173" href="https://www.taobao.com" alt="">rect矩形只要确定左上角和右下角坐标即可确定，点击这一区域，跳转到淘宝网页<area shape="circle" coords="300 130 50" href="" alt="">300 130 50 圆心 和半径--><area shape="poly" coords="205 83 386 173" href="https://www.taobao.com" alt=""><!--多边形需要找每个顶点坐标--></map>
</body>
</html>

embed 与 object？

embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器而已。    object 元素需要配合param 元素一起完成。

<!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></style>
</head>
<body><!--<embed src="./img/flash.swf" type="">--><object><param name="movie" value="./img/flash.swf"></object>
</body>
</html>

audio 与 video？

  audio标签表示嵌入音频文件，video标签表示嵌入视频文件。默认控件是不显示的，可通过controls属性来显示控件。     为了能够支持多个备选文件的兼容支持，可以配合source标签

<body><audio src="引入地址.mp3" controls loop autoplay></audio>显示控件 循环  刷新自动播放<video src="引入地址.mp4" controls></video>显示控件.ogg 音频.ogv 视频<video src=""><source src="引入地址.ogv"><source src="引入地址.mp4">果然第一句识别后浏览器无法播放.ogv那么就会执行下一条，以此类推</video>
</body>

9.文字注解与文本方向

ruby 标签定义 ruby 注释（中文注音或者字符），rt 标签定义字符（中文注音或字符）的解释或发音

ruby、rt 标签

<body><ruby>我的名字<rt>wǒ dě míng zì</rt>：regou</ruby>
</body>
1
2
3

 bdo 标签bdo 标签可以覆盖默认的文本方向

<body><p>我在CSDN里写了博客</p><p><bdo dir="rtl">我在CSDN里写了博客</bdo></p>
</body>

也可以在 css 中实现

<head><style>#b{ direction: rtl;unicode-bidi: bidi-override;}</style>
</head>
<body><ruby>我的名字<rt>wǒ dě míng zì</rt>：O_oregou</ruby><p>我在CSDN里写了博客</p><p><bdo dir="rtl">我在CSDN里写了博客</bdo></p><span id="a">大家可以去看看</span><br><br><span id="b">大家可以去看看</span>
</body>

10.扩展 link 标签

添加网址标题栏前的小图标
在一个 html 页面中，header main footer 这些标签只能出现一次

<head><link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
</head>

dns解析

<head><link rel="dns-prefetch" href="//static.360buying.com">
</head>

11. 扩展 mate 标签

mate 添加一些辅助信息

<meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ，吃喝玩乐1折起。">
<meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ，吃喝玩乐1折起。">
<meta http-equiv="X-UA-Compatible" content="ie=edge"><meta http-equiv="refresh" content="3" url="">
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">|

12.HTML5 新的常见的语义化标签

<body><header></header><main></main><footer></footer>
</body>

header：页眉footer：页脚main：主体hgroup：标题组合

<head><style>header{border: 10px solid red;}hgroup{border: 10px solid blue;}</style>
</head>
<body><header><hgroup><h1>主标题</h1><h2>副标题</h2></hgroup></header>
</body>

nav：导航article：独立的内容aside：辅助信息的内容section：区域figure：描述图像或视频figcaption：描述图像或视频标题的部分datalist：选项列表details / summary：文档细节 / 文档标题

<details open><summary>HTML</summary><p>超文本标记语言</p>
</details>

加入open属性 默认展开

progress(prog) / meter：定义进度条 / 定义度量范围
<progress min="0" max="10" value="8"></progress>
1<meter min="0" max="100" value="40" low="10" high="60"></meter>
1<meter min="0" max="100" value="80" low="10" high="60"></meter>
1

time：定义日期或时间
<p>今天是<time title="1-1">元旦节</time>，大家很开心
</p>mark：带有记号的文本
<p>今天是<mark>元旦节</mark>，大家很开心
</p>

13.Flex 弹性布局

作用在flex容器上   作用在flex子项上
flex-directioon order
flex-wrap   flex-grow
flex-flow   flex-shrink
justify-content flex-basis
align-items flex
align-content   align-self
作用在flex容器上

1.flex-direction(方向)
用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上

取值含义
row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右
row-reverse 显示为行。但方向和row属性值相反
column 显示为列
column-reverse 显示为列。但方向和colum属性值相反

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-direction:column-reverse;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}#div1 .div2{width: 50px;height: 50px;background-color: aqua; color: white;line-height: 50px;text-align: center;float: right;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div class="div2">4</div><div class="div2">5</div></div></body>

2.flex-wrap
用来控制子项整体单行显示还是换行显示

取值含义
nowrap 默认值，表示单行显示，不是换行
wrap 宽度不足换行显示
wrap-reverse 宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面
nowrap
当元素块过多，但块内内容不会溢出时会使块等比缩小

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><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>
</body>如果块内内容过多<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><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>
</body>

wrap

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-wrap: wrap;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><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>
</body>

wrap-reverse

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-wrap: wrap-reverse;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><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>
</body>

3.flex-flow(复合写法)
(flex-direction 和 flex-wrap 的复合写法)
flex-flow 属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向第二值表示换行，中间用空格隔开

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-flow: column-reverse wrap;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><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>
</body>

4.justify-content
justify-content属性决定了主轴方向（flex-direction）上子项的对其和分布方式

取值含义
flex-start 默认值，表现为起始位置对齐
flex-end 表现为结束位置对齐
center 表现为居中对齐
space-between 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配
space-around around是环绕的意思，意思是每个flex的子项两侧都环绕互不相干扰的等宽空白间距，最终视觉上边缘两侧的空白只有中间空白宽度的一半
space-evenly evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等

lex-end
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content:flex-end;flex-wrap: wrap;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><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>
</body>

center

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content:center;flex-wrap: wrap;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><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>
</body>

space-between(两端对齐)

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content:space-between;flex-wrap: wrap;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><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>
</body>

space-around(环绕)

head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content:space-around;flex-wrap: wrap;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><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>
</body>

space-evenly(平均，平等)

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content:space-evenly;flex-wrap: wrap;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><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>
</body>

5.align-items
align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式

取值含义
stretch 默认值，flex子项拉伸
flex-start 表现为容器顶部对齐
flex-end 表现为容器底部对齐
center 表现为垂直居中对齐
stretch

   <style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content: space-evenly;align-items: stretch;flex-wrap: wrap;}#div1 div{width: 50px;min-height: 50px;background-color: red;}</style>
</head>
<body><div id="div1"><div>测试文本</div><div>测试文本测试文本测试文本</div><div>测试文本测试文本</div><div>测试文本</div><div>测试文本</div><div>测试文本测试文本测试文本</div><div>测试文本测试文本</div><div>测试文本</div></div>
</body>

flex-start

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content: space-evenly;align-items: flex-start;}#div1 div{width: 50px;min-height: 50px;background-color: red;}</style>
</head>
<body><div id="div1"><div>测试文本</div><div>测试文本测试文本测试文本</div><div>测试文本测试文本</div><div>测试文本</div></div>
</body>

flex-end

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content: space-evenly;align-items: flex-end;}#div1 div{width: 50px;min-height: 50px;background-color: red;}</style>
</head>
<body><div id="div1"><div>测试文本</div><div>测试文本测试文本测试文本</div><div>测试文本测试文本</div><div>测试文本</div></div>
</body>

center

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content: space-evenly;align-items: center;}#div1 div{width: 50px;min-height: 50px;background-color: red;}</style>
</head>
<body><div id="div1"><div>测试文本</div><div>测试文本测试文本测试文本</div><div>测试文本测试文本</div><div>测试文本</div></div>
</body>

6.align-content
align-content可以堪称和just-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。

取值含义
start 默认值。每一行flex子元素都等比拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%
flex-start 表现为起始位置对齐
flex-end 表现为结束位置对齐
center 表现为居中对齐
space-between 表现为两端对齐
space-around 每一行上下都享有独立不重叠的空白空间
space-evenly 每一行元素上下完全等分
flex-end

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-wrap: wrap;align-content: flex-end}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><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>
</body>

center

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-wrap: wrap;align-content: center;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><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>
</body>

space-between(两端对齐)

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-wrap: wrap;align-content:space-between;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><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>
</body>

space-around(环绕)

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-wrap: wrap;align-content:space-around;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><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>
</body>

space-evenly(平均，平等)

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-wrap: wrap;align-content:space-evenly;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><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>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>
</body>

作用在flex子项上
取值含义
order 可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0
flex-grow 属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。默认值为0
flex-shrink 属性中的shrink是"收缩"的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值是1
flex-basis flex-basis定义了在分配剩余空间之前元素的默认大小
flex flex属性是flex-grow，flex-shrink和flex-basis的缩写
align-self align-self指控制单独某一个flex子项的垂直对齐方式
1.order

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-direction:row;flex-wrap: wrap;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}#div1 div:nth-child(8){order: -3;}#div1 div:nth-child(2){order: -1;}#div1 div:nth-child(3){order: 1;}#div1 div:nth-child(4){order: 1;}</style>
</head>
<body><div id="div1"><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>
</body>

2.flex-grow
总的类似于把空白间隙看作为1，若flex-grow的值总和大于1，则对flex-grow对1进行等比例均分侵占

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-direction:row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}#div1 div:nth-child(2){background-color: pink;color: black;flex-grow: 0.5;}#div1 div:nth-child(4){background-color: aqua;color: black;flex-grow: 2;}总的类似于把空白间隙看作为1，然后flex-grow对1进行等比例均分侵占</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>
</body>

3.flex-shrink
默认值都是1，如果不想让一个子项收缩就设置0，数值越大收缩越大

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-direction:row;align-items: center;}#div1 div{width: 50px;height: 50px;background-color: black; color: white;line-height: 50px;text-align: center;}#div1 div:nth-child(2){background-color: pink;color: black;flex-shrink: 2;}#div1 div:nth-child(4){background-color: aqua;color: black;flex-shrink: 3;}#div1 div:nth-child(6){background-color: gray;color: black;flex-shrink: 0;}</style>
</head>
<body><div id="div1"><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>
</body>4.flex-basis
类似与width的作用，但与width同时存在时，flex-basis优先级更高，若超出容器范围则自适应调解的优先级高于flex-basis<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;align-items: center;}#div1 div{width: 50px;height: 50px;background-color: black; color: white;line-height: 50px;text-align: center;}#div1 div:nth-child(2){background-color: pink;color: black;width: 60px;}#div1 div:nth-child(4){background-color: aqua;color: black;flex-basis: 60px;width: 70px;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>
</body>

5.flex(复合写法)
flex-grow 和 flex-shrink 和 flex-basis 的复合写法

flex的默认值就是：0 1 auto

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;align-items: center;}#div1 div{width: 50px;height: 50px;background-color: black; color: white;line-height: 50px;text-align: center;}#div1 div:nth-child(2){background-color: pink;color: black;flex: 0 1 auto ;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>
</body>

但是如果单独写一个值时，那个值为flex-grow，单独写flex一个值则弹性的优先级更高，即宽不起作用

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;align-items: center;}#div1 div{width: 50px;height: 50px;background-color: black; color: white;line-height: 50px;text-align: center;}#div1 div:nth-child(2){background-color: pink;color: black;flex: 0 ;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>
</body>

6.align-self
针对子项的 align-items ,而 align-items是整体设置

<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex; align-items: center;}#div1 div{width: 50px; background-color: black; color: white;line-height: 50px;text-align: center;}#div1 div:nth-child(1){background-color: pink;color: black;align-self:flex-end;}#div1 div:nth-child(2){background-color: pink;color: black;align-self:center;}</style>
</head>
<body><div id="div1"><div>测试文字</div><div>测试文字测试文字</div><div>a</div><div>a</div><div>a</div></div>
</body>

flex骰子练习

   <style>#div1{width: 100px;height: 100px;border: 1px solid black;border-radius: 5px;display: flex;justify-content: center;align-items: center;}#div1 div{width: 30%;height: 30%;background-color: black;border-radius: 50%;}#div2{width: 100px;height: 100px;margin-left: 10px; border: 1px solid black;border-radius: 5px;display: flex;justify-content: space-between;}#div2 div{width: 30%;height: 30%;background-color: black;border-radius: 50%;}#div2 div:last-child{align-self: flex-end;}#div3{width: 100px;height: 100px;margin-left: 10px; border: 1px solid black;border-radius: 5px;display: flex;justify-content: space-between;align-items: center;}#div3 div{width: 30%;height: 30%;background-color: black;border-radius: 50%;}#div3 div:first-child{align-self: stretch;}#div3 div:last-child{align-self: flex-end;}#div4{width: 100px;height: 100px;margin-left: 10px; border: 1px solid black;border-radius: 5px;display: flex;flex-wrap: wrap;}#div4 div{width: 100%; display: flex;justify-content: space-between;}#div4 div i{display: block;width: 30%;height: 60%;background-color: black;border-radius: 50%;}#div4 div:last-child{align-items: flex-end;}#div5{width: 100px;height: 100px;margin-left: 10px; border: 1px solid black;border-radius: 5px;display: flex;flex-wrap: wrap;}#div5 div{width: 100%; display: flex;align-items: center;justify-content: center;}#div5 div i{display: block;width: 30%;height: 90%;background-color: black;border-radius: 50%;}#div5 div:first-child{justify-content: space-between;align-items: flex-start;}#div5 div:last-child{justify-content: space-between;align-items: flex-end;}#div6{width: 100px;height: 100px;margin-left: 10px; border: 1px solid black;border-radius: 5px;display: flex;flex-wrap: wrap;}#div6 div{width: 100%; display: flex;align-items: center;justify-content: space-between;}#div6 div i{display: block;width: 30%;height: 90%;background-color: black;border-radius: 50%;}#div6 div:first-child{align-items: flex-start;}#div6 div:last-child{align-items: flex-end;}.l{float: left;}</style>
</head>
<body><div id="div1" class="l"><div></div></div><div id="div2" class="l"><div></div><div></div></div><div id="div3" class="l"><div></div><div></div><div></div></div><div id="div4" class="l"><div><i></i><i></i></div><div><i></i><i></i></div></div><div id="div5" class="l"><div><i></i><i></i></div><div><i></i></div><div><i></i><i></i></div></div><div id="div6" class="l"><div><i></i><i></i></div><div><i></i><i></i></div><div><i></i><i></i></div></div>
</body>

flex左右固定中间自适应

<head><style>*{margin: 0;padding: 0;}#main{display: flex;}#main .left{width: 300px;height: 300px;background-color: aqua;}#main .center{background-color: pink;flex: 1;}#main .right{width: 200px;height: 350px;background-color: gray;}</style>
</head>
<body><div id="main"><div class="left"></div><div class="center"></div><div class="right"></div></div>
</body>

flex百度弹性导航

<head><style>*{margin: 0;padding: 0;}#main{width: 100%;height: 200px; display: flex;flex-wrap: wrap;}#main div{width: 100%; justify-content: space-around;display: flex;align-items: center;}#main div i{width: 50px;height: 50px; background-color: pink;border-radius: 50%;}</style>
</head>
<body><div id="main"><div><i></i><i></i><i></i><i></i><i></i></div><div><i></i><i></i><i></i><i></i><i></i></div></div>
</body>

13.Grid 网格布局
grid 布局是一个二维的布局方法，纵横两个方向总是同时存在

作用在 grid 容器上作用在 grid 子项上
grid-template-columns grid-coolumn-start
grid-template-rows grid-column-end
grid-template-areas grid-row-start
grid-template grid-row-end
grid-column-gap grid-column
grid-row-gap grid-row
grid-gap grid-area
justify-items justify-self
align-items align-self
place-items place-self
justify-content
align-content
place-content
作用在grid容器上
1.grid-template-columns 与 grid-template-rows
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）

有时候，我们网格的划分是很规律的，如果需要添加多哦咯横纵网格时，可以利用repeat()语法进行简化操作

<head><style>#div1{width: 400px;height: 400px;border: 1px solid black;display: grid;grid-template-rows: 1fr 1fr 1fr 2fr;grid-template-columns: 1fr 1fr 2fr;}</style>
</head>
<body><div id="div1"><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>

<head><style>#div1{width: 400px;height: 400px;border: 1px solid black;display: grid;grid-template-rows: .1fr .1fr .1fr .2fr;grid-template-columns: 1fr 1fr 2fr;}</style>
</head>
<body><div id="div1"><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>repeat()
<head><style>#div1{width: 400px;height: 400px;border: 1px solid black;display: grid;grid-template-rows: repeat(3,1r);grid-template-columns: repeat(4,1fr);}</style>
</head>
<body><div id="div1"><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.grid-template-areas 与 grid-template
area 是区域的意思，grid-template-areas 就是给我们的网格划分区域的。此时 grid 子项只要使用 grid-area 属性指定隶属哪个区

grid-template 是 grid-template-rows ，grid-template-columns 和 grid-template-areas 属性的缩写

<head><style>#div1{width: 400px;height: 400px;border: 1px solid black;display: grid;/* grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(4,1fr);grid-template-areas: "a1 a1 a1 a1""a2 a2 a3 a4""a2 a2 a3 a4" */grid-template: "a1 a1 a1 a1"1fr"a2 a2 a3 a4"1fr"a2 a2 a3 a4"1fr/1fr 1fr 1fr 1fr ;}#div1 div{background-color: pink;border: 1px solid black;}#div1 div:nth-child(1){grid-area: a1;}#div1 div:nth-child(2){grid-area: a2;}#div1 div:nth-child(3){grid-area: a3;}#div1 div:nth-child(4){grid-area: a4;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div></div>
</body>

3.grid-column-gap 与 grid-row-gap 与 grid-gap
grid-column-gapa 和 grid-row-gap 属性是用来定义网格中网格间隙的尺寸

CSS grid-gap 属性是 grid-column-gap 和 grid-row-gap 属性的缩写

<head><style>#div1{width: 400px;height: 400px;border: 1px solid black;display: grid;grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(4,1fr);grid-template-areas: "a1 a1 a1 a1""a2 a2 a3 a4""a2 a2 a3 a4";/* grid-row-gap: 10px;grid-column-gap: 20px; */grid-gap: 10px 20px;}#div1 div{background-color: pink;border: 1px solid black;}#div1 div:nth-child(1){grid-area: a1;}#div1 div:nth-child(2){grid-area: a2;}#div1 div:nth-child(3){grid-area: a3;}#div1 div:nth-child(4){grid-area: a4;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div></div></body>

4.justify-items 与 align-items
just-items 指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items 指定了网格元素的垂直呈现发放时，是垂直拉伸显示，还是上中下对齐。

place-items 可以让 align-items 和 justify-items 属性写在单个声明中。

取值含义
stretch 默认值，拉伸。表现为水平或者垂直填充
start 表现为容器左侧或顶部对齐
end 表现为容器右侧或底部对齐
center 表现为水平或垂直居中对齐

<head><style>#div1{width: 400px;height: 400px;border: 1px solid black;display: grid;grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(4,1fr);/* justify-items: start;align-items: center; */place-items: center center;}#div1 div{background-color: pink;border: 1px solid black;}</style>
</head>
<body><div id="div1"><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>

5.justify-content 与 align-content
justify-coontent 指定了网格元素的水平分布方式。align-content 指定了网格元素的垂直分布方式。place-content 可以让 align-coontent 属性写在一个CSS声明当中

类似于flex中的justify-content和align-content

取值含义
stretch 默认值，拉伸。表现为水平或垂直填充
start 表现为容器左侧或顶部对齐
end 表现为容器右侧或底部对齐
center 表现为水平或垂直居中对齐
space-between 表现为两端对齐
space-around 享有独立不重叠的空白空间
space-evenly 平均分配空白空间

<head><style>#div1{width: 500px;height: 500px;border: 1px solid black;display: grid;grid-template-rows: repeat(3,100px);grid-template-columns: repeat(4,100px);justify-content: space-between;align-content: space-around;}#div1 div{background-color: pink;border: 1px solid black;}</style>
</head>
<body><div id="div1"><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>

作用在grid子项上
取值含义
gird-column-start 水平方向上占据的起始位置
grid-column-end 水平方向上占据的结束位置（span属性）
grid-row-start 垂直方向上占据的起始位置
grid-row-end 垂直方向上占据的结束位置（span属性）
grid-column grid-column-start + grid-column-end 的缩写
grid-row grid-row-start + grid-row-end 的缩写
grid-area 表示当前网格所占区域，名字和位置两种表示方法
justify-self 单个网格元素的水平对齐方式
align-self 单个网格元素的垂直对齐方式
place-self align-self 和 justify-self 的缩写
1.grid-column 与 grid-row

<head><style>#div1{width: 500px;height: 500px;border: 1px solid black;display: grid;grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(4,1fr);}#div1 div{background-color: pink;/* grid-column-start: 2;grid-column-end: 5;grid-row-start: 2;grid-row-end: span 2; */grid-column: 2 / 5;grid-row: 2/span 2;}</style>
</head>
<body><div id="div1"><div></div></div>
</body>

2.grid-area

<head><style>#div1{width: 500px;height: 500px;border: 1px solid black;display: grid;grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(4,1fr);}#div1 div{background-color: pink;grid-area: 2/2/3/5;}</style>
</head>
<body><div id="div1"><div></div></div>
</body>

3.justify-self 与 align-self 与 place-self

<head><style>#div1{width: 500px;height: 500px;border: 1px solid black;display: grid;grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(4,1fr);}#div1 div{background-color: pink;border: 1px solid black;}#div1 div:nth-child(6){justify-self: center;align-self: center;place-self: center center;}</style>
</head>
<body><div id="div1"><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>
</html>

grid骰子练习

<head><style>.l{float: left;}#div1{width: 100px;height: 100px;margin-right: 10px;border: 1px solid black;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}#div1 div{width: 25px;height: 25px;border-radius: 50%;background-color: black;}#div1 div:nth-child(1){grid-area: 2/2/3/3;}#div2{width: 100px;height: 100px;margin-right: 10px;border: 1px solid black;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}#div2 div{width: 25px;height: 25px;border-radius: 50%;background-color: black;}#div2 div:nth-child(2){grid-area: 3/3/4/4;}#div3{width: 100px;height: 100px;margin-right: 10px;border: 1px solid black;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}#div3 div{width: 25px;height: 25px;border-radius: 50%;background-color: black;}#div3 div:nth-child(2){grid-area: 2/2/3/3;}#div3 div:nth-child(3){grid-area: 3/3/4/4;}#div4{width: 100px;height: 100px;margin-right: 10px;border: 1px solid black;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}#div4 div{width: 25px;height: 25px;border-radius: 50%;background-color: black;}#div4 div:nth-child(2){grid-area: 1/3/2/4;}#div4 div:nth-child(3){grid-area: 3/1/4/2;}#div4 div:nth-child(4){grid-area: 3/3/4/4;}#div5{width: 100px;height: 100px;margin-right: 10px;border: 1px solid black;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}#div5 div{width: 25px;height: 25px;border-radius: 50%;background-color: black;}#div5 div:nth-child(2){grid-area: 1/3/2/4;}#div5 div:nth-child(3){grid-area: 3/1/4/2;}#div5 div:nth-child(4){grid-area: 3/3/4/4;}#div5 div:nth-child(5){grid-area: 2/2/3/3;}#div6{width: 100px;height: 100px;margin-right: 10px;border: 1px solid black;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}#div6 div{width: 25px;height: 25px;border-radius: 50%;background-color: black;}#div6 div:nth-child(2){grid-area: 1/3/2/4;}#div6 div:nth-child(3){grid-area: 3/1/4/2;}#div6 div:nth-child(4){grid-area: 3/3/4/4;}#div6 div:nth-child(5){grid-area: 2/1/3/2;}#div6 div:nth-child(6){grid-area: 2/3/3/4;}</style>
</head>
<body><div id="div1" class="l"><div></div></div><div id="div2" class="l"><div></div><div></div></div><div id="div3" class="l"><div></div><div></div><div></div></div><div id="div4" class="l"><div></div><div></div><div></div><div></div></div><div id="div5" class="l"><div></div><div></div><div></div><div></div><div></div></div><div id="div6" class="l"><div></div><div></div><div></div><div></div><div></div><div></div></div>
</body>

grid百度索搜风云榜

<head><style>*{margin: 0;padding: 0;list-style: none;text-decoration: none;}#main{width: 350px;height: 450px;padding: 25px;margin: 0 auto;border: 1px solid black;display: grid;position: relative;border-radius: 5px;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: 10px 10px;}#main div{background-color: pink;border: 1px solid black;border-radius: 5px;display: grid;grid-template-rows: repeat(3,1fr);}#main div:nth-child(1){grid-area: a1;background-color: #1C95F2;}#main div:nth-child(2){grid-area: a2;background-color: #1C95F2;}#main div:nth-child(3){grid-area: a3;background-color: #FF629D;}#main div:nth-child(4){grid-area: a4;background-color: #1C95F2;}#main div:nth-child(5){grid-area: a5;background-color: #1C95F2;}#main div:nth-child(6){grid-area: a6;background-color: #E68909;}#main div:nth-child(7){grid-area: a7;background-color: #E68909;}a{display: block;width: 100%;height: 100%;color: black;}#main ul{position: absolute;bottom: 1.5px;right: 25px;}#main li{float: left;width: 20px;height: 20px;border: 1px solid black ;margin-left: 5px;border-radius: 3px;}#main li a{display: block;width: 100%;height: 100%;color: black;line-height: 20px;text-align: center;}h2{position: absolute;top: 0;left: 25px;font-size: 20px;line-height: 25px;}#main div h3 {font-size: 18px;color: white;font-weight: normal;justify-self: end;align-self: flex-start;}#main div p {font-size: 16px;justify-self: center;align-self: center;}</style>
</head>
<body><div id="main"><h2>今日上榜</h2><div><h3>七日关注</h3><p>高通技术授权</p></div><div><h3>七日关注</h3><p>高通技术授权</p></div><div><h3>七日关注</h3><p>高通技术授权</p></div><div><h3>七日关注</h3><p>高通技术授权</p></div><div><h3>七日关注</h3><p>高通技术授权</p></div><div><h3>七日关注</h3><p>高通技术授权</p></div><div><h3>七日关注</h3><p>高通技术授权</p></div><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li></ul></div>
</body>