前端知识笔记汇总200304

css3弹性盒子

css3的一种新的布局模式

主要记录盒子自身样式与子元素样式

弹性盒子样式

属性名称	属性功能	属性值	例子
display	设置弹性盒子类型	flex,inline-flex	display:flex
flex-direction	设置伸缩盒的起点与终点位置	row, row-reverse, column, column-reverse	flex-direction:column
flex-wrap	子元素宽度超出时是否换行	nowrap, wrap, wrap-reverse	flex-wrap:wrap
justify-content	子元素横向对齐方式	flex-start, flex-end, center, space-between, space-around	justify-content:space-around
align-items	子元素在侧轴方向上的对齐方式	flex-start, flex-end, center, baseline, stretch	align-items:center
align-content	子元素纵轴的对齐方式	flex-start, flex-end, center, space-between, space-around, stretch	align-content:space-around

弹性盒子内部样式

属性名称	属性功能	属性值	例子
flex-grow	多出的空间兄弟节点侵分比例	默认值0	flex-grow: 1;
flew-shrink	超出的空间压缩比例1	默认值1	flex-shrink:2;
flex-basis	父容器为弹性盒子时自己的宽度基准	默认值auto	flex-basis:1
flex	上面三个的复合属性	1，auto,none	flex:1
order	弹盒子元素出现顺序	数值	order:1
align-self	自身在纵轴上的对齐方式	auto, flex-start, flex-end, center, baseline, stretch	align-self:center

媒体查询

根据不同的访问，呈现出不同的效果

语法一

@media 媒体类型 and|not|only （媒体条件）{
样式代码
}

例子：
@media screen and (min-width:1200px){
	body{background:red;}
}
@media screen and (max-width:75rem) {
	body{background: beige;}
}

语法二

<link rel='stylesheet' media='媒体类型 and|not|only (条件）' href='样式文件.css'>

---

1. flew-shrink的算法
   一，超出空间：内部所有子容器宽度之和-外部容器的宽度
   二，加权总和：子容器1宽度它的flew-shrink值+其它容器的这个数据
   三，子容器被移除的值：子容器的宽度flew-shrink/加权总和
   四，子容器的最终宽度：子容器原始宽度-子容器被移除的值
   五，例子 ↩︎