day16-李大人part1

day16

一：flex布局的子元素

1·1 重置子元素的交叉轴对齐方式

align-self：

• 属性值 auto默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。

• Stretch 元素被拉伸以适应容器。

• Center 元素位于容器的中心。

• flex-start 元素位于容器的开头。

• flex-end 元素位于容器的结尾。

1·2层级关系·

• order: 排序，值越大 越靠后，可以为负数

1·3分配剩余空间

• flex-grow: 分配剩余空间，
  默认情况下，值为0，元素有多宽，就占多大空间，
  当给某一个元素设置flex-grow:1，该元素会占满整个剩余空间，
  如果每个人都设置了，代表整个空间的分配的总份数

• flex-basis: 子元素的宽

• flex-shrink: 压缩
  默认值1 表示压缩 0:不压缩

• 弹性盒设置自行超出父元素显示滚动条
  给每个子项设置 flex-shirnk:0;不压缩
  父元素设置 overflow:auto;溢出显示滚动条

• 复合写法

  flex: flex-grow(0) flex-shrink(1) flex-basis(auto);
  flex:1; 类似于flex-grow:1;占满整个剩余空间

二：css3新增选择器

2·1层级选择器

• 后代选择器 选择器 选择器{}
• 子代选择器 选择器>选择器{}【注意元素的继承性】
• 相邻的兄弟之间选择器 选择器+选择器{}【只能选择到后面的兄弟选择器】
• 相邻的兄弟们 选择器~选择器 只能选择到后面的兄弟们

2·2属性选择器

可以选择到自定义的属性

• 标签名[属性名] 根据属性名选择
• 标签名[属性名=“属性值”] 属性名和属性值要匹配
• 标签名[属性名^=“值”] 以该值开头
• 标签名[属性名$=“值”] 以该值结尾
• 标签名[属性名*=“值”] 包含该值

2·3结构性伪类选择器

child系列：

• 父元素 子元素:first-child{} 父元素中的第一个孩子 这个孩子必须是老大

• 父元素 子元素:last-child{} 父元素中的最后一个孩子 这个孩子必须是老小

• 父元素 子元素:nth-child(n) 父元素中的第几个孩子,第几个必须和孩子的第几个位数对上，

  n是自然数,也可以是odd 奇数 even 偶数 也可以是表达式 比如4n 4的倍数

type系列：

• 父元素 子元素:first-of-type{} 很多该子元素中的第一个

• 父元素 子元素:last-of-type{} 很多该子元素中的最后一个

• 父元素 子元素:nth-of-type(n) 很多该子元素中的第几个

  n是自然数,可以是odd奇数even 偶数 ,也可以表达式 比如2n

2·4目标伪类：

需要结合锚点使用

• 目标元素:target{} 跳转到该板块之后,出现的样式

2·5状态伪类

• :enabled 表单可编辑状态

• :disabled 表单不可编辑的状态

• :checked 表单选中的状态

• :focus 表单获取焦点的状态

• :enabled 表单可编辑状态

• :disabled 表单不可编辑的状态

• :checked 表单选中的状态

• :focus 表单获取焦点的状态

• ::selection 元素选中的高亮状态,一般情况只改背景色和字体颜色