HTML+CSS入门

最新推荐文章于 2024-06-06 12:04:29 发布

键.

最新推荐文章于 2024-06-06 12:04:29 发布

阅读量1.4k

点赞数

分类专栏： htmlcss 文章标签： html css

本文链接：https://blog.csdn.net/beekim/article/details/119008128

版权

htmlcss 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.HTML标签基础

html为网页标记语言 <标签名>

DTD声明

新版：

<!DOCTYPE html >

老版：

重邮官网

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

标题标签 hn

<h1></h1>
<h2></h2>
<h3></h3>  
<h4></h4>
<h5></h5>
<h6></h6>

n代表数字，取值范围为1~6

数字越大，字体越小

自动加粗、换行

注意：每一个html中h1标签建议只使用一次

段落标签 p

p标签，默认有个margin：16px

<p></p>

文本标签 font（不推荐）

<font size="" color=""></font>

size设置字体的大小

取值范围为1-7，数字越大，字体越大

超过取值范围是按照最大的字体显示

color设置字体的颜色

1、英文 red orange pink blue green transparent(透明色)

2、HEXColor 六位的十六进制

十六进制的取值范围0-9 a-f

#00 00 00

红色绿色蓝色

#000000黑色 #000

#ffffff白色 #fff

#ffcc11屎黄色 #fc1

其他标签（不重要）

字体修饰

加粗

<b></b>

强调加粗

<strong></strong>

斜体

<i></i>

强调斜体

<em></em>

换行

<br>  <br />  <br/>

分割线

<hr>

删除线

<del>删除线</del>

注释

<ruby>陈<rt>chen</rt></ruby>

文字方向

<bdo dir="rtl">好好学习，天天向上</bdo>   rtl:right to left

超链接（超文本传输协议）

<a href="" target="_self">点击的内容</a>

href网页跳转的地址

绝对地址：

域名（网址）

本地的文件目录（不建议使用）

相对地址：

参考物：当前文件路径

./当前路径（当前路径可以省略） …/上一级路径 …/…/上两级

target超链接的跳转方式

_self在本窗口打开（默认）

_blank在新窗口打开（重点）

