display:flex之后图片拉伸
display:flex;
align-items:flex-start;
鼠标样式
cursor:pointer
布局
IE8使用float布局，再在父元素加上清除浮动。width固定。IE6加上：clearfix{zoom:1}
水平居中
上面是block，下面是Inline
垂直居中
不要写父元素高度就很容易实现
不正交
属性之间的影响
边距合并（会被以下几种影响/打破）
可以通过中间加一个border隔开
display:table
display:flex
overflow：hidden
display会影响ul的小圆点
position:absolute会影响display:inline和display:inline-block
元素之间的影响
display:fixed会被父元素中任何一个元素的transform影响（可能相对父元素定位）
float会影响文字（为了文字围绕图片效果）
高度和宽度
div的高度由它内部文档流高度之和决定（并不相等，因为文档流不包括margin,padding行高等）
内联元素从左到右，块级元素从上到下。
脱离文档流
float，position:absolute，position:fixed
字体通过基线对齐
每个字体都有建议行高，由该字体的设计师规定。
div的宽度不由文字决定
内联元素
内联元素的宽
由文字个数决定(内容)+padding+border+margin。
内联元素的高度
div的高度由字体的行高确定，和字体大小无关.(line-height)
块级元素
div高度（块级元素）
内div的高度+padding+margin（没东西挡着就不加（margin合并）)
#######margin合并
儿子的margin和爸爸的margin上下由于没有东西挡着，和在了一块，成了一个margin。
解决，在儿子和爸爸之间加个东西就好了（border，padding，overflow:hidden不推荐，限制了不能超出父元素）
div垂直居中
父元素高度不确定
.dad{padding:100px 0;} .son{margin:0 auto;}//padding上下相等即居中
父元素高度确定
display:flex;
justify-content:center;
align-items:center;
//可能需要子元素height:auto;
内联元素两个元素之间，看不见的地方（1-n个回车，1-n个空格）会变成一个空格。
单行文字对齐
line-height === height
多行文字对齐
text-align:justify
单行文本省略
多行文本省略
css multi-line text elliptical
文字垂直居中
一比一的div
padding-top:100%
响应式
通过媒体查询和禁止缩放来实现。
除了面试问，一般是没人用。
都是直接PC一套手机一套，通过服务器来判断用哪一套。
- link标签<link media="(xxx)">，标签生效，已下载。
- <style>中，@media(xxx){body{}}
- <meta name="viewport" content="width=device-width,user-scalable=no,intial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">，禁止iPhone缩放
- 手机有touch
- 手机没有hover
- 手机没有resize
- 手机没有滚动条
hover 向上跳一下
margin-botton:4px;
左边缘和父元素右边缘对齐
.parent{
max-width:200px;
position:relative;
}
.chiled{
right:100%;
left:auto;
}
left:50%
以左边线为基准
z-index无效
position:relative
