属性选择器与弹性布局

# 属性选择器

使用标签中某的属性，或属性=属性值等方式查找到对应的(符合要求的元素)

语法:

[属性名]{样式列表;}选中拥有这个属性名的

[属性名="属性值"]{样式列表;}选中元素中属性名=某个属性值的元素,如[type="text"]

[属性名^="值以什么开头"]{样式列表;}选中元素中属性值以什么开头的元素,开头部分可以是一个字。333333333333333333333333333333333333333333333333333333333333333333333333333333333母或者多个字母[href^="http"]

[属性名$="值以什么结尾"]{样式列表;}选中元素属性值以什么结尾都是元素,结尾部分可以是一个字或者多个字,如[src $="gif"]

[属性名*="包含属性值的某个字符或者多个字符"]{样式列表;}选中元素某属性的值里含有一个或者多个指定字符的元素

[属性名~="某个独立字段"]{样式列表;}选中元素某属性的值里独立的某个字段值的元素，不是只有唯一字段,只要之中含有该独立字段即可

# 目标伪类选择器

目标伪类选择器,需要用到a属性的特性"锚点"同a 的锚点触发找到其需要找寻的元素(目标),通过目标元素的id进行关联

目标元素:target{样式列表;}

多用于制作简单的tab面板效果(切换tab按钮显示不同内容)

div:target{display:block}

# 结构伪类选择器

通过父元素的第几个字元素 找到的是子元素

写法父元素>子元素的选择器:结构伪类{样式列表;}特意强调了子元素的选择器是什么,更精准,权重值更高

父元素>:结构伪类{样式列表}指父元素的结构中第几个元素(没强调子元素是谁)

- 涉及选择器:

父元素>:first-child{样式列表;}父元素中第一个子元素

父元素>:last-child{样式列表;}父元素中最后一个子元素

父元素>:nth-child(n){样式列表;}父元素中第几个子元素,n代表第几个

父元素>:nth-child(xn){样式列表;}父元素的x代表倍数,4n就是4

父元素>:nth-child(odd){样式列表;}odd参数指单数子元素

父元素>:nth-child(even){样式列表;}even参数指双数子元素

# 弹性布局

- 介绍：弹性布局是CSS3主推的一个布局,弹性布局底层就是浮动

- 解决:清除浮动高度坍塌、元素之间的距离、元素的对齐问题

概念：

容器：

项目：

主轴：

交叉轴：

- 容器的属性

display:flex;让容器元素(父元素)使用弹性布局当使用flex布局后,浮动(子),clear(父)等元素失效

默认效果项目横向排列,方向从左向右

容器自动完成解决高度坍塌问题

- 主轴方向,项目在容器中的排列方向

flex-direction: row;           (默认左向右，起点为左，中点为右)

flex-direction: row-reverse;   (右向左,起点为右，终点为左)

flex-direction: column;        (上向下,起点为顶端，终点为底端)

flex-direction: column-reverse;(下向上,起点为底端，终点为顶端)

- 项目在容器中换行

项目总宽度在容器中超出容器宽度是否换行显示

flex-warp:no warp;默认不换行,元素会出现等比例的挤压(缩小)

flex-wrap: wrap;换行,保持项目元宽度、高度

flex-wrap: wrap-reverse;换行,第一行会在下方,逐级向上显示

- 主轴换行的简写

flex-flow:主轴的排序的属性值 项目换行的属性值

例如:横向换行显示 flex-flow:row warp;

- 主轴的对齐方式

justify-content: flex-start;(默认起点对齐)

justify-content: flex-end;(终点对齐)

justify-content: center;(居中对齐)

justify-content: space-between;(两端对齐)

justify-content: space-around;(两个项目之间的距离,是左右两侧元素距离的2倍)

- 交叉轴的对齐方式

交叉轴是主轴垂直的一条轴，让项目沿着这条轴对齐

交叉轴上需要有富余的空间显示对齐效果

默认项目没有高度,默认值是stretch;项目有高度,默认起点对齐

align-items: flex-start;起点对齐

align-items: flex-end;  终点对齐

align-items: center;    居中对齐

align-items: stretch;   项目没有高度,自动设为auto,占满整个容器的高度

align-items: baseline;  基线对齐,第一行文字的基线

- 多轴线对齐

当项目元素出现换行,则每一条就是一条轴线,其对齐方式是按照多条主轴的交叉轴方向的对齐方式

容器得有富裕空间

默认,如果项目有高度,默认的不是任何一种对齐方式

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-between;

align-content: space-around;

align-content: stretch;

- 项目属性(次序)

order:0;默认0 按照元素结构排序

值越大,排序越靠后,值越小,排序越靠前,可以是负值

值相同,按照元素结构排先后

- 放大比例

前提是子元素宽度总和小于父元素宽度,一定要有富裕空间

flex-grow:0 默认不放大

当项目比例增大时,按照所有放大元素的比例和分之几来分富裕空间

- 缩小比例

前提是子元素总宽度大于父元素宽度,才会出现默认缩小效果

flex-shrink:1;缩小比例为默认1,等比例成1倍缩小

值越大缩小的倍数越大,负值无效

flex-shrink:0;代表不缩小,保持设置的宽度

- 自动尺寸

可以设置元素宽度,但当自动尺寸和宽度同时存在时,宽度失效

flex-basis:长度;

对放大比例的影响有自动宽度，会重新结合所有兄弟的宽度计算重新计算富裕空间会

对缩小比例的影响,他会按照新的自动尺寸缩小比例

项目属性的简写

flex:放大比例、缩小比例、自动尺寸;

默认值 flex:0 1 auto;

常用设置flex:0 0?px; 不放大不缩小 占的尺寸是多少