_top在顶层窗口打开(了解）

_parent在父级窗口打开(了解）

图片标签

<img src="" width="" height="" alt="" title="">

src设置图片的路径（必填）

相对地址

绝对地址

width设置图片的宽度单位：px 百分比

height设置图片的高度

注意：当单独设置图片的宽度或者高度时，图片会等比例缩放；当你同时设置图片的宽度和高度时，图片会严格按照所给的比例进行缩放。

alt图片失效时显示

title设置图片的描述

列表

无序列表(重点)
<ul>
    <li></li>
</ul>

有序列表
<ol>
    <li></li>
</ol>

自定义列表
<dl>
    <dd></dd>
    <dt></dt>
</dl>

无意义标签

<div></div>块级标签
<span></span>行级标签

块级标签和行级标签的区别：

块级标签可以直接设置宽高，默认纵向排列

行级标签不能直接设置宽高，默认横向排列

上标

<sup></sup>

下标

<sub></sub>

表格

<table border="1">
<caption>GZ20直播</caption>
   <tr>
       <th></th>
       ...
   </tr>
   <tr>
       <td></td>
       ...
   </tr>
</table>

表格的属性：

border设置是否有边框 0无边框 1有边框

style设置样式

边距

内边距cellpadding

外边距cellspacing

合并单元格

合并行rowspan=""

合并列colspan=""

注意：合并单元格遵循从左往右合并，从上往下合并

表单form（重点）

<form action="" method=""> 
    ...
</form>

action表单提交的地址

绝对地址(网址)

相对地址后端可以用 php java c语言

method表单提交的方式

get提交 1.php?name=zhangsan&age=18&sex=男

post提交

get提交和post提交的区别：

get提交任务栏可见，post提交任务栏不可见

get提交数据不安全,post提交数据相对安全

get提交数据大小会受任务栏限制，而post不受限制

IE限制2KB 谷歌/火狐限制8KB

输入框

<input type="" name="" value="">

type输入框的类型

text文本框

password密码框

radio单选框 name的值必须要相同，value必须不同

checkbox复选框 name的值一般为数组 like[],value必须不同

file文件 enctype="multipart/form-data"

button按钮

image图片提交

submit提交

reset重置按钮

name设置名字

注意：如果你需要将数据提交给后端，那么必须写上name属性,value为提交的值

下拉框

<select name="">
    <option value=""></option>
</select>

文本域

<textarea></textarea>

表单的属性：

readonly只读下·

disabled禁用

readonly和disabled的区别：

readonly代表只读，允许数据提交，但是只能适用于input输入框类型为text、 password以及文本域使用

disabled代表禁用，不允许数据提交。但是适用于所有元素

checked 单选框和复选框的默认选择

selected下拉框的默认选择

placeholder默认提示信息

后端form表单测试：

get方式

1.安装wampserver

2.打开www目录，新建文件夹并拖入hbuilderx，新建测试的html和php文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="get.php" method="get">
			姓名:<input type="text" name="name" /><br>
			密码：<input type="password"  name="pass"  /><br />
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

<?php
 var_dump($_GET);
?>

游览器中输入localhost，并找到项目文件夹

打开html

输入信息，提交

通过get方式提交就会在地址栏显示输入的信息

post方式

更改代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="post.php" method="post">
			姓名:<input type="text" name="name" /><br>
			密码：<input type="password"  name="pass"  /><br />
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>


<?php
 var_dump($_POST);
?>

测试：

其他表单测试

radio单选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="post.php" method="post">
			姓名:<input type="text" name="name" /><br>
			密码：<input type="password"  name="pass"  /><br />
			<input type="submit" value="提交"/>
			性别：<input type="radio" name="gender" />男
			<input type="radio" name="gender" />女
			<input type="radio" name="gender" />保密
		</form>
	</body>
</html>

现在发现想要的数据并不是我们选择的值，这是因为没有给其赋value的值

性别：<input type="radio" name="gender" value="0" />男
			<input type="radio" name="gender"  value="1"/>女
			<input type="radio" name="gender"  value="2"/>保密

修改代码后测试

checkbox多选

添加代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="post.php" method="post">
			姓名:<input type="text" name="name" /><br>
			密码：<input type="password"  name="pass"  /><br />
		
			性别：<input type="radio" name="gender" value="0" />男
			<input type="radio" name="gender"  value="1"/>女
			<input type="radio" name="gender"  value="2"/>保密<br>
			爱好：<input type="checkbox" name="love" value="0" />篮球
			<input type="checkbox" name="love" value="1" />排球
			<input type="checkbox" name="love" value="2" />足球
			<input type="checkbox" name="love" value="3" />羽毛球<br>
				<input type="submit" value="提交"/>
		</form>
	</body>
</html>

测试：

测试结果为只能获取到一个值，需要修改name属性为数组类型

	爱好：<input type="checkbox" name="love[]" value="0" />篮球
			<input type="checkbox" name="love[]" value="1" />排球
			<input type="checkbox" name="love[]" value="2" />足球
			<input type="checkbox" name="love[]" value="3" />羽毛球<br>

2.CSS基础

css 层叠样式表级联样式表

css中class的命名规范： https://blog.csdn.net/qq_37361815/article/details/86607763

css的引入：

1、行内样式（不推荐使用）

<p style=""></p>

2、内嵌式

<style></style>

3、外部引入式

<link rel="stylesheet" href="style.css">

css的优先级别：

在代码不冲突的情况下，所有的样式都可以正常显示；

若样式出现冲突，css遵循就近原则

css的选择符

元素选择符

通配符匹配所有的标签

*{sRules}

通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用

类型选择符（标签选择符）

E element代表标签

E{color:red;}

id选择符

(保证其唯一性，留给javascript使用)

<p id="test"></p>

<style>
    #test{
        
    }
</style>

class选择符

（可以重复使用多次）

<p class="test"></p>

<style>
    .test{
        
    }
</style>

关系选择符

包含选择符(空格)

<div>
    <p></p>
    <ul>
        <li><p></p></li>
    </ul>
</div>
<p>该标签不会被选择</p>

选择div内所有的p标签
div p{
    
}

子选择符( > )(重点)

<div>
    <p>选择到该元素</p>
    <h2>
        <!--孙子不能被选择-->
        <p>该元素不会被选择</p>
    </h2>
</div>

选择div内的子元素p
div>p{
    
}

相邻选择符（+）

注意：相邻选择符只能向下选择

<p>该元素不会被选择</p>
<div>
    <p>该元素不会被选择</p>
</div>
<p>该元素被选择</p>
<p>该元素不会被选择</p>
<p>该元素不会被选择</p>

div+p{
    
}

兄弟选择符（~）

注意：兄弟选择符只能向下选择

<p>该元素不会被选择</p>
<div>
    <p>该元素不会被选择</p>
</div>
<p>该元素被选择</p>
<p>该元素被选择</p>
<p>该元素被选择</p>

div~p{
    
}

伪类选择符

鼠标悬停

E element(标签)

E:hover{}设置鼠标悬停时样式（重点）

E:link设置超链接未访问前样式
E:visited设置超链接访问后的样式
E:hover设置鼠标悬停时样式
E:active设置超链接点击时样式
口诀：love  hate

E:first-child 匹配父元素的第一个子元素E。 第一个子孩子，要非常精确地位置
E:last-child 最后一个子孩子
E:only-child 唯一一个子孩子
E:nth-child(n)正数第几个孩子
E:nth-last-child(n) 倒数第几个孩子
E:first-of-type 匹配第一个类型为E的子元素
E:last-of-type
E:only-of-type
E:nth-of-type(n)
E:nth-last-of-type(n)

了解
E:enabled 当元素处于可用状态
E:disabled 当元素处于禁用状态
E:empty 选择指定的空元素
E:target 
E:root 相当于html
E:checked 选择input的radio和checkbox默认选中的元素

eg:

<style type="text/css">
			.one ul li:first-child{
				background: pink;
			}
		</style>

<div class="warp">
	 	<div class="one">
	 		<ul>
	 						<li>1111111111111</li>
	 						<li>1111111111111</li>
	 						<li>1111111111111</li>
	 						<li>1111111111111</li>
	 						<li>1111111111111</li>
	 						<li>1111111111111</li>
	 					</ul>
	 	</div>
	 </div>

字体样式font

font-style设置字体的样式 italic斜体

font-weight设置字体的粗细

bold粗体(700) bolder加粗体(800) lighter细体（400）

取值为100|200|300|400|500|600|700|800|900

font-weight:800；加粗

相当于

<b></b>   <strong></strong>

font-size设置字体的大小单位：px 百分比 em rem

em（参考父级元素的字体大小）

rem（参考根元素的字体大小）

注意：一般默认字体大小为16px，最小12px

常规情况下，字体设置为偶数

line-height设置字体的行高单位：px

小技巧：当line-height和height设置相同时，文本会上下居中

font-family设置字体（微软雅黑、宋体、黑体、Arail）

多个字体之间采用逗号链接，后面的字体为备用字体

font-family:宋体,微软雅黑；

复合写法：

font:20px 微软雅黑；/*（必须写font-size和font-family）*/

font:italic bolder 20px/30px 微软雅黑；/* font-size/line-height */

font:30px/1.5 微软雅黑；

文本样式

text-align文本对齐方式

left左对齐

right右对齐

center文本居中

text-indent:2em;首行缩进

letter-spacing字间距

字体装饰

text-decoration

重点： text-decoration:none;

第一个参数：

none取消装饰线

underline下划线

overline上划线

line-through贯穿线等同于

<del></del>

第二个参数：

solid 实线 dashed虚线 dotted点线状 double双实线

第三个参数：color颜色

text-shadow文本阴影

1、水平偏移正数：右移负数：左移

2、垂直偏移正数：下移负数：上移

3、模糊程度单位：px

4、阴影颜色

	<style>
/* 
							text-shadow文字阴影
								水平偏移  正数：右移  负数：左移
								垂直偏移  正数：下移  负数：上移
						 */
						div.text{
							font:bolder 100px 微软雅黑;
							text-shadow:5px 5px 10px #666; /*水平 垂直 模糊程度 颜色 */
						}
</style>
	<div class="text">异世相遇</div>

列表

**list-style:none;**去除列表样式

边框border

border-width边框的宽度

border-style边框的样式

solid实线 dashed虚线 dotted点线状 double双实线 inset

border-color边框的颜色

边框分为四个方向：left right top bottom

复合写法： border:1px solid red;

背景background

background-color设置背景颜色

background-image设置背景图片 url(图片路径)

background-repeat设置背景图片是否重复

repeat重复（默认）

repeat-x X轴重复

repeat-y Y轴重复

no-repeat不重复

background-attachment设置背景图像是否固定

取值为fixed （常用于：微信聊天背景）

<style>
.warp{
				background: url(genshin.jpg) no-repeat 0 0/100%;
				background-attachment: fixed;
			}
</style>

<div class="warp">
	 	<div class="one">
	 		<ul>
	 						<li>1111111111111</li>
	 						<li>1111111111111</li>
	 						<li>1111111111111</li>
	 						<li>1111111111111</li>
	 						<li>1111111111111</li>
	 						<li>1111111111111</li>
	 					</ul>
	 	</div>
		
		<div class="text">异世相遇</div>
		<div class="text">异世相遇</div>
		<div class="text">异世相遇</div>
		<div class="text">异世相遇</div>
		<div class="text">异世相遇</div>
		<div class="text">异世相遇</div>
		<div class="text">异世相遇</div>
		<div class="text">异世相遇</div>
		<div class="text">异世相遇</div>
		<div class="text">异世相遇</div>
		
		
	 </div>

background-origin设置背景图像的显示位置

border-box 从boder区域开始显示图片

padding-box 从padding区域开始显示图片(默认情况)

content-box 从内容区域开始显示图片

background-clip设置背景图像裁剪 text

background-position设置背景图像的位置

默认从图片0，0点（图片左上角）开始显示

center center(或者50% 50%)图片会始终保持居中,图片两侧自动裁剪

background-size设置图片的大小

复合写法：

background：green;

background:url(1.jpg) no-repeat 0 0;

background:url(1.jpg) no-repeat 0px 0px/100% 100%;

(url repeat position/bg-size )

补白

外补白margin

一个参数：同时作用于四个方向

两个参数：上下左右 margin:0 auto;

四个参数：上右下左

内补白padding

一个参数：同时作用于四个方向

两个参数：上下左右 margin:0 auto;

四个参数：上右下左

补白分为四个方向：left right top bottom

box-sizing

border-box

浮动float

left左浮动

right右浮动

清除浮动：clear:both;

浮动的元素会脱离文档流

::after{
content:"";
clear:both;
display:block;
height:0;
visibility:hidden;
}

注意：清除浮动清除的是浮动所带来的影响而不是浮动本身

display

none隐藏（不占位隐藏）占位隐藏visibility:hidden;

block显示

block将行级元素转换为块级元素

inline将块级元素转换为行级元素

inline-block将元素设置为行间块状元素（既可以设置宽高也能横向排列）eg:img

overflow超出内容的设置

hidden超出隐藏

scroll超出后显示滚动条

auto超出自动出现滚动条

定位position

relative相对定位（遵循正常文档流）

absolute绝对定位（脱离文档流）

fixed固定定位（始终参考屏幕的0，0点）（脱离文档流）

static静态定位（我不定位了）（遵循正常文档流）

1、定位模型发生在嵌套的盒子之中

2、定位的步骤：

1、给出定位属性 position:relative；

2、设置位移 left right top bottom

left 正数：右移负数：左移

top 正数：下移负数：上移

相对定位和绝对定位的区别：

1、参考点不同：

相对定位relative参考的是自身的坐标（0，0）点(自己的左上角)

绝对定位absolute参考的是具有定位属性的父级元素的（0，0）点（需要看父级元素）

2、是否脱离文档流（一般不需要解决）

绝对定位脱离文档流

相对定位不脱离文档流

定位的层级 z-index(必须有定位)

z-index取值为数字,数字越大层级越高

默认的z-index的层级为0

css自带的marginBUG

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{margin:0;padding:0;}
					div.one,div.two{
						width:300px;
						height:300px;
						
						
					}
					div.one{
						background:lightseagreen;
					}
			
				.inner{
								width:100px;
								height:100px;
								background:orange;
								margin-top: 50px;
							}
		</style>
	</head>
	<body>
		<div class="warp">
			<div class="one">
							<div class="inner"></div>
						</div>
						
            <div class="two"></div>
		</div>
		
	</body>
</html>

测试发现margin-top设置的值没有生效，

三种方法解决：

1、添加定位position

添加样式

	.inner{
								width:100px;
								height:100px;
								background:orange;
								margin-top: 50px;
								position: absolute;
							}

2、float

.inner{
								width:100px;
								height:100px;
								background:orange;
								margin-top: 50px;
								float: left;
							}

3、overflow:hidden;

div.one,div.two{
						width:300px;
						height:300px;
						overflow:hidden;
						
					}
.inner{
								width:100px;
								height:100px;
								background:orange;
								margin: 50px auto;
							
							}

消除图片间的空隙

	<img src="genshin.jpg" >
	<img src="genshin.jpg" >

给img添加一个display

img{
	display: block;
}

3.基本布局

3.1 BFC布局

正儿八经的bfc布局：https://blog.csdn.net/sinat_36422236/article/details/88763187

测试：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin:0;padding:0;}
			div.navBar{
				width:300px;
				height:600px;
				background:lightblue;
				float:left;
			}
			div.content{
				width:100%;
				height:600px;
				background:lightcoral;
				padding-left:300px;
				padding-right:200px;
				box-sizing: border-box;
			}
			div.aside{
				width:200px;
				height:600px;
				background:lightsalmon;
				float:right;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="navBar"></div>
			<div class="aside"></div>
			<div class="content"></div>
		</div>
	</body>
</html>

3.2浮动布局

推荐博客：

https://www.cnblogs.com/duw76/p/10042999.html

3.3min-height固定底部布局

min-height最小的高度：
当height的值大于min-height则显示height的高度
当height的值小于min-height则显示min-height的高度

max-height最大的高度：
当height的值大于max-height则显示max-height的高度
当height的值小于max-height则显示height的高度

1、设置最小高度min-height 100% 100vh
2、当前容器设置padding-bottom
3、设置底部navBar的margin-top

注意：margin-top 底部的高度 padding-bottom的值相同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="global.css">
		<style>
			html,body{
				height:100%;
			}
			div.content{
				width:100%;
				background:orange;
				height:1000px;
				min-height:100%;
				padding-bottom:80px;
				box-sizing: border-box;
			}
			div.footer{
				width:100%;
				height:80px;
				background:green;
				margin-top:-80px;
			}
		</style>
	</head>
	<body>
		<div class="content"></div>
		<div class="footer"></div>
	</body>
</html>

height高度大于min-height，底部的tabbar会跟着内容一起滑动

更改高度

	div.content{
				width:100%;
				background:orange;
				height:200px;
				min-height:100%;
				padding-bottom:80px;
				box-sizing: border-box;
			}

height高度小于min-height，底部的tabbar会跟固定在底部

4弹性盒子flex

阮一峰博客:

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

4.1 容器的属性

以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction

属性决定主轴的方向（即项目的排列方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			margin: 50px auto;
			width: 1000px;
			height: 300px;
			border: 1px solid lightcoral;
			display: flex;
		}
		.box div{
			width: 200px;
			height: 250px;
			background-color: aquamarine;
			margin: 10px;
		}
		
		</style>
	</head>
	<body>
		<div class="box">
			<div class="d1">a</div>
			<div class="d2">b</div>
			<div class="d3">c</div>
			<div class="d4">d</div>
		</div>
	</body>
