弹性布局

 

弹性布局

1. 一个盒子,如果将其display属性设置为 flex ,该盒子变为弹性盒(弹性容器),该盒子的所有子元素,自动变为弹性项目。弹性盒本身按照自身的定位体系排列,弹性布局影响的仅仅是弹性盒中的弹性项目

2. 属性

l flex-direction :更改主轴方向

l row 行 默认值

l row-reverse 反向 主轴从右向左

l column 列 按主轴从上往下排列

l column-reverse 按主轴从下往上

 

l justify-content :更改主轴对其方式

l flex-start 默认值 主轴起点一次排列

l flex-end 主轴终点对齐

l center 主轴中线对齐

l space-between 左右项目靠边,中间平均分布

l space-around 所有项目平均分布 

 

l align-items: 更改侧轴对齐方式

l stretch 默认值 拉伸

l flex-start 侧轴起点对齐

l flex-end 侧轴终点对齐

l flex-center 侧轴中线对齐

l flex-wrap

 

l wrap (换行)

l nowrap (不换行)

align-content

规则:弹性项目宽度自动时,表示适应内容的宽度和高度。margin为自动时,会吸收弹性容器的剩余空间。

3. 项目属性

(1) order 更改弹性项目的排列顺序,顺序为从小到大进行排列

(2) flex-shrink 更改弹性项目的压缩比例

l 1 默认

l 0 不压缩

(3) flex-grow 更改弹性项目的增长比例

l 0 默认 不增长

(4) flex-basis 弹性项目在压缩或增长前的基础宽度,若不设置,默认值为auto,表示与width属性值相同

(5) 速写 flexgrow shrink basis; 同时设置增长、压缩、基础值

水平居中(包含块中居中)

1. 定宽,左右marginauto。(常规流块盒、弹性项目[不用定宽]

2. 弹性盒设置justify-content: center,让弹性项目在主轴上居中。(普遍适应)

3. 父元素设置text-align: center,让其内部的行盒、块盒居中。

4. 绝对定位元素,left:0; right:0; 定宽;左右margin: auto

5. margin-left:50%; transform:translateX( -50%)[margin,padding相对于包含块宽度的百分

] 【终极方案】

垂直居中

1. 单行文本垂直居中,设置父元素的line-height为包含块高度。

2. 弹性盒设置align-items:center,让弹性项目在侧轴上居中。

3. 绝对定位元素,top0bottom0;定高;上下margin:auto

4. 绝对定位元素,top50%transform:translateY(-50%)。【终极方

案】

绝对定位元素水平垂直居中

left50%top50%transformtranslate-50%-50%);

行盒和块盒的区别

1. 行盒不可设置宽高,垂直方向上所有尺寸不占用空间,但水平方向上的marginborder

padding可以。块盒所有尺寸有效。

2. 行盒会在合适位置被截断,而块盒不行。

3. 行盒只有常规流(浮动和绝对定位会强行将之转换为块盒),排列时,与其他行盒首尾相

接。块盒有多种定位体系,每种定位体系按照自身规则排列。

4. 行盒之间和行盒内部会空白折叠。块盒不会。

伪类选择器:

1. :hover,鼠标悬浮时的效果

2. :activea/button元素激活(按钮)时的效果

3. :linka元素未访问过的样式

4. :visiteda元素访问过的样式

5. :checked,单元或多选被选中的样式

6. :focus,表单元素聚焦的样式

7. :firstchild,第一个子元素

8. :lastchild,最后一个子元素

9. :nthchild(2),第二个子元素;

10. :nthchild(2n)/:nthchild(even),第偶数个子元素;

11. :nthchild(odd),第奇数个子元素

伪元素选择器

1. ::before,在内部生成一个子元素,作为第一个子元素,然后选中它

2. ::after,在内部生成一子元素,作为最后一个子元素,然后选中它

3. :selection,选中被框选的文字

后缀\0IE5~IE7

前缀*IE5~IE7

前缀_IE5~IE6

设置color属性,让非IE浏览器为绿色,IE5~IE6为红色,IE7为棕色,IE8~IE11为黑色

colorgreen

color\0:black

colorbrown

color:red

height的百分比相对于包含块的高度,其有效的前提条件是:包含块的高度是可计算的

html设置100%,是视口的高度。

 

 

 

 

 

 

 

posted @ 2019-08-03 15:51  小样Q  阅读(210)  评论(0编辑  收藏  举报