本书籍是自己学习 HTML + CSS 前端技术的学习笔记，笔记最开始发布到个人博客，现在整理到这里方便查看。
作者在写作和整理过程中花费了大量时间和精力，另外服务器费用也是一笔不小的开支，如果你觉得我的文章和书籍对你有所帮助，可以请我喝杯咖啡或者农夫山泉：
如果在阅读过程中有任何疑问，可以去作者博客对应页面留言， 你也可以从我的体系树中找到对应文章。
| 首页 | 归档 | 体系 | 分享 | 友链 | 统计 | 音乐 | 美图 | 关于 |
当前标签 / CSS / 总共13篇
CSS 背景混合模式
混合模式
现代浏览器令人吃惊的是尽然支持和 PhotoShop 类似的图像混合模式，喜欢摄影或是熟悉 PhotoShop 的朋友应该对这个比较了解，我们先来普及一下什么是图像的混合模式。
要理解混合模式需要理解，图层、通道、RGB模式原理。
图层 比较好理解，就是我们的图像通过一层一层的叠加，最终形成我们所看到的图像，换句话说就是拆解图像到不同图层进行编辑。 通道 一般我们在 PhotoShop 中说通道通常指的是颜色通道和 alpha 通道。
上面显示的是 RGB 通道， 每个通道的像素都代表这种种颜色从 0~255 之间的一个值，三个通道叠加就会形成这个图像，而 alpha 通道是一个虚拟通道，比如我们可以创建一个选区来生成一个 alpha 通道。
RGB模式 RGB是光色三原色，通过对红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。
目前的显示器大都是采用了 RGB 颜色标准，在显示器上，是通过电子枪打在屏幕的红、绿、蓝三色发光极上来产生色彩的，目前的电脑一般都能显示32位颜色，有一千万种以上的颜色。如下图所示，假设三个灯都不开就是 0x000000 (黑色)，只开红灯就是 0xff0000 (红色），三个灯都开就是 0xffffff (白色)， rgb 三个值为等值的时候如 0x666666 是灰值（没有色相），RGB 模式称之为加色模式（相加成白色）。
CSS 中的混合模式是通过 background-blend-mode 和 mix-blend-mode 实现的。
CSS 多背景和渐变
设置多个背景
<body>
<section></section>
</body>
section {
width: 429px;
height: 265px;
background: url(image2.gif) no-repeat, url(image1.png);
}
上面给 section 设置了多个背景（用逗号隔开），默认第一个背景图片在最上面（image2.gif），类似的我们可以添加多个背景。
边框
CSS 的盒模型在设置 padding 和 border 的时候总是给设置的宽度增加对应的额外像素， 这样在我们设置 100% 的窗口的时候就计算起来特别麻烦，后来引入了一个 border-box 来解决这个问题。
section {
width: 429px;
height: 265px;
padding : 10px;
border : 5px solid rgb(235, 244, 246);
}
section {
width: 429px;
height: 265px;
padding : 10px;
border : 5px solid rgb(235, 244, 246);
box-sizing : border-box;
}
CSS flexbox弹性布局
初识flex
之前我们写布局都是基于浏览器的盒模型，通过浮动的方式来排列界面的，这种方式有很多浏览器的 bug 和困扰我们的问题， 而 flexbox 的出现彻底解决了这些之前被人们诟病的问题。
flexbox 是基于两个坐标轴来实现的， 类似于 Android 中的线性布局 LinearLayout， 如果我们要使一个容器成为 flexbox 就需要设置 display: flex;。
flex 容器内部的元素称为 flex item, 水平轴称为 main axis, 竖直轴称为 cross axis, 大致布局如下：
基本使用
我们先来定义一个 flexbox 容器, 在里面放几个 flexitem：
<body>
<div class="flexbox">
<div class="flexitem">我是 DIV 标签内容</div>
<p class="flexitem">我是 P 标签内容</p>
<span class="flexitem">我是 SPAN 标签内容</p>
</div>
</body>
.flexbox{
width: 600px;
height: 200px;
margin: 50px auto;
background: bisque;
}
.flexitem{
background:brown;
color:white;
}
CSS 媒体查询和响应式断点
CSS媒体查询
在 CSS 中可以区分屏幕和打印机做不同的样式处理：
<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="print" href="print.css">
上面代码表示 screen.css 只会在设备屏幕中起作用，而 print.css 样式表只会在打印机中起作用。
在 CSS3 中除了能区分屏幕和打印机外，还可以根据屏幕的尺寸等特征来区分。
媒体类型：
| 值 | 描述 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等。 |
| speech | 应用于屏幕阅读器等发声设备 |
CSS3中的动画属性窥探
@keyframes 规则动画
box 从红色过度到黄色，间隔 5 秒。
<body>
<div class="box"></div>
</body>
.box{
width:100px;
height:100px;
animation: myfirst 5s;
}
@keyframes myfirst {
from {
background: red;
}
to {
background: yellow;
}
}
CSS 框架 Bulma 中文文档（翻译）
前言
网页样式需要大量时间开发，最省事的方法就是使用 CSS 框架。Bootstrap 是最著名的 CSS 框架，但是今天我想推荐另一个更轻量化、更易用的框架Bulma。有了它，即使完全不懂 CSS，也可以轻而易举做出美观的网页。
Get Start
我们可以使用多种方式来引入并使用bulma:
npm install bulma
OR
使用CDN的方式：https://cdnjs.com/libraries/bulma
OR
下载css样式并引入，下载地址：https://github.com/jgthms/bulma/tree/master/css
如果你要使用图标请记得引入fontawesome
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
引入后还需要一些HTML格式上的要求：
使用HTML5 Doctype
<!DOCTYPE html>设置viewport Meta标签
<meta name="viewport" content="width=device-width, initial-scale=1">
Web前端基础（5）JavaScript基础
字符串
字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号
var text1 = "www.dp2px.com";
var text2 = 'www.dp2px.com';
字符串长度
可以使用内置属性 length 来计算字符串的长度
var text1 = "www.dp2px.com";
var sln = text1.length;
转义字符
| 代码 | 输出 |
|---|---|
| \‘ | 单引号 |
| \“ | 双引号 |
| \ | 反斜杠 |
| \n | 换行 |
| \r | 回车 |
| \t | tab(制表符) |
| \b | 退格符 |
| \f | 换页符 |
在 JavaScript 中，字符串写在单引号或双引号中,如果要在字符串中表示双引号和单引号就需要用到上面的转义字符。
var text = "my website is \"www.dp2px.com\""
Web前端基础（4）JavaScript基础
JavaScript基础
JavaScrip对于网页的作用有提供网页特效、用户交互、表单验证、控制结构和样式。
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript是一种脚本语言, 主要目的是动态的控制web标准中的结构和样式（结构、样式、行为）
document.getElementById("demo").style.width = "200px";
JavaScript用法
HTML 中的脚本必须位于 <scrip>与 </script> 标签之间。 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。 通常的做法是把函数放入
部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。<head> 中的 JavaScript 函数
<!DOCTYPE html>
<html>
<head>
<script>
alert("我的第一个 JavaScript");
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
</body>
</html>
<body> 中的 JavaScript
<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<script>
alert("我的第一个 JavaScript");
</script>
</body>
</html>
外部的 JavaScript
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
Web前端基础（3）CSS基础知识
浏览器兼容问题
第一，IE6，不支持小于 12px 的盒子，任何小于 12px 的盒子，在 IE6 中看都大
解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如 0px。
_height: 4px;
_font-size: 0px
IE6 留了一个后门，就是只要给 css 属性之前，加上下划线，这个属性就是 IE6 认识的专有属性。
第二，IE6 不支持用 overflow : hidden; 来清除浮动的
解决办法，以毒攻毒。追加一条 zoom : 1;
overflow: hidden;
_zoom:1;
Web前端基础（2）CSS 基础知识
CSS 基础知识
一个 HTML 文档可以显示不同的样式, CSS 指层叠样式表 (Cascading Style Sheets)
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
CSS声明总是以分号 ; 结束，声明组以大括号 {} 括起来。
样式分类
插入样式表的方法有三种:
外部样式表 (External style sheet)
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>浏览器会从文件 mystyle.css 中读到样式声明
内部样式表 (Internal style sheet)
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表
<head>
<style>
hr { color : sienna; }
p { margin-left : 20px; }
body { background-image : url("images/back40.gif"); }
</style>
</head>
- 内联样式 (Inline style)
内联样式不建议使用
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
Web前端基础（1）HTML基础知识
HTML开发基础知识
HTML 是 HyperTextMarkupLanguage, 超文本标记语言 的缩写。是一种标记语意的文档格式。
任何纯文本编辑器都能够编辑 html，比如记事本，editplus, notepad++, vscode等。
比较有名的专门制作网页工具
- DreamWeaver (Adobe公司的产品，过时了，不是一个好的代码编辑器）
- Sublime （高效率的程序书写工具）
- WebStorm （更高级的项目级别编程工具）
- VsCode （一个强大并拥有很多插件的编辑器）
Sublime
Sublime 的中文意思是 华丽的，是 2011 年开始流行的代码编辑器，可以编辑 java, c, php 等很多语言， html, css, js 在 sublime 中支持非常好。
sublime中的常用快捷键
| 快捷键 | 作用 |
|---|---|
| ctrl + shift + d | 复制当前行 |
| ctrl + 滚轮 | 放大缩小文字 |
| ctrl + shift + k | 删除当前行 |
| ctrl + shift + 上箭头 | 上移当前行 |
| ctrl + shift + 下箭头 | 下移当前行 |
| ctrl + n | 新建文件 |