</html>

.box{
			margin: 50px auto;
			width: 1000px;
			height: 300px;
			border: 1px solid lightcoral;
			display: flex;
			flex-direction: row-reverse;
		}

.box{
			margin: 50px auto;
			width: 1000px;
			height: 300px;
			border: 1px solid lightcoral;
			display: flex;
			flex-direction: column;
		}

flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			margin: 50px auto;
			width: 1000px;
			height: auto;
			border: 1px solid lightcoral;
			display: flex;
			
			
		}
		.box div{
			width: 200px;
			height: 250px;
			background-color: aquamarine;
			margin: 10px;
		}
		
		</style>
	</head>
	<body>
		<div class="box">
			<div class="d1">a</div>
			<div class="d2">b</div>
			<div class="d3">c</div>
			<div class="d4">d</div>
			<div class="d4">d</div>
			<div class="d4">d</div>
			<div class="d4">d</div>
		</div>
	</body>
</html>

	.box{
			margin: 50px auto;
			width: 1000px;
			height: auto;
			border: 1px solid lightcoral;
			display: flex;
			flex-wrap: wrap;
			
		}

.box{
			margin: 50px auto;
			width: 1000px;
			height: auto;
			border: 1px solid lightcoral;
			display: flex;
			flex-wrap: wrap-reverse;
		}

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

