小项目总结（一）

一个小练习后的总结

前阵子在慕课网上找了一个视频来练手，是制作移动端的一个贺卡界面，那是一个小的项目，但是所谓“麻雀虽小五脏俱全”，老师带我们过了一遍简单而又基本完整的开发流程：
1、需求分析、开发技能分析、再到性能优化分析，这一步完成开发的前期分析准备；
2、切图，获取图片等资源；
3、重构，编写网页的结构；
4、前端界面，包括表现层、行为层、交互层等；
5、优化；

在这个项目的过程中，遇到几个我不懂的点，在这里我对他们进行补充

1.box-sizing: border-box  
2.:before & ::before
3.选择相同的内容，更改

box-sizing

首先回忆下盒子模型：分 IE 盒子模型、标准盒子模型（W3C）

               width                             盒子宽度

IE 盒子模型： content+padding+border三部分 | margin*2+width
标准盒子模型： content部分 | margin*2+ border *2+ padding *2+width

box-sizing：content-box; 表示标准的盒子模型，
box-sizing：border-box 表示IE盒子模型。
默认的情况下是标准盒子模型。

 // 标准的盒子模型
   #boxer{
       width: 200px;
       padding: 20px;
       border: 2px solid red;
   }
</style>
<body>
   <div id="boxer"></div>

这里写图片描述

// IE 盒子模型
#boxer{
       width: 200px;
       padding: 20px;
       border: 2px solid red;
       box-sizing: border-box;
   }
</style>
<body>
   <div id="boxer"></div>

这里写图片描述

：before & ：：before、：after & ：：after

1.他们是伪元素，而 :active 和 :hover 他们是伪类

2.：before 是在css2 中提出来的，：：before是在css3 中提出来的

3.用于给某个css 选择器增添装饰性的内容

4.创建的伪元素默认是在所依附的元素之上的，我们可以使用z-index:-1 降低层级

5.他们有特有的属性content，其中添加的内容默认是内联元素，并且content不可以省略

content: normal|string|attr()|url()|counter()|none
normal为默认值，表示不做任何指定内容或改动；、

string表示指定添加的文本内容；

attr()表示插入轩泽的元素的属性值；

url()表示插入一个外部资源，如图像，音频等；

counter()指定一个计算器作为添加内容；

none表示无任何内容。

6.在文档中它不实际改变什么，相反的，它们是像幽灵一般的元素插入在css中，他们对用户是可见的，可以通过css控制。

7.伪元素不会出现在DOM中，这些元素不是真正的元素，js无法操作它。因此，它们不是可用的。所以，不要使用伪元素生成内容，是您的网页的可用性和可访问性的关键。

伪元素的存在意义

1.把html的结构灵活化，相当于一个元素附着两个新的元素，而又不增加无意义纯布局html元素，使得html更简洁纯粹。

2.用于实现遮罩层、背景、小icon等

3.扩大点击区域

VS code 快捷键

1.快速复制： Shift+Alt+Up 或 Shift+Alt+Down

2.垂直方向移动选择的内容：Alt+Up 或 Alt+Down

3.代码行缩进 :Ctrl + [ 、 Ctrl + ]

4.同时选中所有匹配： Ctrl+Shift+L

小项目总结（一）

猜你喜欢