—————– CSS —————–
CSS规则
1、@charset 'utf-8' : 指定CSS的字符编码
2、@import 'test.css': 引用一个CSS文件
3、@media: media query使用的规则，对设备类型进行一些判断
4、@key-frames: 定义动画关键帧
@keyframes diagonal-slide {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
5、@fontface: 定义一种字体
@font-face {
font-family: Gentium;
src: url(http://example.com/fonts/Gentium.woff);
}
p { font-family: Gentium, serif; }
布局
一、内联元素与块元素的区别
内联元素:
1、与其它内联元素都在并列同一行
2、不能设置宽、高
3、不能设置上下外边距、内边距 margin-top、margin-bottom 和 padding-top、padding-bottom ，设置内边距也不会撑起父级高度
块元素:
1、不指定宽度，会继承父元素的宽度，每个块元素都是独立一行
2、元素的宽高都可以设置，如果不设置宽度就为100%;
二、display属性:
1、inline: 内联元素 2、block: 块元素
3、inline-block: 具有block的宽高特性，又具有inline的同行元素特性
4、table-cell: 文字的垂直居中，类似表格的单元格
5、box: 弹性盒模型的过渡版本，现在用flex替换
6、flex: flex是一个弹性布局的最新版本，老版本使用的box
flex布局，子元素的float、clear、vertical-align属性将失效
主要属性有两大类: 容器属性和项目属性
三、visibility 隐藏时可以保留元素的空间, display不会保留
visible: 可视 hidden: 对象隐藏
四、overflow
overflow-x、overflow-y: 分别处理水平或垂直
1、hidden: 隐藏溢出的内容
2、scroll: 溢出的内容以滚动条显示
BFC浮动
BFC概念: Block Formatting context(块级格式化上下文) 页面中一块渲染区域，并且有一套渲染规则，决定子元素如何定位，以及他们之间的关系和相互作用
触发BFC - 只要元素满足下面任一条件即可触发 BFC 特性：
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
如果子元素设置了浮动 float:left; 那么浮动的元素就会脱离普通文档流, 不会撑起父元素的高度, 容器只剩下2px的边距高度
<div style="border: 1px slid #000"> // 添加overflow: hidden
<div style="width: 100px; height: 100px; background: #eee; float: left"></div>
</div>
一、float 浮动
left、right 左右浮动 浮动问题: 会使父级的高度失效，使用清除浮动来解决
二、clear 清除浮动
both: 不允许有浮动对象 left: 不允许左边有浮动 right: 不允许有右边浮动
/* 万能清除浮动 */
.clear:after { content:''; display:block; clear:both; height:0; overflow:hidden; visibility:hidden; }
.clear { zoom:1; }
after伪类： 元素内部末尾添加内容；
:after{content"添加的内容";} IE6，7下不兼容
zoom 缩放
a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
b、FF 不支持；
盒模型
一、padding: 内边距 padding不支持负值
二、margin: 外边距 支持负值
margin存在的问题:
1、适用于block元素，不起作用的absolute、fixed、inline、table-cell元素
2、margin-top和margin-bottom 兄弟之间的会重叠
解决方法:
1、给当前元素加浮动 float: left
2、给当前元素加
3、margin-top: 会影响到父元素（标准浏览器会影响，IE正常）
解决方法: 给父元素加一个padding、border或overflow:hidden 即上面代码里的注释部分
三、border: 边框线
position 定位
一、absolute: 绝对定位，查找父子以上的元素是否定义了position，如果没有就以window为定位基准
二、relative: 相对定位
三、fixed: 始终以window为定位，固定到屏幕的某个位置，浏览器滚动也跟随
四、static:
五、z-index: 层级堆叠顺序，值越高越在最上面，最小值为0，最大值为2147483647
background 背景
1、background-attachment: 背景图是随着滚动还是固定
fixed: 相对窗体固定
scroll: 背景图以元素固定，元素内容滚动时图像不会跟随滚动
2、transparent: 背景透明
background-color: 背景颜色
background-image: 背景图片
background-repeat: 背景重复
background-position: 背景位置
文本
1、word-spacing: 单词与单词之间的间隔
2、letter-spacing: 字母与字母之间的间隔
3、word-wrap: 属性允许长单词或 URL 地址换行到下一行 @ break-word 在需要换行时才换
如果不加些属于英文不会换行
4、word-break: 断字点进行换行
break-all: 让英文象中文一样可以在行内做任意字间换行
keep-all: 让中文向英文的换行方式接近，只在空格或英文标点符号才换行
5、white-space: 指定超出父级盒子宽度，文本进行换行(中、英文)，white-space: nowrap;
6、text-overflow: 文本的溢出时隐藏，test-overflow: ellipsis; 溢出用省略号来修剪
p {width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
7、text-indent: 文本的首行缩进
8、vertical-align: 文本的对齐方式
* 只应用于inline水平以及table-cell元素 别把他放到div或p的块元素内
1、线类
baseline: 默认，元素的基线与父元素的基线对齐
top、bottom、middle: 居上、下、中
2、文本
text-top、text-bottom:
3、上标下标类
super: 上标 sub: 下标 不过位置都不太兼容，需要重写
4、数值百分比
vertical-align: 20px;
9、color: 文本颜色
10、text-align: 文本对齐 left right center justify
11、text-decoration: 文本装饰 overline 上划线 underline 下划线 line-through 从中间穿过的线
12、direction: 文字方向 rtl 从右向左 ltr 从左向右
13、line-height: 行高
表格
table: margin可以使用，除非设置 display: inline-table
1、border-collape: 表格或单元格边框合并到一起
separate: 边框独立 collapse: 相邻合并
2、border-spacing: 表格或单元格之间的距离
表格单线条:
.tab { border-spacing: 0; border-collapse: collapse;}
.tab td, .tab th { border-collapse: collapse; border: 1px #ccc solid; border-spacing: 0; padding: 10px 20px; }
长度
rem: 是相对于根元素(html)的font-size值为基准，em是相对父级元素变化，px是物理像素
vw/vh: 根据屏幕不同变化的
em: 相对长度，相对于父元素
语法与规则
1、!important 提升优先级
2、@import url("global.css"); 导入外部样式表
3、@charset 'uft-8' 编码
选择器
p{...} 元素选择器
.className{...} 类选择器
#idName{...} id选择器
.user[id='username']{...} 属性选择器
.claA .claB{...} 后代选择器
.clsA > .clsB {...} 子选择器
.clsA + .clsB {...} 相邻选择器
.clsA, .clsB{...} 选择器分组
伪类、伪元素
伪类 用于向某些选择器添加特殊效果
a:link: 未被访问过
a:visited: 已经被访问的链接
a:hover: 鼠标指针移动到的链接
a:active: 被点击的链接
:first-childe: 向元素的第一个子元素添加样式
伪类元素 用于向某些选择器添加特殊效果
:first-letter: 设置第一个字符的样式属性 ::first-letter
:first-line: 设置第一行的样式 ::first-line
:before 和 :after: 用于在元素前和元素后配置content属性添加内容 ::before ::after
.box::before { content: '这里是在box元素之前显示'}
.box::after { content: '这里是在box元素之后显示' }
css3规则伪类使用一个":", 伪元素使用两个"::"
: 用于css2的伪类，:: 用于css3的伪类
css基础属性
字体
font-size: 字体大小
font-family: 使用的字体
font-style: 字体风格 @ italic 斜体
font-weight: 字体重量
font: 简写
按顺序 也可以设置第六个值为line-hgith
font-style
font-variant
font-weight
font-size/line-height
font-family
链接
a:link: 未被访问过
a:visited: 已经被访问的链接
a:hover: 鼠标指针移动到的链接
a:active: 被点击的链接
列表
list-style-image: 将图像设置为列表标志
list-style-position: 标志的位置
list-style-type: 标志类型 @circle 圆 @square 方块
list-style: 简写属性
尺寸
width、height: 宽高
max-width、max-height: 最大宽高
min-width、min-height: 最小宽高
透明度
opacity: 0.4;
filter: alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
技巧
1、body高度为100%，html继承了浏览器的高度，body继承了html的高度，这样body就为100%了
html{ height: 100%; }
body { height: 100%; margin: 0;}
.box { width: 100%; height: 100%; background-color: #ccc; }
2、浏览器hack
.box { width: 100px\9; }
浏览器（加粗表示支持） CSS hack
IE6 _background-color:#38DB24;
IE6、7 *background-color:#38DB24;
IE6、7 +background-color:#38DB24;
IE6、7 #background-color:#38DB24;
IE6、7 background-color:#38DB24 !ie;
IE6、7、8、9、10 background-color:#38DB24\9;
IE7、8、9、10&Firefox&Opera&Chrome&Safari html>body .ie78910-all-hack { background-color: #38DB24 }
IE8、9、10&Firefox&Opera&Chrome&Safari html>/**/body .ie8910-all-hack { background-color: #38DB24 }
IE8、9、10&Opera background-color:#38DB24\0;
IE9、10 :root .ie910-hack { background-color:#38DB24\9; }
IE9、10 background-color:#38DB24\9\0;
IE9、10&Firefox&Opera&Chrome&Safari body:nth-of-type(1) .ie910-all-hack {background-color:#38DB24 ;}
IE9、10&Firefox&Opera&Chrome&Safari @media all and (min-width: 0px) { .ie910-all-2-hack{ background-color:#38DB24 ;} }
IE9、10&Firefox&Opera&Chrome&Safari @media all and (min-width: 0px) { .ie910-all-3-hack{background-color:#38DB24 ;} }
IE9、10&Firefox&Opera&Chrome&Safari :root *> .ie910-all-4-hack { background-color:#38DB24 }
IE10 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ie10-hack{background-color:#38DB24 ;} }
Firefox @-moz-document url-prefix() { .firefox-hack{background-color:#38DB24 ;} }
Chrome&Safari @media screen and (-webkit-min-device-pixel-ratio:0) {.chrome-safari-hack{background-color:#38DB24 ;} }
3、条件注释
lt : 就是Less than的简写，也就是小于的意思。
lte : 就是Less than or equal to的简写，也就是小于或等于的意思。
gt : 就是Greater than的简写，也就是大于的意思。
gte: 就是Greater than or equal to的简写，也就是大于或等于的意思。
!: 就是不等于的意思，跟javascript里的不等于判断符相同。
1、只有IE能识别
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
2、指定版本
<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
3、低于指定版本才能识别
<!--[if lt IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
4、layout: IE的私有概念
5、zoom: 用于处发layout
zoom: 1;
CSS Sprites
http://alloyteam.github.io/gopng
http://fis.baidu.com
http://gruntjs.com
—————– HTML —————–
文档
<!DOCTYPE html>
<!--[if IE 6]><html class="ie lt-ie8"><![endif]--> // 如果浏览器是IE6显示当前html标签
<!--[if IE 7]><html class="ie lt-ie8"><![endif]-->
<!--[if IE 8]><html class="ie ie8"><![endif]-->
<!--[if IE 9]><html class="ie ie9"><![endif]-->
<!--[if !IE]><!--> <html lang="zh-CN"> <!--<![endif]-->
<head>
<meta charset="UTF-8"> // 文档字符集
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<meta name="description" content="京东JD.COM-专业的综合网上购物商城" /> // 描述
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" /> // 关键字
<!--[if lte IE 7]>
<script src="//misc.360buyimg.com/mtd/pc/index/home/ie6tip.min.js"></script>
<![endif]-->
<!--[if IE 8]>
<script src="//storage.360buyimg.com/fragments/polyfill.js"></script>
<![endif]-->
<link rel="dns-prefetch" href="//static.360buyimg.com" /> // DNS预解析
<link rel="icon" href="//www.jd.com/favicon.ico" mce_href="//www.jd.com/favicon.ico" type="image/x-icon" sizes="32x32" /> // 浏览器上显示图标和大小
<link rel="icon" href="//www.jd.com/favicon.ico" mce_href="//www.jd.com/favicon.ico" type="image/x-icon" sizes="16x16" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="google-site-verification" content="4vmYcfLX0KWi82fvht-HAux15inXSVGVQ0tnUZqsdqE" />
<base href="http://www.jd.com" target="_blank" /> // 定义页面全局链接的默认址地
</head>
<body>
...
</body>
</html>
可跨域的元素
<img>下的src
<script>的scr
<a>下的href
<iframe>下的src
HTML元素
1、<!DOCTYPE html> 声明文档解析类型，指定浏览器用哪个版本来解析页面
解析类型有两种模式:
1）怪异模式: 浏览器使用自己的怪异模式解析渲染页面（如果不声明doctype就是怪异模式）
2）标准模式: 使用严格模式，以W3C的标准解析渲染页面
HTML 4.01 规定了三种文档类型: Strict、Transitional 以及 Frameset
2、<html> 定义文档 <body> <head> 定义文档信息
3、<title>、<style>:
4、<meta>: 文档元信息
5、<link>: 加载文档与外部资源
6、<script>: 定义脚本
7、<div>:
8、<iframe>: 内联框架
9、<img>: 定义图像
10、<style>: 内联样式
11、<base>: 元素定义了基本的链接地址，该标签作为文档中所有链接的默认目标
文本元素
1、<p>: 段落, 有默认的上下外边距
2、<span>: 文档中的行内小块或区域
3、<a>: 定义锚，属性 href、title
4、<b>: 字体加粗
5、<i>: 斜体
6、<em>: 着重文字
7、<strong>: 加重语气
8、<u>: 下划线文字
9、<big>、<small> 大字体和小字体
<h2>标准属性<small>id, class, title, style, dir, lang</small></h2>
10、<sub>、<sup>: 上、下标文本
11、<br>: 换行
12、<del>: 被删除的文本
13、<ins>: 定义被插入文本
14、<hr>: 定义水平线
15、<bdo> 定义字体显示的方法 ltr、rtl
文字翻转显示 <bdo dir="rtl">Here is some text</bdo>
代码元素
1、<samp>: 计算机输出
2、<var>: 文本的变量部分
3、<code>: 代码文本
4、<pre>: 预格式化文本, 不需要浏览器对标签内的内容进行排版
<pre>
<samp>
<code>
GET /home.html HTTP/1.1
Host: www.example.org
</code>
</samp>
</pre>
标题元素
1、<h1>...<h6>
列表元素
1、<ul>: 无序列表
2、<ol>: 有序列表
<ol> <li>aaa</li> </ol>
3、<li>: 列表的项目
4、<dl>、<dt>、<dd>: 定义列表
表单元素
1、<form>
2、<fieldset>、<legend>: 定义围绕表单中元素的边框。
<fieldset>
<legend>健康信息</legend>
身高: <input type="text" />
</fieldset>
3、<input>
4、<label>: input元素的标注
5、<select>: 下拉菜单 <option>菜单内容
6、<button>: 按钮
7、<textarea>: 多行文本
表格元素
1、<table>
2、<tr>、<td>: 行、列
3、<caption>: 定义表格标题
4、<th>: 表格头单元
5、<thead>、<tbody>、<tfoot>: 表格页眉、主体、页脚
窗口框架
1、<frame>: 定义框架集窗口或框架
2、<frameset>: 定义框架集
3、<object>、<param>
| http://www.css88.com/book/css/
| http://www.w3cplus.com/
| https://www.nihaoshijie.com.cn/index.php/page/3
| http://jixianqianduan.com/page6/
| http://www.css88.com/archives/category/js-and-ria
| http://www.w3cplus.com/solution/index/index.html
| https://github.com/csswizardry/inuit.css/tree/master/base
| https://github.com/GumbyFramework/Gumby
| http://www.shejidaren.com/css-written-specifications.html
| https://zhuanlan.zhihu.com/p/25321647 BFC