free code camp 刷题记录 css (flex布局)

遇到困难  别百度  闷头多看w3c和菜鸟教程~  

flex布局

父元素部分
概念理解: 添加后 该元素会成为flex容器~ 容器~这样他的子元素就会这样排布了。
【是一个子元素还是多个子元素啊】
1/ flex-direction

【该元素添加这个属性】 默认是row 也就是水平
记忆方法/普通水平，字少正常化
column，字多是自己改的要付费，你看竖着排列也不常见，还有row-reverse 反着~
反着是reverse 别打错了--->反着 为我死（记忆方法
【忽然想到 text-align：justify这个棒棒的对齐方式
2/ justify-content

【这里有个content！！】
常用center 排列在中间~

space between 左右两边两个保镖
space around 在中间守卫 间距恰好的两个门柱
默认好像是flex-start

3/ align-items
flex-start end
center是真的中心 baseline是相对于水平基线(就是真才摆放 没有给拉到中心啦）
默认是strech~ 是拉伸的。拉伸到那么长，如果你是有背景色，并且【没有设置高度的话】
设置了高度就不会给拉伸了0 0 设置高度应该像flex start了

4/ flex-wrap

【注意这个是wrap，不是arp】【实践出真知】
CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。默认情况下，flex 容器会调整项目大小，把它们都塞到一起。如果是行的话，所有项目都会在一条直线上。
使用flex-wrap属性可以使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定~
nowrap (默认！）
wrap
wrap-reserve
子元素部分
快速设置（下面三种）
flex: 1 0 10px;会把项目属性设为flex-grow: 1;、flex-shrink: 0;以及flex-basis: 10px;。
属性的默认设置是flex: 0 1 auto;。
（1） flex:2 2 150px;与（2）flex1 1 150px
在容器大于300px(两个子元素之和）时，grow大的一号占2 小的 二号 占1
在小于300px时 一号被压缩到二倍还多 二号则是一倍的样子
缩小这里看， 应该b不是严格的1：2
-------------------
<1>/ flex-grow

则是放大的。。。~
就是比重吧
<2>/ flex-shrink
this 子元素。以上四个都是父元素的属性~
看起来 要给所有子元素都设置上才生效0 0
如果外围容器太小，里面的东西（子元素）就会自动压缩。
相反的是，数值越大，它会被压缩的越厉害~ 1 3
那么 3 的那个与另一个相比会受到 3 倍压缩。
【这个不太对头。线放着】
<3>/ flex-basis
属性指定了项目在 CSS 进行flex-shrink或flex-grow调整前的初始大小。嘤嘤嘤
<4> order

只是先后顺序 和html 默认的先后相反。接受数字参数 可以用负数~~
<5>align-self

是子元素的哦！
允许值与align-items一样，并且它会覆盖align-items的值。
float、clear和vertical-align等调整使用的属性都不能应用在 flex 子元素
（这个默认值。。。。）

学术解释
/justify-content
回忆一下，把 flex 容器设为一个行，它的子元素会从左到右逐个排列，把 flex 容器设为一个列，它的子元素会从上到下逐个排列。子元素排列的方向被称为 main axis（主轴）。对于行，主轴水平贯穿每一个项目；对于列，主轴垂直贯穿每一个项目。
flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠左放，对于列是把项目都靠顶部放。
flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠右放，对于列是把项目都靠底部放。
space-between：项目间保留一定间距地在主轴排列。第一个和最后一个项目会被挤到容器边沿。例如，在行中第一个项目会紧贴着容器左侧，最后一个项目会紧贴着容器右侧，然后其他项目均匀排布。
space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，空间会均匀分布在所有项目两边

align-items的可选值包括：

flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠顶部放，对于列是把项目都靠左放。
flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠底部放，对于列是把项目都靠右放。
center：把项目的位置调整到中间。对于行，垂直居中（项目上下方空间相等）。对于列，水平居中（项目左右方空间相等）。
stretch：拉伸项目，填满 flex 容器。例如，排成行的项目从容器顶部拉伸到底部。
baseline：基线对齐地排列。基线是字体相关的概念，可以认为字体坐落在基线上。

 

其他零星的

定位
-----position relative 
单纯这样的属性也有效，不过是在它本来的路径上进行的偏移 因此left就是离左边更远的偏移-->向右移动
top就是-->(表现为)向下移动。
【不脱离不影响 设置top。。xx 位置变更】
------position absolute
这个就是针对父元素脱离了~
【脱离标准文档流。不会影响其他的】 
top left 什么的0 0(好)
------position fixed
【脱离】(但是是固定住的)

float:左右偏移~
浮动元素不在文档流中，它向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。通常需要用width属性来指定浮动元素占据的水平空间

【行内元素--->内联元素!】
图片默认是内联元素[inline!]，但是可以通过设置其display属性为block来把它变成块级元素。这样图片也可以使用

<input 框>
1/ type="text" placeholder="xxx" 就是输入框

表单：
<form action="" >给一个action属性，就可以向服务器递交表单了
17:08 2020/7/19
css 盒模型（面试考
在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。
设置成relative 再给个bottom。会偏移 不过因为是relative 并不会改变该元素在普通流布局所占的位置，也不会对其它元素的位置产生影响。 
top:15px 
那么在【原来的】位置上又去偏移了15px

+==============新增 0716

freecode camp 让你改掉用中文打字法打code的坏习惯嘤嘤嘤

【cssj基础部分】

1 、id选择器高于类class选择器。【id优先级别高~ 会覆盖class】

2、内联样式的优先级高于 ID 选择器，【内联】=【行内样式】<p > 

3、Class 选择器的优先级高于继承样式

class="class1 class2"  HTML 元素里应用的 class 的先后顺序无关紧要，但在style的声明里，后面的优先级更高！！后面会覆盖前面的。如果它们定义了一样的东西~ 

4、text-align: justify;可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。最后一行靠左边~~ 

这个就是word里面长短不齐的话可以均匀分开一点

5、创建变量： （单纯css）

:root {--penguin-skin: gray;}

引用：background: var(--penguin-skin,black);  而已qwq

啊！ 后面的 逗号加上black 这个是回退值如果不支持就用回退

【前面的两行 -- 这个是要！自己写的 这个是变量的名字 反正也是区分用也可！（规范

:root相当于是根元素，作用域是整个页面，优先极也同理，下面再设置一个，就会覆盖父元素的

6、ol 是有序列表 ul是无序 li是子元素。

 

【响应式web部分】

1、图片自适应

img {
  max- 100%;能让图片以 100% 的最大宽度适应其父容器的宽度，但图片不会拉伸得比原始宽度还宽。（如果不到就没100%，因为是max-width，如果再宽就不会被拉伸了。

  display: block;
  height: auto;

将 display 属性设置为 block 可以让 image 标签从内联元素（默认值）更改为块级元素。设置 height 属性为 auto 保持图片的原始宽高比。【宽高比】,高固定的话 宽最大的超越过了就会拉伸.
}

2、vw vmin

• vmin： 如 70vmin 的意思是视窗中较小尺寸的 70% (高度 VS 宽度)。 vmax同理

 

【弹性盒子布局】

网页的用户界面（User Interface 缩写 UI）

原来*弹性盒子*就是flex布局！弹性布局