CSS

理解BFC

BFC:Block Formatting Context(块级格式上下文)

块格式化上下文(block formatting context) 是页面 CSS 视觉渲染(visual CSS rendering)这个过程中的一个概念。它是决定块盒子的布局及浮动元素相互影响的一个因素。

块格式化上下文包括了创建该上下文的元素的所有子元素,但不包括创建了新的块格式化上下文的子元素。

创建了BFC的元素就是一个独立的盒子,只有block-level box可以参与BFC,它规定了内部的Block-level Box如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。

页面呈现过程中的前端性能优化点

前端性能优化是使 页面 更快、更好、无错误、用户操作更流畅、体验更好。

从用户输入URL到页面整个呈现在用户眼前,还有用户交互的过程都是性能优化的切入点。

浏览器请求过程

当浏览器请求一个URL的时候,会经过以下过程:阻挡、域名解析、建立连接、发送请求、等待响应、接收数据。

阻挡:不同浏览器对于单个域名的最大并发连接数有一定的限制,如果浏览器同时对某个域名发起多个请求,超多限制就会出现等待,也就是阻挡。

CSS

关于display属性

平时用到的display属性值最多的就是block、inline-block、inline、none等,还有CSS3新加的flex伸缩布局,对于其他属性值是熟悉又陌生,于是有了这个总结。

定义

display属性用来定义建立布局时元素生成的显示框类型,在HTML中,元素默认的display属性值表现是浏览器的默认样式。
display可能的值:none | inline | block | inline-block | contents | list-item | inline-list-item | table | table-cell | table-column | table-column-group | table-footer-group | table-header-cloumn | table-row | table-row-group | table-caption | flex | inline-flex | grid | inline-grid | ruby | ruby-base| ruby-text | ruby-base-container | ruby-test-container | run in | inherit | initial | unset

浏览器内核与JavaScript Navigator 对象

浏览器内核即 rendering engine ,渲染引擎,负责解释网页语法并渲染网页,所以不同浏览器内核对网页渲染效果不同,才会有css hack来兼容不同浏览器,使其显示效果一致。

浏览器内核分类

  • Trident

也被称为“IE内核”
使用Trident内核的常见浏览器有:IE系列、360浏览器(IE内核+webkit双核,Trident为兼容模式)、windows phone 系统浏览器等

  • Gecko

也被称为FirFox内核,跨平台内核
使用Gecko内核的常见浏览器有:Mozilla FireFox等

Sass用法总结

Sass作为CSS的预处理器,对CSS扩展允许使用更多的逻辑来编写样式,让样式代码可读性更高,功能更强大。
Sass最为常用的 嵌套、嵌套属性、变量、@import 就省略,总结一下其他更高级的用法和平时少用被忽略的一些用法。

常用指令

@extend继承

用继承,可以多选择器共享同一套基础样式,如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}

设计配色方法

今天看了很久之前买的一本书《写给大家看的色彩书—设计配色基础》,刚买的时候看过一遍,设计的经验也不够多,所以并没有什么感觉,也没有将书中的理论太用于实践中,今天再看才发现原来书中的一些方法确实能够在我配色拿捏不好的时候用一用,书上所讲的理论都有在实际的作品中解释,所以比较好理解。自己就总结一下配色原理以及使用方法,一些图例就从书上扒下来。

Linux常用操作命令

常用指令

ls     显示文件或目录

-l     列出文件详细信息 l(list)
-a     列出当前目录下所有文件及目录,包括隐藏的 a(all)

mkdir     创建目录

-p     创建目录,若无父目录,则创建p(parent)

cd     切换目录

touch     创建文件

前端代码规范相关整理

更新:

最近看到一份编码规范总结的更完善,更好,贴出来作为参考
编码规范 by @mdo

主要是html、css规范,整理的目的主要是规范自己的代码,养成好的代码书写习惯。

HTML规范-整体结构

HTML基础设施

  • 文件应以“<!DOCTYPE ……>”首行顶格开始,推荐使用“<!DOCTYPE html>”。
  • 必须申明文档的编码charset,且与文件本身编码保持一致,推荐使用UTF-8编码
  • 根据页面内容和需求填写适当的keywords和description。
  • 页面title是极为重要的不可缺少的一项。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>前端代码规范整理</title>
<meta name="keywords" content="前端"/>
<meta name="description" content="前端代码"/>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="apple-touch-icon" href="img/touchicon.png"/>
</head>
<body>
</body>
</html>

写在博客开头/写博客过程中的感受

开始写博客主要是因为自己平时不注意总结整理,从没有记录生活、学习的习惯,这样也不清楚一天一天的过去自己究竟学习了多少,掌握了多少,经历懂得了多少。。。虽然文笔匮乏,但是写给自己看的,也无关了。 2016-08-21 更新 博客写着写着才觉得,很多东西虽然装在脑袋里,但始终是模糊的,看不清全貌和内里,这个时候写的过程中边在脑袋里找,边查阅资料,最后总结出更完整细致实用的东西,这个过程其实就是在让自己的脑袋里的东西不断清醒清醒,补全。

Ilene

Hi I’m Ilene, a front-end developer