第一次培训心得

第一次培训心得

主要内容

• 规范代码

  主要是class的命名

• 盒子模型

  • 各参数含义

    

    ​ 一个独立的盒子模型由content（内容）、border(边框)、padding(内边距)和margin(外边距)组成。
    1.content：对应盒内内容
    2.border:对应包装盒的纸壳，有厚度
    3.padding:位于边框内部，是内容与边框的距离，对应包装壳的 填充部分
    4.margin:位于边框外部，是边框与外部的间隙

  • 偶然有趣的发现（未完待续）

    上下两个div设置margin为20px，两个div的间距是多少，为什么？

    ​ 盒子的大小由内容、内边距和边框决定，外边距只是用来把周围的东西挤开并不算在盒子的大小里面。也就是说外边距只与自身有关，并不影响其他盒子的距离计算。
    ​ 换句话说就是上下两个div设置margin，最终的距离由大的margin决定。例如：上下两个div设置margin分别为20px，30px，两个div的间距是30px。

    利用盒子画圆

    ​ 首先建个div，然后把div的宽高设置同样大小，最后把div的边框弧度设为50%；

• flex布局\来自

  • 基本概念

    ​ 布局的传统解决方案，基于盒子模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如垂直居中就不容易实现。

    ​ 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称"项目"。

  • 常用属性

    1.flex-direction属性

    flex-direction属性决定主轴的方向(即项目的排列方向)。

    常用两值（即flex-direction: row | column ;）

    ​ a.row(默认值)：主轴为水平方向，起点在左端。

    ​ b.column：主轴为竖直方向，起点在上沿。

    2.flex-wrap属性

    默认情况下，项目都排在一条线(又称轴线)上。flex-wrap属 性定义，如果一条轴线排不下，如何换行。(即flex-wrap: nowrap | wrap 😉

    ​ a.nowrap(默认):不换行。

    ​ b.wrap:换行,第一行在上方。

    3.justify-content属性

    justify-content属性定义了项目在主轴上的对齐方式。(即justify-content:flex-start | flex-end | center | space-between | space-around;)

    ​ a.flex-start（默认值）：左对齐

    ​ b.flex-end：右对齐

    ​ c.center： 居中

    ​ d.space-between：两端对齐，项目之间的间隔都相等

    ​ e.space-around：每个项目两侧的间隔相等。所以，项目 之间的间隔比项目与边框的间隔大一倍

    

    4.align-items属性

    align-items属性定义项目在交叉轴上如何对齐。

    ​ a.flex-start：交叉轴的起点对齐。

    ​ b.flex-end：交叉轴的终点对齐。

    ​ c.center(常用)：交叉轴的中点对齐。

  • 注意事项

    1.在盒子里先申明(即display:flex;)；

    2.以上属性都是容器的属性；

再一次写高级作业的思考

• 即使是重复工作也可能遇到不同的bug

• 实现一个网页有很多种途径，麻烦程度和成果的优美程度会有区别

• 熬夜容易上瘾

  ---