Web前端105天-day09-CSS_flflex-CSDN博客

通过元素的属性名和值找到对应的元素，当作选择器给与样式。

[属性名="属性值"] {} 属性选择器

其他类型选择 [ 属性名 =" 属性值 "] 这种选法更精准，权重值高一些
input[type="password"] {
    margin:15px auto;
}
[属性名^="属性值"] {} 以某些属性值字段开头的

[ 属性名 $=" 属性值 "] {} 以某些属性值字段结尾的

[ 属性名 *=" 属性值 "] {} 值中包含部分字段的

2.结构性伪类选择器

li:nth-child(n) n代表第几个子元素

li:nth - child(xn) x 代表几的倍数子元素

li:nth - child(odd) 奇数子元素

li:nth - child(even) 偶数子元素

li:last - child 最后一个子元素

li:first - child 第一个子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul {
				padding: 0;
				margin: 0;
				list-style: none;
				width: 990px;
				overflow: hidden;
				background-color: yellow;
			}
			li {
				width: 240px;
				height: 200px;
				font-size: 50px;
				color: #fff;
				background-color: red;
				float: left;
				margin-bottom: 10px;
				margin-right: 10px;
			}
			
			ul li:nth-child(12){
				/* background-color:blue; */
			}
			ul li:nth-child(4n){
				margin-right: 0;
			}
			/* 奇数子元素 */
			ul li:nth-child(odd){
				background-color: green;
			}
			/* 偶数子元素 */
			ul li:nth-child(even) {
				background-color: aqua;
			}
			/* 最后一个子元素 */
			ul li:last-child {
				background-color: palevioletred;
			}
			/* 第一个子元素 */
			ul li:first-child{
				background-color: orangered;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>tom</li>
			<li>box</li>
			<li>jack</li>
			<li class="end">lili</li>
			<li></li>
			<li></li>
			<li></li>
			<li class="end"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>

3.目标伪类选择器

理解这个选择器是如何运作的，因为之后很多的css框架中使用到了这个理念

一定要用到 a ， a 有一个锚点，通过其他元素的 id ，放到 a 的 href 中去关联有这个 id 的元素

div:target 目标元素被触发激活的时候

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 300px;
				height: 200px;
				background-color: yellow;
				display: none;
			}
			/* div作为目标被触发的时候改变样式 */
			div:target {
				display: block;
			}
		</style>
	</head>
	<body>
		<a href="#xq">商品详情</a>
		<a href="#pj">商品评价</a>
		<div id="xq">商品详情的相关内容目标详情详情</div>
		<div id="pj">商品评价的相关内容目标评价评价</div>
	</body>
</html>

三、弹性布局

1.弹性布局的概念

弹性布局也成为了flflex布局，flflexbox，弹性盒子，一维布局。

flflex 的底层是浮动，帮你把元素横向，竖向排列的方式都当做布局的格式供你选择。使用 flflex 相关的属性，可以轻松创建各种布局排列模式。

2.flflex容器的指定

容器，会控制其内部项目元素排列方式。容器有容器的属性

项目，进行实际排列就叫项目，项目有项目的属性

当容器已经是 flflex 盒子的时候，项目在容器中浮动，清除浮动就都会失效，同时所有的项目在弹性容器中都会变成块级元素，前提是容器指定了display ： flflex 属性

换句话说，只要是想把元素变成弹性容器，必须有 display 相关的属性，如 flex 或 inline - flex

3.容器属性之主轴方向

主轴的含义是，项目在容器中的排列走向，也是”走向轴“的方向。

主轴根据项目的排列走向分成四个方向：

flflex-direction: row; 默认，不写也行，正向行模式 float ： left

flflex-direction: row-reverse; 反向行模式，相当于 float ： right

flflex-direction: column; 正向列模式

flflex-direction: column-reverse; 反向列模式

4.容器属性之项目在容器中的换行

flflex-wrap: nowrap; 默认不换行，不写也行，不换行会挤压主轴方向的尺寸
flflex-wrap: wrap; 换行
flflex-wrap: wrap-reverse; 反向换行（用的少）

5.容器属性之主轴对齐方式方式

对齐方式是根据主轴的方向决定的位置

justify-content: flflex-start; 起点对齐
justify-content: flflex-end; 终点对齐
justify-content: center; 居中对齐

justify-content: space-between; 两端对齐，在主轴的一行 / 列中，第一个元素贴着起点，最后一个元素贴着终点，其他元素的间距自动计算，相等间距

justify-content: space-around; 元素的左右两侧间距相等，相邻兄弟元素之间的间距会*2展示
justify-content: space-evenly; 平均间距

6.容器属性之交叉轴对齐

交叉轴上必须有富余空间。

align-items: center; 在交叉轴上居中对齐
align-items: flflex-start; 交叉轴起点对齐
align-items: flflex-end;交叉轴终点对齐
align-items: stretch; 项目没有尺寸的时候默认撑满，一旦给了其他的交叉轴属性，默认值将被替换掉

【练习】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				background-color: #dfe0e2;
			}
			.center {
				width: 1000px;
				margin: auto;
				display: flex;
				justify-content: space-between;
			}
			.item {
				width: 200px;
				background-color: #fff;
			}
			.item img {
				width: 200px;
			}
			.item h3 {
				color: #fb7299;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="center">
			<div class="item">
				<img src="./img/1.png" alt="">
				<p>BILIBILIGOODS 小电视 滑雪积木 拼装模型</p>
				<h3>￥129</h3>
			</div>
			<div class="item">
				<img src="./img/2.png" alt="">
				<p>BILIBILIGOODS 小电视 滑雪积木 拼装模型</p>
				<h3>￥129</h3>
			</div>
			<div class="item">
				<img src="./img/3.png" alt="">
				<p>BILIBILIGOODS 小电视 滑雪积木 拼装模型</p>
				<h3>￥129</h3>
			</div>
			<div class="item">
				<img src="./img/4.png" alt="">
				<p>BILIBILIGOODS 小电视 滑雪积木 拼装模型</p>
				<h3>￥129</h3>
			</div>
		</div>
	</body>
</html>