html+css

一、主流浏览器与其内核

浏览器	内核
IE	trident
Firefox	Gecko
Google chrome	Webkit/blink
Safari	webkit
Opera	presto

二、CSS权重

选择器	权重值
!important	Infinity正无穷
行间样式	1000
id	100
class/属性/伪类(:link :hover)	10
标签/伪元素(::before ::after)	1
通配符*	0

三、复合属性

padding：两个值：上下，左右
      三个值：上，左右，下

border: 1px solid #f00;
相当于：
border-width: 1px;
border-style: solid;
border-color: #f00;

background:#FFFFFF url(1.png) no-repeat center top;
相当于：
background-color:#FFFFFF;
background-image:url(1.png);
background-repeat:no-repeat;
background-position:center top

四、盒子模型

盒子三大组成部分：盒子壁 padding
         内边距 border
         盒子内容 width + height
注意：margin不能算盒子的宽高（谨慎计算题）

1. 标准盒模型
   总宽度=border(左右)+width+padding(左右)
   总高度=border(上下)+height+padding(上下)
2. 怪异盒模型：box-sizing: border-box;
   总宽度=width
   总高度=height

五、选择器

1、简单选择器

id选择器：#号
class选择器：点号
元素选择器：
属性选择器：

2、复杂选择器

分组选择器：逗号，#a,b{…………} 一个id叫a和一个标签是b的样式，作用简化代码
后代选择器：空格，#a b{…………} 一个id叫a下面的一个标签是b的样式，也叫父子选择器，派生选择器，包含选择器
伪类选择器：冒号，#a:b{…………} 一个id叫a的伪类b，例如：a:hover或.className:link
伪元素选择器：双冒号，#a::b{…………} 例如：a::before或.className::after，可以当元素来使用，但是没有元素结构；默认是inline；必须设置content:"";
并列选择器：没有分割， #a.b{…………} 一个id叫a的下面的class叫b的样式
直接子元素选择器：大于号
相邻兄弟选择器：+号

六、display

行级元素/内联元素：inline，span/strong/input/i/a，特点：内容决定大小
                             不可以通过css改变宽高
块级元素：block，div/p/ul li/form/h1，特点：独占一行
                       可以通过css改变宽高
行级块元素：inline-block，img，特点：内容决定大小
                   可以通过css改变宽高
隐藏元素：none，不占据dom空间
块级表格：table-cell，前后没有换行符；table前后带有换行符
弹性盒模型：flex，IE10以上才兼容
总结：凡是带有inline的元素，都有文本类特性（换行中的img有边距）

七、position定位

absolute绝对定位：脱离原来位置进行定位
           相对于最近的、有定位的父级进行定位，如果没有那么相对于文档进行定位
relative相对定位：保留原来位置进行定位，
         相对于自己原来的位置进行定位
fixed固定定位：广告定位，鼠标滚动它不动
总结：一般relative作为参照物，absolute做定位
   一般配合top、left/right来使用

八、float浮动

浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素看不到他们
产生了bfc的元素和文本类属性（inline）的元素以及文本都能看到浮动元素
清除浮动流clear: both;

九、其它

1、解决margin塌陷问题，触发一个盒子的bfc

方法1、position: absolute;
方法2、display: inline-block;
方法3、float: left/right;
方法4、 overflow: hidden;

2、margin合并问题，不解决，在父元素里设置值=父+子

3、SEO搜索引擎

h1：标题，一个html只能出现一次，淘宝的logo
h2：副标题，主题市场
h3：板块标题，有好货/爱逛街
h4：

4、单行显示，溢出容器，打点展示，三件套

white-space: nowrap;/* 不换行*/
overflow: hidden;/* 溢出隐藏*/
text-overflow: ellipsis;/* 省略号*/

5、结构样式行为分离

结构 样式 行为
html css js

6、经验性的总结

网页常用字体和字体大小：arial，12/14号
transparent透明色
p标签里不能套块级元素，如果套了F12可以看到p标签被劈成了2个p标签
a标签里不能套a标签

7、Sublime插件emmet