测试：

	.box{
			margin: 50px auto;
			width: 1000px;
			height: auto;
			border: 1px solid lightcoral;
			display: flex;
			flex-flow: row-reverse wrap;
		}

justify-content

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-evenly:可以使每个元素之间和元素距离边距的距离都相等，但是兼容性比较差（iphone的SE上不支持，会失效，相当于没有设置）

测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			margin: 50px auto;
			width: 1000px;
			height: 600px;
			border: 1px solid lightcoral;
			display: flex;
			flex-flow: wrap;
		
			align-items: center;
		}
		.box div{
			width: 200px;
			
			background-color: aquamarine;
			font-size: 100px;
			margin: 10px;
		}
		.box >div:nth-child(1){
			width: 100px;
		}
		.box >div:nth-child(2){
			width: 200px;
		}
		.box >div:nth-child(3){
			width: 150px;
		}
		.box >div:nth-child(4){
			width: 220px;
		}
		
		
		</style>
	</head>
	<body>
		<div class="box">
			<div class="d1">a</div>
			<div class="d2">b</div>
			<div class="d3">c</div>
			<div class="d4">d</div>
			
		</div>
	</body>
</html>

align-items

align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

4.2子项目属性

以下6个属性设置在子项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: <integer>;
}

测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			margin: 50px auto;
			width: 1000px;
			height: 600px;
			border: 1px solid lightcoral;
			display: flex;
			flex-flow: wrap;
		
			align-items: center;
			justify-content: space-evenly;
		}
		.box div{
			width: 200px;
			
			background-color: aquamarine;
			font-size: 100px;
			margin: 10px;
		}
		.box >div:nth-child(1){
			width: 100px;
			order: 0;
			
		}
		.box >div:nth-child(2){
			width: 200px;
			order: -2;
			
		}
		.box >div:nth-child(3){
			width: 150px;
			order: -1;
		}
		.box >div:nth-child(4){
			width: 220px;
			order: 2;
		}
		
		
		</style>
	</head>
	<body>
		<div class="box">
			<div class="d1">a</div>
			<div class="d2">b</div>
			<div class="d3">c</div>
			<div class="d4">d</div>
			
		</div>
	</body>
