24-hour前端基础补充计划

HTML & CSS

元素

文档流中的元素分为两类：行内（inline/内联）和块级（block）元素
- 行内元素不能设置宽高、上下内外边距（即margin-top/margin-bottom/padding-top/padding-bottom)，只能由内容决定；实际上设置上下内边距时会影响background的范围，但不会影响文本的位置
- 位于正常文档流的元素上下块级元素的外边距会发生外边距折叠（margin collapsing)

盒模型

从box-sizing属性看盒模型。
box-sizing：content-box | border-box
对于content-box，width=内容框；对于border-box，width=内容+padding+border。

浮动

什么是浮动？
浮动原本用于让文本围绕图片或文本周围（常见于报纸杂志中那种效果）但由于正常文档流是纵向排列，传统上浮动常用于进行多列(横向）布局。
浮动引发的副作用
设置浮动的元素故名思义会脱离normal flow，其父元素的高度将无法被撑起（这往往不是我们想要的结果）而且会造成其后未设置float原本希望处于float元素之下单独占行的元素的内容围绕在浮动元素周围。
如何解决浮动带来的副作用
清除（clear)和闭合（enclose）浮动。
所谓清除浮动就是在float元素其后的元素添加clear属性，让其不会围绕浮动元素左右。闭合浮动就是把浮动元素的父元素撑起来。具体说来方法有

在其后元素上设置clear属性为both/left/right

其后元素包括使用伪元素选择器after添加虚拟元素，并设置高度为0，使其不可见，下面的content的属性值是啥都无所谓啦

.wrapper:after{
  content:'\0020';
  height:0;
  display:block;
}

或者添加额外无意义的元素


  这里是内容

闭合元素的方法基本原理就是在父元素上创建一个BFC（block formatting context) ，包括将父元素也变成浮动元素，或者添加overflow属性值非默认visible的值（一般为hidden）等

块格式化上下文简单说来就是一个虚拟的矩形区域，这个区域包含其内部包括浮动元素在内的所有元素
注：使用inline-block就不会出现需要清除浮动的问题，不过如果要[支持ie6和ie7]需要额外的工作，具体做法参见MDN；使用inline-block时，vertical-align会影响其显示，一般需要设为top

定位

定位有五种，static/relative/absolute/fixed和sticky。

static就默认啦，正常文档流中
设置relative后，通过调节tblf（top/bottom/left/right）可以让元素保留原本位置的同时悬浮于其他内容之上。一般单独使用，将元素设为其他子元素的参考包含块。
absolute与relative的差别在于，设置absolute会让元素脱离文档流，一般搭配tblf和在某相对定位的祖先元素使用。例如下拉菜单，弹出框。（注意，若没有相对祖先元素，则相对初始包含块，即视口，初始包含块包括html元素，不是body元素）
fixed与absolute的区别在于，fixed不是相对于其包含块，而是视口（如浏览器窗口），同样与tblf结合使用。
sticky属性可以让元素有两种混合表现，跟随正常流的元素一起运动以及运动到tblf指定的位置固定。打个比方，就像是在tblf指定的位置上隔了一层网，sticky元素无法穿过这层网。

flex布局

传统上可以兼容各浏览器的布局使用float和positioning，flex布局提供了一种更简单的布局方式，可以实现传统布局难以/无法实现的布局，例如垂直居中元素。
了解flex布局要记得几个概念，主轴（主轴起点/终点）、交叉轴（交叉轴起点/终点）。在容器添加属性display: flex，其内部元素就会按flex方式布局；通过 flex-direction可以指定主轴方向为row/column。
作为容器的元素属性值还有

align-items （在交叉轴上的位置，对于其控制的个体可以用flex-start/flex-end调整align-self的值）
justify-content （内容对齐，主轴方向，center/space-around/space-between）
flex-flow（flex-direction主轴方向 flex-wrap多余内容是否换行)
在容器内的元素常用的属性包括
flex：数字最小值（flex-grow flex-basis)
order: 调整元素出现的位置（默认值为0，可以设负值）

display:none和visibility:hidden区别

前者不占空间，后者仍占空间。

使用较新的属性，例如`box-sizing`时要加前缀，保证其跨浏览器显示

*{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

*注：webkit内核的浏览器包括谷歌，Safari等；moz代表火狐等

媒体查询

@media screen and (min-width: 600px){
  /* 窗口大于600px的样式*/
}
@media screen and (max-width: 599px){
  /* 窗口小于599px的样式*/
}

布局模型
布局模型分三种：流/浮动/层模型，大概了解三个概念的意思就行。流模型就是我们熟知的文档流/正常流，浮动就是使用float属性的布局方式，层模型就是使用position相关属性的布局方式，注意z-index只有应用于定位元素（非static）才有效。

布局

两栏布局七种实现两栏布局的方式
三栏布局圣杯布局 = 双飞翼布局

Photoshop切图学习

[慕课视频源地址]（https://www.imooc.com/video/9818）

PS小技巧

新建项目：宽1920*2000 72 设置为预设参数（中间的视区1200）
快速选择图层：选择工具，上方确定为图层，Ctrl+Click- - 选择元素即会自动跳转至相应元素图层。
视图：打开智能参考线和标尺
需要保存的窗口设置：图层，历史记录，信息和字符（需要从窗口找到打开）-> 字符单位改成像素、RGB，- - 打开文档大小
文件->首选项->单位和标尺：都改为像素
将上述设置保存为工作区

快捷键
shift 往往与加有关
alt 与减有关
v 选择工具
m 选区工具
ctrl+d 删除选区
内容识别功能会把选取与选区外的环境融合
alt+delete 前景色填充
ctrl+R 打开标尺