[2019面试准备] ---HTML+CSS知识点小记(部分)

最新推荐文章于 2024-08-14 12:55:09 发布

"William'_

最新推荐文章于 2024-08-14 12:55:09 发布

阅读量116

点赞数

分类专栏：问答文章标签： html css

原文链接：https://juejin.im/post/5c8e4cd3f265da67c87454a0#catalog-chapter-four

版权

问答专栏收录该内容

9 篇文章 1 订阅

订阅专栏

原文：掘金——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、未完待续

"William'_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[2019面试准备] ---HTML+CSS知识点小记(部分)

原文：掘金——jsliangHTML篇学习推荐：《前端工程师手册》；《HTML-菜鸟教程》1、常见浏览器及内核引擎ChromeFirefoxSafariIEOpera排版引擎BlinkGeckoWebkitTridentBlinkjs引擎V8SpiderMonkeyNitroChakraV82、cookies、session、s...
复制链接

扫一扫

专栏目录