</html>

flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width: 2000px;
			height: 800px;
			margin: 50px auto;
			border: 1px solid red;
			display: flex;
		}
		.box>div{
			width: 300px;
			font-size: 100px;
			
		}
		.box>div:nth-child(1){
			background-color: pink;
		}
		.box>div:nth-child(2){
			background-color: lightgreen;
		}
		.box>div:nth-child(3){
			background-color: lightcyan;
		}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="d1">A</div>
			<div class="d2">B</div>
			<div class="d3">C</div>
			
		</div>
	</body>
</html>

三个值都设为1，则会均分整个屏幕

.box>div:nth-child(1){
			background-color: pink;
			flex-grow: 1;
		}
		.box>div:nth-child(2){
			background-color: lightgreen;
			flex-grow: 1;
		}
		.box>div:nth-child(3){
			background-color: lightcyan;
			flex-grow:1;
		}

两个值设为1，则为1的块均分剩余部分

.box>div:nth-child(1){
			background-color: pink;
			flex-grow: 0;
		}
		.box>div:nth-child(2){
			background-color: lightgreen;
			flex-grow: 1;
		}
		.box>div:nth-child(3){
			background-color: lightcyan;
			flex-grow:1;
		}

设置值为1,2,1。则按照1：2：1的比例均分整个外层块

