flex布局、css3选择器

一、cs3选择器

https://www.w3school.com.cn/cssref/css_selectors.asp
Class^=,Class*= ,Class$= 其实就是一个使用正则的属性通配符selector

解释：

[attribute^=value]，a[src^="https"]，选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute*=value]，a[src*="abc"]，选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。
[attribute*=value]，a[src$="abc"]，选择其 src 属性中值以 "abc" 结尾的每个 <a> 元素。
用[class*=" icon-"], [class^=icon-]经过测试发现，value可以加双引号，可以不加，效果一致。

二、flex布局语法及实战

语法：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
实战：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
https://codepen.io/LandonSchropp/pen/KpzzGo
http://jsrun.net

1.总源码

<!DOCTYPE html>
<html>
<head>
	<title>用flex布局实现骰子</title>
</head>
<style type="text/css">
	.box-face{
		display: flex;
		display: -webkit-flex; /*webkit内核浏览器必须加上-webkit*/
		justify-content: center;

		/*display: inline-flex; /*行内弹性布局*/		
		/*flex-direction:row;*/
	}


	/*骰子的面 此处利用了cs3的选择器写法：
	凡是class名的结尾为face的类都使用以下样式*/
	[class$="face"] {
	  margin: 16px;
	  padding: 4px;
	  
	  background-color: #e7e7e7;
	  width: 104px;
	  height: 104px;
	  object-fit: contain;
	  
	  box-shadow:
	    inset 0 5px white, 
	    inset 0 -5px #bbb,
	    inset 5px 0 #d7d7d7, 
	    inset -5px 0 #d7d7d7;
	  
	  border-radius: 10%;
	}


	/*骰子的圆点*/
	.pip {
	  display: block;
	  width: 24px;
	  height: 24px;
	  border-radius: 50%;
	  margin: 4px;
	  background-color: #333;
	  box-shadow: inset 0 3px #111, inset 0 -3px #555;
	}
</style>
<body>

	<div class="box-face">
		<span class="item pip"></span>		
	</div>

</body>
</html>

效果：中

justify-content: center; 此属性默认是没写就是左对齐

1.首行左对齐（默认布局）

4.四点布局

<!DOCTYPE html>
<html>
<head>
	<title>用flex布局实现骰子</title>
</head>
<style type="text/css">
	/*骰子的面 此处利用了cs3的选择器写法：
	凡是class名的结尾为face的类都使用以下样式*/
	[class$="face"] {
	  margin: 16px;
	  padding: 4px;
	  
	  background-color: #e7e7e7;
	  width: 104px;
	  height: 104px;
	  object-fit: contain;
	  
	  box-shadow:
	    inset 0 5px white, 
	    inset 0 -5px #bbb,
	    inset 5px 0 #d7d7d7, 
	    inset -5px 0 #d7d7d7;
	  
	  border-radius: 10%;
	}


	/*骰子的圆点*/
	.pip {
	  display: block;
	  width: 24px;
	  height: 24px;
	  border-radius: 50%;
	  margin: 4px;
	  background-color: #333;
	  box-shadow: inset 0 3px #111, inset 0 -3px #555;
	}



	/*容器盒子*/
	.box-face{
		/*display: inline-flex; /*行内弹性布局*/

		/*1.使用弹性布局*/
		display: flex; /*默认首行左对齐*/
		display: -webkit-flex; /*webkit内核浏览器必须加上-webkit*/

		/*2.项目排列方向：row 行:左->右| row-reverse 行:右->左| column 列:上到下| column-reverse; 列:下到上*/
		/*flex-direction:column; */

		/*3.换行排列时*/
		flex-wrap:wrap;

		/*4.主轴行内容对齐：flex-start 左,center 中,flex-end 右; 多项目：space-between | space-around;*/
		/*justify-content:flex-end;*/


		/*5.交叉轴项目对齐:flex-start 上,center 中,flex-end 下; 多项目：space-between  | space-around;*/
		/*align-items: space-between;*/


		/*7.交叉轴上内容对齐*/
		align-content:space-between;
		
	}

	.column {
	 /*8. 项目占主轴宽度*/
	  flex-basis: 100%;
	  display: flex;
	  justify-content: space-between;
	  /*align-content:flex-end;*/
	}

	.item:nth-child(2){
		/*6.项目自控交叉轴对齐方式：auto | flex-start | flex-end | center | baseline | stretch;*/
		/*align-self:center;*/
	}

	.item:nth-child(3){
		/*align-self:flex-end;*/
	}
</style>
<body>

	<div class="box-face">
		<div class="column">
			<span class="item pip"></span>
			<span class="item pip"></span>
		</div>		

		<div class="column">
			<span class="item pip"></span>
			<span class="item pip"></span>
		</div>

	</div>

</body>
</html>

6.6点

其它同4点，每个项目span多加一个

posted @   晨光曦微  阅读(223)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae