flow.frontend

发表于 | 分类于 |

flow.frontend

从 H5 开始学习

因本来就是搞移动端的, 而在界面上这两者极为相似, 所以有些概念的契合应该很高, 选择这个入手应该对我来说比较好吧

  • 响应式网页

    在不同的屏幕, 不同的终端上都能正常显示的一种手段

有个小码哥的教程, 讲者已经在简书有博客更新, 不过好像没有太全

目前是按照这个视频来学习, 在mdn上拖关于前段的更权威的教程

完成区权威的教程在:

mdn官网
开始学习

的简介: 标签化的语言, 确定网页上的元素的结构
CSS: 对网页上元素进行描述, 确定位置, 颜色等信息
JS: 可以在浏览器运行的语言.

js的脚本在html, css之后引用. 因为在HTML完成渲染加载后, 才能拿到里面的数据, 放前面的话, 如果脚本出错, 会截断后面的加载运行

CSS

常见的使用的CSS属性

文字属性

  • font:
    1.规定文字样式的属性
    格式：font-style: italic;
    取值：
    normal ： 正常的， 默认就是正常的
    italic : 倾斜的
    快捷键：
    fs font-style: italic;
    fsn font-style: normal;

2.规定文字粗细的属性
格式： font-weight: bold;
单词取值:
bold 加粗
bolder 比加粗还要粗
lighter 细线， 默认就是细线
数字取值：
100-900之间整百的数字

快捷键
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;

3.规定文字大小的属性
格式：font-size: 30px;
单位：px（像素 pixel）
注意点： 通过font-size设置大小一定要带单位， 也就是一定要写px
快捷键
fz font-size:;
fz30 font-size: 30px;

4.规定文字字体的属性
格式：font-family:”楷体”;
注意点：
1.如果取值是中文， 需要用双引号或者单引号括起来
2.设置的字体必须是用户电脑里面已经安装的字体
快捷键
ff font-family:;
可以给字体设置备选方案
格式:font-family:”字体1”, “备选方案1”, …;
注意点: 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  p{
            /*
            font-style: italic;
            font-weight: bold;
            font-size: 10px;
            font-family:"楷体";
            */
            font:bold italic 10px "楷体";
        }

 缩写格式:
font: style weight size family;
例如:
font:italic bold 10px "楷体";

注意点:
1.在这种缩写格式中有的属性值可以省略
sytle可以省略
weight可以省略
2.在这种缩写格式中style和weight的位置可以交换
3.在这种缩写格式中有的属性值是不可以省略的
size不能省略
family不能省略
4.size和family的位置是不能顺便乱放的
size一定要写在family的前面, 而且size和family必须写在所有属性的最后

文本属性

上面是控制文字的了, 这里是控制文本, 即格式, 对齐什么的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
p{
    text-decoration: none;
    text-align: left;
    text-indent: 2em;

}
1.文本装饰的属性
格式:text-decoration: underline;
取值:
underline 下划线 | line-through 删除线 | overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线
快捷键:
td  text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;

2.文本水平对齐的属性
格式: text-align: right;
取值:
left 左 | right 右 | center 中
快捷键
ta text-align: left;
tar text-align: right;
tac text-align: center;

3.文本缩进的属性
格式: text-indent: 2em;
取值:
2em, 其中em是单位, 一个em代表缩进一个文字的宽度
快捷键
ti text-indent:;
ti2e text-indent: 2em;

颜色属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
p{
    /*color: red;*/
    /*color: rgb(255,0,0);*/
    /*color: rgba(255,0,0,1);*/
    color: #FF0000;
    color: #F00;
    /*color: rgba(255,0,0,0.2);*/
    color: #ffee00;
    color: #fe0;
    color: #769abb;
}

1.5十六进制缩写
在CSS中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位
例如:
#FFEE00 == #FE0

注意点:
1.如果当前颜色对应的两位数字不一样, 那么就不能简写
#123456;

2.如果两位相同的数字不是属于同一个颜色的, 也不能简写
#122334

选择器

