Web前端105天-day09-CSS

day09

目录

前言

一、复习

二、CSS3高级选择器

1.属性选择器

2.结构性伪类选择器

3.目标伪类选择器

三、弹性布局

1.弹性布局的概念

2.flflex容器的指定

3.容器属性之主轴方向

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

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

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

 7.项目属性之项目排序

总结

---

前言

第九天学习开始

一、复习

• 隐藏和显示
  • 完全消失 display: none
  • 隐藏占位 visibility: hidden;
  • 透明度 opacity: 0;
• 文本和字体
  • 字号
  • 字重
  • 字体系列
  • 文本颜色
  • 行间距
  • 首行缩进
  • 文本对齐方式
  • 文本修饰线
  • 垂直对齐方式
  • 文本的省略

二、CSS3高级选择器

1.属性选择器

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

• [属性名="属性值"] {} 属性选择器
• 其他类型选择 [ 属性名 =" 属性值 "] 这种选法更精准，权重值高一些

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 第一个子元素

	
		
		
		
	
	
		

			
tom
			
box
			
jack
			
lili
			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

		
	

3.目标伪类选择器

•  理解这个选择器是如何运作的，因为之后很多的css框架中使用到了这个理念 
• 一定要用到 a ， a 有一个锚点，通过其他元素的 id ，放到 a 的 href 中去关联有这个 id 的元素
• div:target 目标元素被触发激活的时候

	
		
		
		
	
	
		商品详情
		商品评价
		
商品详情的相关内容目标详情详情
		
商品评价的相关内容目标评价评价
	

三、弹性布局

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; 项目没有尺寸的时候默认撑满，一旦给了其他的交叉轴属性，默认值将被替换掉

【练习】

	
		
		
		
	
	
		

			

				
				
BILIBILIGOODS 小电视 滑雪积木 拼装模型
				
￥129
			
			

				
				
BILIBILIGOODS 小电视 滑雪积木 拼装模型
				
￥129
			
			

				
				
BILIBILIGOODS 小电视 滑雪积木 拼装模型
				
￥129
			
			

				
				
BILIBILIGOODS 小电视 滑雪积木 拼装模型
				
￥129
			
		
	

 7.项目属性之项目排序

• order属性是项目属性，实际作用不是改变标签结构，而是改变显示的排序
• order：0 默认值，大家都是0就按照标签结构顺序走
• 值为整数数值，可以为负值
• 值越大排序越靠后，值越小排序越靠前

---

总结

第九天学习结束