1.行内：a b span input; 块：div ul p; 空：br hr
2.盒子：margin border padding content
- CSS选择符： id # ； class . ; 标签 div ; 相邻：ul + div ;
子 ul>li ; 后代 ul li ; 通配 * ; 属性 a[href='xxx'];
伪类 a:after a:hover;
4.优先级：!important > 行内 > # > div
5.css3新增伪类： :after :checked :nth-child(n)
6.属性子继承父: 字体 颜色
7.flex布局：代替百分比 / 浮动 【display:flex; row横column竖；flex:1;】
1)左右：.box{display:flex;} .left{width:100px;} .right{flex:1;} //左固定 右铺满剩余
2)上中下：.box{ display:flex; flex-direction:column;height:100vh;} .中{flex:1;}
3)左中右： .box{display:flex;flex-direction:row;width:100 %;} .中{flex:1;}
8.清除浮动: 【解决 父元素因为子级元素浮动引起的内部高度为0的问题】
- 父的子元素最下面多加一个子元素标签
<父>.clear{ clear:both} //额外多加一个元素
-
.父元素:{overflow:hidden;} //导致无法显示要溢出的元素
-
常用after伪元素
.父:after,.父:before:{ content:""; clear:both; display:table; }
9.浏览器内核：
ie / 360 / 搜狗： Trident ;
火狐：ff ；
谷歌 / safari ：webkit;
10.浏览器兼容例子： *{margin:0;padding:0;} //解决浏览器内外编制不一致
11.HTML5新特性:
1)canvas 2)语义化标签header footer 3)本地存储 4)表单控件
html5浏览器兼容处理:html5shiv【网上找到这两行代码张贴进去即可】
12.css如何实现垂直居中：
水平：margin：0 auto;
垂直：1）子定位；
2）父:{ dispaly;flex; align-items:center; //垂直 }
- 定位：
relative（相对定位): 相对于自身进行定位; 可提升层级类似z-index；
absolute（绝对定位): 父级设置相对定位,是以父盒子为基准;否则以浏览器左上角；
fixed（固定位置):以浏览器左上角;
==========================
以下补充：
1.模拟器app:Hbuild
2.加粗 ；下标 上标；
3.Doctype！作用:告诉浏览器哪种html / xhtml;
4.iframe:【现已不建议使用】
优点：重复使用；重载不需加载全部页面；维护性好；
缺点：兼容性；后退不支持；阻塞页面onload事件；