.box>div:nth-child(1){
			background-color: pink;
			flex-grow: 1;
		}
		.box>div:nth-child(2){
			background-color: lightgreen;
			flex-grow: 2;
		}
		.box>div:nth-child(3){
			background-color: lightcyan;
			flex-grow:1;
		}

flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width: 600px;
			height: 800px;
			margin: 50px auto;
			border: 1px solid red;
			display: flex;
		}
		.box>div{
			width: 300px;
			font-size: 100px;
			
		}
		.box>div:nth-child(1){
			background-color: pink;
		
			flex-shrink: 2;
		}
		.box>div:nth-child(2){
			background-color: lightgreen;
		
			flex-shrink: 1;
		}
		.box>div:nth-child(3){
			background-color: lightcyan;
		
			flex-shrink: 1;
		}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="d1">A</div>
			<div class="d2">B</div>
			<div class="d3">C</div>
			
		</div>
	</body>
</html>

当宽度不足时，就会按照我们设置的比例进行收缩：

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。

.box>div:nth-child(1){
			background-color: pink;
		
			flex-shrink: 1;
		}
		.box>div:nth-child(2){
			background-color: lightgreen;
		
			flex-shrink: 1;
		}
		.box>div:nth-child(3){
			background-color: lightcyan;
		
			flex-shrink: 1;
		}

如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

.box>div:nth-child(1){
			background-color: pink;
		
			flex-shrink: 0;
		}
		.box>div:nth-child(2){
			background-color: lightgreen;
		
			flex-shrink: 1;
		}
		.box>div:nth-child(3){
			background-color: lightcyan;
		
			flex-shrink: 1;
		}

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width: 100%;
			height: 400px;
			margin: 50px auto;
			border: 1px solid red;
			display: flex;
		}
		.box>div{
			width: 300px;
			font-size: 100px;
			
		}
		.box>div:nth-child(1){
			background-color: pink;
		
			flex:1 0 auto;
		}
		.box>div:nth-child(2){
			background-color: lightgreen;
		
			flex:2 1 auto;
		}
		.box>div:nth-child(3){
			background-color: lightcyan;
			flex:1 0 auto;
		}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="d1">A</div>
			<div class="d2">B</div>
			<div class="d3">C</div>
			
		</div>
	</body>
</html>

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

测试：

5Grid网格布局

参考：

http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

5.1容器属性

