CSS day06

css3 core

一.复杂选择器

1.兄弟选择器

兄弟元素，具备同一个爹的同级元素
只能通过哥哥，找弟弟。只能往后找。
①相邻兄弟选择器，通过哥哥找到紧紧挨在后面的弟弟
选择器1 + 选择器2{}
②通用兄弟选择器，通过哥哥，找到后面所有符合要求的弟弟
选择器1 ~ 选择器2{}
项目中的应用场景
一组相同的元素，除了老大以外，其它兄弟都选中，
使用相邻兄弟选择器选择器1 + 选择器2{}

2.属性选择器(在css中使用较少，在js中使用较多)

[attr]{}   匹配带有attr属性的元素
[attr1][attr2]{}  匹配同时带有两个属性的元素
[attr=value]{}   匹配带有attr属性并且取值为value元素
elem[attr]{}    匹配带有attr属性的elem元素
elem[attr=value]{}   匹配带有attr属性并且取值为value的elem元素
属性选择器的模糊查询
[attr^=value]{}  匹配带有attr属性并且以value开头的元素
[attr$=value]{}  匹配带有attr属性并且以value结尾的元素
[attr*=value]{}  匹配带有attr属性并且含有value的元素
[attr~=value]{}  匹配带有attr属性并且含有value这个独立单词的元素

3.复杂的伪类选择器

:link :visited :hover :active :focus
①目标伪类
匹配被激活的锚点，所应用的样式

:target{}

②结构伪类
通过元素的结构关系，来匹配元素
选择器:first-child 匹配这个元素父元素的第一个儿子，这个儿子还得符合选择器
选择器:last-child 匹配这个元素父元素的最后一个儿子，这个儿子还得符合选择器
选择器:nth-child(n) 匹配这个元素父元素的第n个儿子，这个儿子还得符合选择器
n从1开始

③否定选择器
:not(selector){} 符合selector都不选中

.btn:not(:first-child) {  除了第一个按钮以外，其它按钮的左上和左下圆角都清除
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

④绝对丁克

:empty{}

匹配内部不能包含任何元素，文本，空格，回车的空元素
⑤独生子女
:only-child 匹配属于其父元素的唯一子元素
4.伪元素选择器----内容生成
使用css动态的在页面上生成html伪元素，默认情况下，添加了一个行内元素

::before  或者 :before
::after    或者 :after

添加的伪元素的内容使用content属性
伪元素内容生成，可以解决的问题
外边距的溢出，使用伪元素，在父元素的内容区之前生成一个空的table

<div id="d2">
	<div id="d3"></div>
</div>
#d2::before{
  display: table;
  content: "";
}
解决高度坍塌
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

二.弹性布局（重点*******************************************************）

1.什么是弹性布局

主要解决某个元素中的子元素们的布局方式
在垂直和水平方向的对齐提供了极大的便捷

2.关于弹性布局的相关名称

1.弹性容器
设置了display:flex的那个元素。
这个元素本身不是弹性布局，他的儿子们按照弹性布局的方式来显示（不会作用到孙子身上）
2.弹性项目
设置了display:flex的那个元素的子元素。
是真正按照弹性布局方式来显示的元素
3.主轴
项目们的排列方向，称为主轴。4条主轴
4.交叉轴
永远与主轴垂直的一个方向
5.注意，我们通过设置项目在主轴上的对齐方式，和在交叉轴上的对齐方式
来控制项目的布局

3.语法

把父元素变成弹性容器，让儿子们按照弹性的方式显示
display: flex; 将块级元素设置为弹性容器
inline-flex；将行内元素设置为弹性容器

4.容器属性

写在容器中，同时设置所有项目
①设置主轴的方向

flex-direction: row;             →
              row-reverse     ←
              column          ↓
              column-reverse  ↑

②设置项目在主轴方向是否换行
当主轴方向空间不够时，项目是否换行
flex-wrap: nowrap; 不换行，压缩
warp 不压缩，换行
③上面两个属性简写
flex-flow: direction wrap;
④设置项目们在主轴上的排列方式
justify-content: flex-start; 主轴起点对齐
flex-end 主轴终点对齐
center 主轴的中间
space-around 每个项目周围的空间平均分配
space-between 两端对齐
⑤项目在交叉轴上的对齐方式（交叉轴只有两个方向 ↓ →）

align-items: flex-start; 默认值，交叉轴起点
            flex-end  交叉轴终点
            center    交叉轴中间
            baseline  以项目内部的文本基线对齐
            stretch  项目在交叉轴方向的尺寸不写，项目会充满整个交叉轴

5.项目属性

写在某一个项目中，只设置当前这个项目
①设置交叉轴对齐方式

align-self: flex-start; 默认值，交叉轴起点
          flex-end  交叉轴终点
          center    交叉轴中间
          baseline  以项目内部的文本基线对齐
          stretch  项目在交叉轴方向的尺寸不写，项目会充满整个交叉轴
          auto    使用父元素设置的align-items的值

②设置项目的排列顺序

order:  取值为不带单位的数字
        数字越小，越靠近主轴起点
        默认值为0

③flex-grow
如果主轴方向的空间有剩余，会让项目们变大，去填充剩余空间
flex-grow：默认值为0，不填充
设置的值，是把剩余空间分成n分，我要增加n分
④flex-shrink
如果主轴方向的空间不足，项目们如果压缩
flex-shrink:1; 默认值，压缩
把不足的部分按照比例分割，当前项目尺寸减去对应比例
⑤flex-basis
设置项目在主轴方向上的基本尺寸
优先级大于width/height
问题，一般img不使用这个属性，有可能会出bug
flex-basis:px为单位的数字
%
⑥简写方式

flex:grow  shrink  basis;
flex:0  0  25%;