第二次前端培训

css、js和弹性盒子

一：css余下部分

1. 课前说的额外内容：./表示上一层目录
   ../上一层目录（若想往前推就在前面加点）
2. css是对html进行排版的
   css盒之模型包括四个部分:
   Margin(外边距) - 清除边框外的区域，外边距是透明的。(如果设的是两个值，那么第一个表示上下，第二个表示左右；如果是四个值，那么他们分别表示上右下左。)
   Border(边框) - 围绕在内边距和内容外的边框。（border有不同的边框，用的比较多的时border-radius：设置圆角）
   Padding(内边距) - 清除内容周围的区域，内边距是透明的。
   Content(内容) - 盒子的内容，显示文本和图像。
   1.元素类（布局）
   块级元素：默认display为block。
   块级元素独占一行，当你定义一个新的元素的时候，它会重新开一个新行。
   内联元素：display为inline，排列在同一行（不可变），如果想要改变就用line height，但是不建议使用。
   行内块状元素：结合前两种的有点。
   内元素参照父元素设计。
   float：left、right会让你的元素从左（右）开始排列，但会浮在标准流之上

   二：js

3. 在js中对于变量的生命是弱定义的，有let和var，但是建议使用let，const用于声明变量，不可更改。
   js的引用用script。
4. 在js中的一些常见函数
   • math round：取整
   • console.log（）在括号里面里可以写任何东西，表示：在控制台把你的函数打印出来。
5. 循环语句
   基本结构(一个例子)
   function test（）{
   for(i=1,i<=10;++i)
   {console.log(i)};
   }
   还可以用while循环，但是区别于for，while循环里面只有一部分，而for有三部分。
6. 判断语句
   基本结构
   if（）括号内写判断条件{}
   else{}
   if可以嵌套，但是每一个if必须有相应配对的else
7. 获取input里的内容
   y=document.getElementById("").value;console.log(y)
   也可以用
   y=document.getElementsByclass("").value;console.log(y)
   但是class里含的元素多，出来的可能是一个列表

三：弹性盒子自学内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

1. flex-direction;
   • flex-direction 属性指定了弹性子元素在父容器中的位置。
   • row：横向从左到右排列（左对齐），默认的排列方式。
   • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
     column：纵向排列。
   • column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
2. justify-content 属性
   内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
   1. align-items 属性
      align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
   2. flex-wrap 属性
      flex-wrap 属性用于指定弹性盒子的子元素换行方式
3. align-content 属性
   align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
   1. 对齐
      设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。
   2. 居中
      使用弹性盒子，居中变的很简单，只需要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:
   3. flex
      flex
      flex 属性用于指定弹性子元素如何分配空间。

除此之外还有dom树和interhtml，因为内容简单，在此不做过多叙述

总结：

在前端中要学习的还有很多，要更好的利用群里的学习资源，以及网站教程上的东西进行自学，并且组建好自己写前端的逻辑思维，以便更好的创作。

王彩琴