display

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="global.css"/>
		<style>
		span {
		  font-size: 2em;
		}
		
		#container{
			width: 100%;
		  display: grid;
		  
		  grid-template-columns: repeat(3,100px);
		  grid-template-rows: repeat(3,100px);
		}
		
		.item {
	
		  font-size: 2em;
		  text-align: center;
		  border: 1px solid #e5e4e9;
		}
		
		.item-1 {
		  background-color: #ef342a;
		}
		
		.item-2 {
		  background-color: #f68f26;
		}
		
		.item-3 {
		  background-color: #4ba946;
		}
		
		.item-4 {
		  background-color: #0376c2;
		}
		
		.item-5 {
		  background-color: #c077af;
		}
		
		.item-6 {
		  background-color: #f8d29d;
		}
		
		.item-7 {
		  background-color: #b5a87f;
		}
		
		.item-8 {
		  background-color: #d0e4a9;
		}
		
		.item-9 {
		  background-color: #4dc7ec;
		}
		</style>
	</head>
	<body>
		<span>foo</span>
		<div id="container">
		  <div class="item item-1">1</div>
		  <div class="item item-2">2</div>
		  <div class="item item-3">3</div>
		  <div class="item item-4">4</div>
		  <div class="item item-5">5</div>
		  <div class="item item-6">6</div>
		  <div class="item item-7">7</div>
		  <div class="item item-8">8</div>
		  <div class="item item-9">9</div>
		</div>
		<span>bar</span>
	</body>
</html>

默认情况下，容器元素都是块级元素,但也可以设成行内元素。

div {
  display: inline-grid;
}

注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

grid-template-columns/rows

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

指定一个三行三列的网格，列宽和行高都是100px。

除了使用绝对单位，也可以使用百分比。

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

(1)repeat()

repeat()函数，简化重复的值

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

repeat()重复某种模式也是可以的。

grid-template-columns: repeat(2, 100px 20px 80px);

(2)auto-fill 关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

	#container{
		 width: 100%;
		  display:inline-grid;  
		  grid-template-columns: repeat(auto-fill,500px);
		  grid-template-rows: repeat(3,100px);
		}

表示每列宽度500px，然后自动填充，直到容器不能放置更多的列。

(3)fr关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

#container{
		 width: 100%;
		  display:inline-grid;  
		  grid-template-columns: 1fr 2fr 1fr;
		  grid-template-rows: repeat(3,100px);
		}

fr可以与绝对长度的单位结合使用，这时会非常方便。

#container{
		 width: 100%;
		  display:inline-grid;  
		  grid-template-columns:400px 2fr 1fr;
		  grid-template-rows: repeat(3,100px);
		}

(4)minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

#container{
		 width: 700px;
		  display:grid;  
		  grid-template-columns: 1fr  minmax(100px,200px) 1fr ;
		 
		}

上面代码中，minmax(100px, 200px)表示列宽不小于100px，不大于200px。

(5)auto关键字

auto关键字表示由浏览器自己决定长度。

#container{
		 width: 100%;
		  display:grid;  
		  grid-template-columns:100px auto 100px; 
		 
		}

上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

(6)网格线名称

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

上面代码指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。

网格布局允许同一根线有多个名字，比如[fifth-line row-5]。

grid-gap

grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

#container{
		 width: 640px;
		 padding: 0px;
		 margin: 50px auto;
		 border: 3px solid pink;
		 display:grid;  
		  grid-template-columns: repeat(3,200px);
		  grid-template-rows: repeat(3,200px);
		/*  row-gap: 20px;
		  column-gap: 20px;
		 */
		grid-gap: 20px;
		 
		}

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式。

grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。

根据最新标准，grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。

grid-template-areas

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域

container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。

多个单元格合并成一个区域的写法如下,如果某些区域不需要利用，则使用"点"（.）表示。

grid-template-areas: 'a a a'
		             'b b .'
		             '. . .';

还需要在对应的位置写上子项目属性grid-area

.item-1 {
		  background-color: #ef342a;
		  grid-area: a;
		}
		
.item-2 {
		  background-color: #f68f26;
		    grid-area: a;
		}
	......

注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。

比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。

grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。

这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

grid-auto-flow: row;

grid-auto-flow: column;

grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="global.css"/>
		<style>
		
		#container{
		 width: 640px;
		 padding: 0px;
		height: 840px;
		 margin: 50px auto;
		 border: 3px solid pink;
		 display:grid;  
		  grid-template-columns: repeat(3,200px);
		  grid-template-rows: repeat(3,200px);

		grid-gap: 20px;
	
		grid-auto-flow: row;
		 
		}
		
		.item {
	
		  font-size: 2em;
		  text-align: center;
		  border: 1px solid #e5e4e9;
		
		  
		}
		
		.item-1 {
		  background-color: #ef342a;
		  grid-column-start: 1;
		  grid-column-end: 3;
		 
		}
		
		.item-2 {
		  background-color: #f68f26;
		    grid-column-start: 1;
		    grid-column-end: 3;
		}
		
		.item-3 {
		  background-color: #4ba946;
		
		}
		
		.item-4 {
		  background-color: #0376c2;
		   
		}
		
		.item-5 {
		  background-color: #c077af;
		
		}
		
		.item-6 {
		  background-color: #f8d29d;
		}
		
		.item-7 {
		  background-color: #b5a87f;
		}
		
		.item-8 {
		  background-color: #d0e4a9;
		}
		
		.item-9 {
		  background-color: #4dc7ec;
		}
		</style>
	</head>
	<body>
		
		<div id="container">
		  <div class="item item-1">1</div>
		  <div class="item item-2">2</div>
		  <div class="item item-3">3</div>
		  <div class="item item-4">4</div>
		  <div class="item item-5">5</div>
		  <div class="item item-6">6</div>
		  <div class="item item-7">7</div>
		  <div class="item item-8">8</div>
		  <div class="item item-9">9</div>
		</div>
		
	</body>
</html>

现在修改设置，设为row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。

grid-auto-flow: row dense;

grid-auto-flow: column ;

	grid-auto-flow: column dense;

justify/align/place-items

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

这两个属性的写法完全相同，都可以取下面这些值。

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

.container {
  justify-items: start;
}

.container {
  align-items: start;
}

place-items属性是align-items属性和justify-items属性的合并简写形式。

justify/align/place-content

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

这两个属性的写法完全相同，都可以取下面这些值。（下面的图都以justify-content属性为例，align-content属性的图完全一样，只是将水平方向改成垂直方向。）

place-content属性是align-content属性和justify-content属性的合并简写形式。

place-content: space-around space-evenly;

如果省略第二个值，浏览器就会假定第二个值等于第一个值。

grid-auto-columns/rows

有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px; 
}

上面代码指定新增的行高统一为50px（原始的行高为100px）,

划分好的网格是3行 x 3列，但是，8号项目指定在第4行，9号项目指定在第5行。

#container{
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px; 
}

.item {
  font-size: 2em;
  text-align: center;
  border: 1px solid #e5e4e9;
}

.item-1 {
  background-color: #ef342a;
}

.item-2 {
  background-color: #f68f26;
}

.item-3 {
  background-color: #4ba946;
}

.item-4 {
  background-color: #0376c2;
}

.item-5 {
  background-color: #c077af;
}

.item-6 {
  background-color: #f8d29d;
}

.item-7 {
  background-color: #b5a87f;
}

.item-8 {
  background-color: #d0e4a9;
  grid-row-start: 4;
  grid-column-start: 2;
}

.item-9 {
  background-color: #4dc7ec;
  grid-row-start: 5;
  grid-column-start: 3;
}

grid-template/grid

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

从易读易写的角度考虑，还是建议不要合并属性，所以这里就不详细介绍这两个属性了。

5.2子项目属性

grid-column-start/end，grid-row-start/end

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线

1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字。

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}

这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。

.item-1 {
  grid-column-start: span 2;
}

上图的结果用以下代码运行是一样的

.item-1 {
  grid-column-end: span 2;
}

grid-column/row

grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

书写格式为：

.item {
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
}

item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

斜杠以及后面的部分可以省略，默认跨越一个网格。

grid-area

grid-area属性指定项目放在哪一个区域。

#container{
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                     'd e f'
                     'g h i';
}

.item {
  font-size: 4em;
  text-align: center;
  border: 1px solid #e5e4e9;
}

.item-1 {
  background-color: #ef342a;
  grid-area: e;
}

.item-2 {
  background-color: #f68f26;
}

.item-3 {
  background-color: #4ba946;
}

.item-4 {
  background-color: #0376c2;
}

.item-5 {
  background-color: #c077af;
}

.item-6 {
  background-color: #f8d29d;
}

.item-7 {
  background-color: #b5a87f;
}

.item-8 {
  background-color: #d0e4a9;
}

.item-9 {
  background-color: #4dc7ec;
}

指定把1号块放到"e"的位置

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

格式：

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

item-1 {
  grid-area: 1 / 1 / 3 / 3;
}

justify/align/place-self

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

.item-1  {
  justify-self: start;
}

place-self属性是align-self属性和justify-self属性的合并简写形式。

place-self: <align-self> <justify-self>;

place-self: center center;

如果省略第二个值，place-self属性会认为这两个值相等。

键.

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS入门

1.HTML标签基础html为网页标记语言 <标签名>DTD声明新版：<!DOCTYPE html >老版：重邮官网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">标题标签 hn<h1></h1><h2></h2
复制链接

扫一扫

专栏目录