就是对于元素的定位, 有广泛的适用性, 即设定的选定会选定当前文档的符合条件的所有元素, 然后在这个元素应用设定的CSS

可以选择的是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
标签 {}; // 称为标签选择器
.class {}; // 类选择器, 文档中可以有多个相同的class, 在HTML中每个标签可以同时绑定多个类名格式:<标签名称 class="类名1 类名2 ...">
#id {};	// id选择器, 一般html文档中的id设置的值是唯一的, id的命名规范和很多语言的变量是一样的, 一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的
#id .class p a {}; 后代选择器, 可以一直像查找路径一样找下去, 满足这个后代路径的所有标签, 不一定是连续的
#id>.class>p>a {}; 子元素选择器, 之间需要用>符号连接, 并且不能有空格, 和上面不同, 连下去的是子元素
p#id.class {}; 交集选择器, 相当于 && 的关系来筛选元素, 之间没有空格, 所以一般标签写前面
p,#id,.class {}; 并集选择器, 相当于 || 来选择元素, 用逗号链接
p+a {}; 相邻兄弟选择器, 作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性(CSS2)
p~a {}; 相邻兄弟选择器, 作用: 给指定选择器后面的所有选择器选中的所有标签设置属性(CSS3)
p:only-child {}; // 1.同级别的第几个
				 // :first-child 选中同级别中的第一个标签
				 // :last-child 选中同级别中的最后一个标签
				 // :nth-child(n) 选中同级别中的第n个标签
				 // :nth-last-child(n) 选中同级别中的倒数第n个标签
				 // :only-child 选中父元素中唯一的标签
				 // 注意点: 不区分类型

				 // 2.同类型的第几个
				 // :first-of-type 选中同级别中同类型的第一个标签
				 // :last-of-type  选中同级别中同类型的最后一个标签
				 // :nth-of-type(n) 选中同级别中同类型的第n个标签
				 // :nth-last-of-type(n)  选中同级别中同类型的倒数第n个标签
				 // :only-of-type 选中父元素中唯一类型的某个标签
				 // :nth-child(odd) 选中同级别中的所有奇数
				 //	:nth-child(even) 选中同级别中的所有偶数

				 //	:nth-child(xn+y)
				 //	x和y是用户自定义的, 而n是一个计数器, 从0开始递增

p[attribute=value] {};  根据指定的属性名称找到对应的标签, 然后设置属性, 也可以限定值
p:nth-child(odd) {} 选中同级别中的所有奇数
p:nth-child(even) {} 选中同级别中的所有偶数

// 关于另一个属性选择器的用法
<!--
1.属性的取值是以什么开头的
[attribute|=value] CSS2
[attribute^=value] CSS3
两者之间的区别:
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开

2.属性的取值是以什么结尾的
[attribute$=value] CSS3

3.属性的取值是否包含某个特定的值得
[attribute~=value] CSS2
[attribute*=value] CSS3
两者之间的区别:
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到
-->
<img src="" alt="wwwabcmmm">
<img src="" alt="www-abc-mmm">
<img src="" alt="www abc mmm">

// 通配符选择器: * {}

CSS 的特性

继承性

作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
注意点:

  1. 并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
  2. 在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
  3. 继承性中的特殊性
  4. 1a标签的文字颜色和下划线是不能继承的
  5. 2h标签的文字大小是不能继承的

层叠性

作用: 层叠性就是CSS处理冲突的一种能力

注意点:
层叠性只有在多个选择器选中”同一个标签”, 然后又设置了”相同的属性”, 才会发生层叠性

优先级

作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
优先级判断的三种方式

  1. 间接选中就是指继承
    如果是间接选中, 那么就是谁离目标标签比较近就听谁的
  2. 相同选择器(直接选中)
    如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
  3. 不同选择器(直接选中)
    如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
    id>类>标签>通配符>继承>浏览器默认
优先级之 “!important”
1
2
3
4
*{
            color: blue !important;
            font-size:10px;
        }

作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高

注意点:
1.!important只能用于直接选中, 不能用于间接选中
2.通配符选择器选中的标签也是直接选中的
3.!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
4.!important必须写在属性值得分号前面
5.!important前面的感叹号不能省略

优先级之权重问题

1.什么是优先级的权重?
作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高

2.权重的计算规则
2.1首先先计算选择器中有多少个id, id多的选择器优先级最高
2.2如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
2.3如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
2.4如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的
也就是说优先级如果一样, 那么谁写在后面听谁的

注意点:
1.只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的

常用属性

据我观察, 它的属性缩写, 其实就是将属性中的属性通过一定的顺序写在一起, 这样就直接写值, 不用写属性的属性名了

  • background-color:
  • background-image: url(images/girl.jpg);
  • background-repeat: 属性, 就是专门用于控制背景图片的平铺方式的,取值:repeat 默认,在水平和垂直都需要平铺, no-repeat 在水平和垂直都不需要平铺, repeat-x 只在水平方向平铺, repeat-y 只在垂直方向平铺
  • background-position: 背景定位, 取值: left | top | bottom | right, 水平 垂直, 注意点:
    同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色
  • border: 边框的宽度 边框的样式 边框的颜色;
  • margin & padding: 边距, 注意: 在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

1.什么是CSS盒子模型?
CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子

结论
1.在HTML中所有的标签都可以设置
宽度/高度 == 指定可以存放内容的区域
内边距 == 填充物
边框 == 手机盒子自己
外边距 == 盒子和盒子之间的间隙

注意点:
1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
2.如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性
3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin
margin本质上是用于控制兄弟关系之间的间隙的

注意点:
1.在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中
2.margin: 0 auto; 只对水平方向有效, 对垂直方向无效

清空默认边距

1.为什么要清空默认边距(外边距和内边距)
在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等, 所以在企业开发中, 编写代码之前第一件事情就是清空默认的边距

2.如何清空默认的边距
格式
*{
margin: 0;
padding: 0;
}

3.注意点
通配符选择器会找导(遍历)当前界面中所有的标签, 所以性能不好
企业开发中可以从这个网址中拷贝
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

  • 背景属性缩写的格式: background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
  • background-attachment: 这个属性就是专门用于修改关联方式的, 取值: scroll(随屏幕滚动) | fixed(固定不滚动背景)
  • CSS精灵图: 合成图片的一种技术, 即请求返回一整张图, 然后根据需要其中的那张图片的位置, 设置元素的背景, 然后设置位置, 使得元素的展示正好可以展示这个图片

浮动出现的副作用的清除

因为在浮动时, 不能撑起父元素的高度, 在浮动时, 根据浮动的规则会有一些不想要的情况, 这里就需要排除这些情况

设置高度
1.清除浮动的第一种方式
给前面一个父元素设置高度

注意点:
在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少
设置hidden
可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来

1.在标准流中内容的高度可以撑起父元素的高度
2.在浮动流中浮动的元素是不可以撑起父元素的高度的
设置clear属性
1.清除浮动的第二种方式
给后面的盒子添加clear属性

clear属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素

注意点:
当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效
隔墙法
1.清除浮动的第三种方式
隔墙法

2.外墙法
2.1在两个盒子中间添加一个额外的块级元素
2.2给这个额外添加的块级元素设置clear: both;属性

注意点:
外墙法它可以让第二个盒子使用margin-top属性
外墙法不可以让第一个盒子使用margin-bottom属性

3.内墙法
3.1在第一个盒子中所有子元素最后添加一个额外的块级元素
3.2给这个额外添加的块级元素设置clear: both;属性

注意点:
内墙法它可以让第二个盒子使用margin-top属性
内墙法它可以让第一个盒子使用margin-bottom属性

4.外墙法和内墙法区别?
外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度

5.在企业开发中不常用隔墙法来清除浮动
伪元素选择器
1.什么是伪元素选择器?
伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素

2.格式:
标签名称::before{
    属性名称:值;
}
给指定标签的内容前面添加一个子元素

标签名称::after{
    属性名称:值;
}
给指定标签的内容后面添加一个子元素

1.清除浮动的第四种方式
利用伪元素选择器清除浮动
本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样

注意点:
IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性

定位方式

定位流分类

  1. 相对定位 relative
  2. 绝对定位 absolute
  3. 固定定位 fixed
  4. 静态定位
相对定位

position: relative;

2.什么是相对定位?
相对定位就是相对于自己以前在标准流中的位置来移动

3.相对定位注意点
3.1相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
3.2在相对定位中同一个方向上的定位属性只能使用一个
3.3由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
3.4由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

4.相对定位应用场景
4.1用于对元素进行微调
4.2配合后面学习的绝对定位来使用

绝对定位

position: absolute;

1.什么是绝对定位?
绝对定位就是相对于body来定位

2.绝对定位注意点
2.1绝对定位的元素是脱离标准流的
2.2绝对定位的元素是不区分块级元素/行内元素/行内块级元素

绝对定位-参考点

1.规律
1.默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
2.1只要是这个绝对定位元素的祖先元素都可以
2.2指的定位流是指绝对定位/相对定位/固定定位
2.3定位流中只有静态定位不行

3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点

绝对定位-注意点

1.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点

2.一个绝对定位的元素会忽略祖先元素的padding

绝对定位-子绝父相

相对定位弊端:
相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面

position: relative;
left: -42px;
top: -18px;

绝对定位弊端:
默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化

position: absolute;
left: 526px;
top: 90px;

子绝父相
子元素用绝对定位, 父元素用相对定位

绝对定位-水平居中

1.如何让绝对定位的元素水平居中
只需要设置绝对定位元素的left:50%;
然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

固定定位

1.什么是固定定位?
固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动

注意点:
1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间
2.固定定位和绝对定位一样不区分行内/块级/行内块级

z-index 属性

1.什么是z-index属性?
默认情况下所有的元素都有一个默认的z-index属性, 取值是0.
z-index属性的作用是专门用于控制定位流元素的覆盖关系的

1.默认情况下定位流的元素会盖住标准流的元素
2.默认情况下定位流的元素后面编写的会盖住前面编写的
3.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面

注意点:
1.从父现象
1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面
1.2如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面

伪类选择器

1.通过我们的观察发现a标签存在一定的状态
1.1默认状态, 从未被访问过
1.2被访问过的状态
1.3鼠标长按状态
1.4鼠标悬停在a标签上状态

2.什么是a标签的伪类选择器?
a标签的伪类选择器是专门用来修改a标签不同状态的样式的

3.格式
:link 修改从未被访问过状态下的样式
:visited 修改被访问过的状态下的样式
:hover 修改鼠标悬停在a标签上状态下的样式
:active 修改鼠标长按状态下的样式

4.注意点
4.1a标签的伪类选择器可以单独出现也可以一起出现
4.2a标签的伪类选择器如果一起出现, 那么有严格的顺序要求
编写的顺序必须要个的遵守爱恨原则 love hate
4.3如果默认状态的样式和被访问过状态的样式一样, 那么可以缩写

1.在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面
2.在企业开发中和a标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)
3.在企业开发中和a标签文字/背景相关的都写在伪类选择器中

过度效果

1,过渡三要素
1.1必须要有属性发生变化
1.2必须告诉系统哪个属性需要执行过渡效果
1.3必须告诉系统过渡效果持续时长

2.注意点
当多个属性需要同时执行过渡效果时用逗号隔开即可
transition-property: width, background-color;
transition-duration: 5s, 5s;

/告诉系统过渡动画的运动的速度/
transition-timing-function: linear; 取值有: ease, ease-in, ease-out, ease-in-out.

JS

常用的一些函数

  • document 对象: 即当前页面的文档
  • querySelector: 选择器, 可以选择文档中的某个元素节点: document.querySelector(‘选择器语言’),
  • localStorage: 本地缓存, 可以存储一些数据: localStorage.setItem(‘key’, value)
  • prompt: 交互函数, 带有一个输入框的弹窗, 可以让用户输入信息, 返回值就是用户的输入: prompt(‘showing string’)

小程序

配置相关软件不针对 .appservice.open.weixin.qq.com 和 .debug.open.weixin.qq.com 进行代理