一个小练习后的总结
前阵子在慕课网上找了一个视频来练手,是制作移动端的一个贺卡界面,那是一个小的项目,但是所谓“麻雀虽小五脏俱全”,老师带我们过了一遍简单而又基本完整的开发流程:
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