原文:掘金——jsliang
HTML篇
学习推荐:《前端工程师手册》;《HTML-菜鸟教程》
1、常见浏览器及内核引擎
Chrome | Firefox | Safari | IE | Opera | |
---|---|---|---|---|---|
排版引擎 | Blink | Gecko | Webkit | Trident | Blink |
js引擎 | V8 | SpiderMonkey | Nitro | Chakra | V8 |
2、cookies、session、sessionStorage、localStorage
cookies:存储于浏览器端的数据。可以设置 cookies 的到期时间,如果不设置时间,则在浏览器关闭窗口的时候会消失。
session:存储于服务器端的数据。session 存储特定用户会话所需的属性和配置信息。
cookies 和 session 的区别在于:
- cookies 数据存放在客户的浏览器上,session 数据存放在服务器上。
- 前端都是裸君子,没有安全可言,cookies 可能会被黑客利用作数据欺骗。所以重要信息记得存 session。
- session 如果在生效期内量过大,会占用服务器性能。
- 单个 cookies 保存的数据不能超过 4 K,很多浏览器限制一个站点保存最多 20 个 cookies。
sessionStorage:生命周期存在于标签页或窗口,用于本地存储一个会话(session)中的数据,这些数据会随着窗口或者标签页的关闭而被清空。
localStorage:生命周期是永久的,除非用户主动清除浏览器上存储的 localStorage 信息,否则它将会永久存在。
sessionStorage 和 localStorage 操作方法:setItem、getItem 以及 removeItem。
localStorage.getItem('name'); // 获取 name 的值
localStorage.setItem('name', 'jsliang'); // 设置 name 的值为 jsliang
localStorage.removeItem('name'); // 删除 name 的值
Css篇
书籍:《CSS设计指南》、《CSS权威指南》
1、Css盒模型
CSS 中有个属性叫 box-sizing:
(1)border-box 中,整个 div 的宽、高,包括 margin、padding、border。
(2)content-box 中,整个 div 的宽、高,则不包括上面元素。
ps:使用box-sizing:content-box定义height、margin、padding分别为100、10和10px,则最后此div的高度为100+10+10=120px。
如果你在设计页面中,发现内容区被撑爆了,那么,请检查下现在的 border-box 是什么,最好在引用 reset.css 的时候,就对 border-box 进行统一设置,方便管理。
2、Css reset
在前端开发中,如果不采用统一标准,那么会产生千奇百怪的 bug。所以为了减少后期 bug 的出现,前端开发人员会重置一遍 CSS 样式,尽可能地使开发的网页在各个浏览器相差不大。
可以去 百度/必应/google 搜索选择并使用不同版本的样式重置
3、CSS 选择器
- 常用选择器
通配符:*
ID 选择器:#ID
类选择器:.class
元素选择器:p、a 等……
后代选择器:p span、div a 等……
伪类选择器:a:hover 等……
属性选择器:input[type=“text”] 等……
子元素选择器:li:firth-child、p:nth-child(1) 等…… - css选择器权重排行
!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认
4、Css常见布局—两列式/三列式/…
(1)flex方式?推荐使用
(2)float方式
详见:CSS常见布局
5、CSS3新特性
- transition:过渡 — 入口
- transform:旋转、缩放、移动或者倾斜 — 入口
- animation:动画—入口
- gradient:渐变 — 入口
- shadow:阴影
- border-radius:圆角
- 将它们扔到同一个 HTML 文件上,小伙伴拷贝到本地上打开,可以看到一个拥有渐变的小球,做着横向运动,如果你鼠标移动到它上面,它的宽度会放大,并且进行倾斜。
<style>
div {
width: 100px;
height: 100px;
border-radius: 50px;
background: linear-gradient(red, orange);
box-shadow: 10px 10px 5px #888888;
position: relative;
transition: width 2s;
animation: mymove 5s infinite;
}
div:hover {
width:300px;
transform: rotate(7deg);
}
@keyframes mymove {
from { left: 0px; }
to { left: 200px; }
}
</style>
6、BFC
- 什么是 BFC?
BFC 就是 块级格式上下文,它是一个独立的渲染区域,让处于 BFC 内部的元素和外部的元素相互隔离,使内外元素的定位不会相互影响。
一定的 CSS 声明可以生成 BFC,浏览器对生成的 BFC 有一系列的渲染规则,利用这些渲染规则可以达到一定的布局效果。 - 为什么需要 BFC 呢?
它可以防止 margin 元素重叠(div 中包含 ul,而 div 与 ul 之间的垂直距离,取决于 div、ul、li 三者之间的最大外边距,这时候给 ul 一个 display:inline-block 即可解决这个问题)
清除内部浮动(div 中包含 ul,而 ul 采用 float:left,那么 div 将变成一长条,这时候给 div 加上规则使其变成 BFC 即可) - 如何产生 BFC?
根元素;float的值不为none;overflow的值不为visible;
display: inline-block;
position: absolute/fixed; - 工作中一般可能不会顾及这个:
float 很少使用了,尽可能使用 flex
css reset 一般会清除掉一些问题,减少 BFC 的使用。 - 参考:《我对BFC的理解》
参考:《清除浮动》
7、行内元素和块级元素
- 行内元素
宽度和高度由内容决定,与其他元素共占一行的元素,我们将其叫行内元素。例如:<span>、<i>、<a> 、img、strong、em等…… - 块级元素
默认宽度由父容器决定,默认高度由内容决定,独占一行并且可以设置宽高的元素,我们将其叫做块级元素。例如:<p>、<div>、<ul>、table、h1~h6、form、等……
详细可见:行内元素与块级元素
8、行内样式、内嵌式、链接式以及导入式
-
行内样式:
<p style="color: #fff; backgournd: deepskyblue;"></p>
-
链接式:通过将 <style> 上的 CSS 提到指定的 CSS 文件上,然后通过 <link> 的方式在 HTML 上链接起来。
-
内嵌式:将 CSS 写在 <head>标签内,并且用 标记进行声明
-
导入式:
<style> @import url(reset.css); </style>
-
优先级:行内 > 内部样式表 > link > @import(其中内部样式表和link看具体先后顺序)
9、水平垂直居中
推荐使用flex布局—参考:flex布局
- HTML
<div class="container">
<div class="child"></div>
</div>
- CSS-flex布局实现
.container {
margin: 0 auto;
width: 300px;
height: 200px;
background: deepskyblue;
display: flex;
/* 实现元素水平居中 */
justify-content: center;
/* 实现元素垂直居中 */
align-items: center;
}
.child {
width: 100px;
height: 100px;
background: #fff;
}
- CSS-absolute定位方式实现
.container {
position: relative;
width: 300px;
height: 200px;
background: pink;
margin: 0 auto;
}
.child {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
/* 下面两种方式均可 */
/* margin-top: -50px;
margin-left: -50px; */
transform: translate(-50%, -50%);
background: #fff;
}
- 水平居中总结
行内元素:display: inline-block; text-align: center;
块级元素:margin: 0 auto;
Flex:display: flex; justify-content: center; - 垂直居中总结
行内元素:行高 = 元素高~line-height: height
Flex:display: flex; align-items: center;
10、未完待续