CSS_day06

一.复杂选择器
1.结构伪类选择器
1.:only-child
匹配的元素是属于其父元素中的唯一子元素。
2.否定伪类
将满足指定选择器的元素给排除在外。
语法：:not(selector){…}
3.伪元素选择器
1.::first-letter或:first-letter
作用：用于匹配元素的首字符
2.::first-line或:first-line
作用：用于匹配元素的首行
注意：如果首字符与首行样式冲突时，优先使用首字符样式。
3.::selection
作用：匹配被用户选取的内容。
注意：只能修改文本颜色和背景颜色。
练习：创建一个div元素，内容随意.
1.设置div中首字符样式为加粗，红色，大小为32px,右外边距为20px.
2.将首行的文本设置为橙色，斜体
3.用户选取内容时文本颜色为蓝色，背景为灰色。
4.内容生成
1.什么是内容生成
使用css动态的向元素中插入一段内容。
2.伪元素选择器
1.:before或::before
作用：匹配到某元素的内容区域之前。

(:before)床前明月光

		 2.:after或::after
		   作用：匹配到某元素的内容区域之后。
     <p>床前明月光(:after)</p>
   3.属性
		   属性：content
			 作用：向匹配到的位置处增加的内容
			 取值：
			    1.字符串，用""引起来。
					2.url(图片路径)

     练习：2分钟
			   <p>学而时习之，不亦说乎</p>
				 <p>有朋自远方来，不亦乐乎</p>
			 输出显示如下：
				 子曰：学而时习之，不亦说乎
				       ——《摘自论语》
				 子曰：有朋自远方来，不亦乐乎
				       ——《摘自论语》
	 3.解决问题
	   1.上外边距溢出
		   1.在父元素的第一个子元素位置处
			 2.添加一个table标记，并且标记的内容为空
			 ex:
			 选择器::before{
	        content:"";
			    display:table;
	      }
   2.解决浮动元素对父元素高度带来的影响
		   1.在父元素的最后一个子元素位置处
			 2.添加一个空的块级元素（display:block）
			 3.设置其clear属性的值为both
			 ex:
			 .类选择器:after{
	        content:"";
		      display:block;
		      clear:both;
	      }

二.弹性布局
1.什么是弹性布局
弹性布局(Flexible layout)是一种布局方式，主要解决某元素中“子元素”的布局方式，为布局提供最大的灵活性。
2.弹性布局的相关概念
1.弹性布局容器
子元素的父元素称为容器
2.项目
要实现布局的子元素，称为项目
3.主轴
项目们排列方向的一根轴，称为主轴
如果主轴是x轴，那么y轴就是交叉轴
4.交叉轴
与主轴垂直相交的一根轴，称为交叉轴
3.语法
1.弹性（flex）容器
将元素变为flex容器后，那么所有子元素都将变为flex项目，都允许按照弹型布局的方式排列。
2.属性:display
取值：
1.flex 将块级元素变为容器
2.inline-flex 将行内元素变为容器
注意：
1.元素设置为flex容器之后，子元素的float,clear,vertical-align将失效。
2.元素变为flex容器之后，子元素尺寸允许被修改（把子元素变为块级）
3.容器属性
1.flex-direction
作用:指定容器的主轴及其排列方向
取值：
(1)row 默认值，即主轴为x轴，起点在左端
(2)row-reverse 主轴为x轴，起点在右端
(3)column 主轴为y轴，起点在顶端
(4)column-reverse 主轴为y轴，起点在底部
2.flex-wrap
作用：当一个主轴排列不下所有项目时，项目是否换行显示。
取值：
1.nowrap：默认值，即空间不足时也不会换行，项目自动缩小。
2.wrap:换行
3.wrap-reverse:换行并反转
3.flex-flow
作用：是flex-direction和flex-wrap的缩写形式。
取值：
1.row nowrap（默认值）
2.direction wrap
4.justify-content
作用：定义项目在主轴上的对齐方式。
取值：
1.flex-start 在主轴的起点对齐。
2.flex-end 在主轴的终点对齐。
3.center 在主轴上居中对齐。
4.space-between 两端对齐。
5.space-around 每个项目两端的间距相同。
5.align-items
作用：定义项目在交叉轴上的对齐方式。
取值：
1.flex-start 交叉轴上起点对齐。
2.flex-end 交叉轴上终点对齐。
3.center 交叉轴上居中显示。
4.baseline 交叉轴上基线对齐。
5.stretch 如果项目未设置尺寸，在交叉轴上占满所有空间。
练习：
网页中添加一个div，id为parent，设置parent的边框,在parent中再添加两个子元素div，id分别为d1和d2设置d1和d2的尺寸和背景颜色,将父元素变为容器，并设置d1和d2在容器中水平、垂直都居中显示，并且当容器缩小时，不改变项目的尺寸。（3分钟）
4.项目属性
该组属性只能设置在某一个项目元素上，只控制一个项目，不影响其他项目。
1.order
作用：定义项目的排列顺序，值越小，越靠近起点，默认值为0。
取值：整数数字，无单位。
2.flex-grow
作用：定义项目的放大比例，如果容器有足够的剩余空间，项目按照比例放大。
取值：整数数字，无单位。
默认值0，不放大。
取值越大，占据剩余空间的比例越多。
3.flex-shrink
作用：定义项目缩小比例，即容器空间不足时，项目按照比例缩小
取值：整数数字，无单位，值越大缩小的越快。
默认值1，空间不足时，则等比缩小。
取值为0，则不缩小。
4.align-self
作用：定义当前项目在交叉轴的对齐方式
取值：
1.flex-start 起点对齐
2.flex-end 终点
3.center 居中
4.baseline 基线对齐
5.stretch 未设定项目高度时占满父元素空间
6.auto 自动继承父元素align-items的属性值。
练习：
用弹性布局完成如图所示效果
三.转换
1.什么是转换
改变元素在页面中的位置，大小，角度以及形状的一种方式。
2D转换：只在x轴和y轴上发生转换效果
3D转换：增加z轴的转换效果
2.转换属性
1.转换属性
属性：transform
取值：
1.none：默认值，无任何转换效果
2.transform-function
表示1个或多个转换函数
如果是多个转换函数，中间用空格隔开
2.转换原点
属性：transform-origin
取值：数值/百分比/关键词
2个值，表示原点在x轴和y轴的位置。
3个值，表示原点在x轴y轴和z轴的位置。

		 默认的原点是在元素的中心位置：(center,center)/(50%,50%)

3.2D转换
1.位置（位移）
1.什么是位移
改变元素在页面的位置。
2.语法
属性：transform
取值：
1.translate(x)
指定元素在x轴上位移距离
取值为正，元素向右移
取值为负，元素向左移
2.translate(x,y)
指定元素在x轴和y轴上位移一定距离
x:同上
y:指定元素在y轴上位移距离
取值为正，元素向下移
取值为负，元素向上移
3.translateX(x)
4.translateY(y)
2.缩放
1.什么是缩放
改变元素在页面中的尺寸（大小）
2.语法
属性：transform
取值：
1.scale(value) 取值为数字
value：横向和纵向缩放比例相同
默认值1，不缩放
value>1：放大
0<value<1：缩小
value<0：放大(水平和垂直方向都翻转180度)

       2.scale(x,y)
				   x:横向缩放比例
					 y:纵向缩放比例
       3.单向缩放
				   scaleX(x)只在横向缩放
					 scaleY(y)只在纵向缩放
 3.旋转
	   1.什么是旋转
		   改变元素在页面上的角度
   2.语法
		   属性：transform
			 取值：
			    rotate(ndeg)
					n取值为正，顺时针旋转
					n取值为负，逆时针旋转

	课后作业：
	  1.在页面中创建两个div，id分别为d1和d2,设置其尺寸为200*200px,添加不同背景;
		  (1)将两个div都定位到父元素的左上角显示;
		  (2)将d1先旋转45deg,再向右位移50px;
		  (3)将d2向右位移50px，再旋转45deg，对比两个div的效果。
  2.用弹性布局完成"课后作业.png"布局效果。