切图崽的自我修养－CSS踩坑纪录

前言

简单记录一下工做中常常碰到的css的一些坑，欢迎随时拍砖

---

水平居中

1. 该元素是position:nomal, 父元素内block子元素定宽的状况下，对子元素采用margin:0 auto 便可

2. 该元素是position:absolute, 元素定宽width的状况下，用left:50%; margin-left:-(1/2)width 能绝对居中

3. 父元素设置 display:flex, 父元素再设置justify-content:center 便可

4. 该元素是inline, 那么对父元素设置text-align:center便可

5. 父元素宽度自适应，对父元素加padding-left和padding-right便可

6. position:fixed 的元素竟然能够用margin:0 auto的方式居中，真神奇

垂直居中

1. 该元素是position:nomal, 对父元素采用display:table-cell; vertical-align:middle;
   便可

2. 该元素是position:absolute, 元素定高height的状况下，用top:50%; margin-top:-(1/2)height 便可

3. 父元素设置 display:flex, 父元素再设置align-item:center 便可

4. 若是子元素是inline, 那么对父元素设置text-align:center便可

5. 父元素高度自适应，对父元素加padding-top和padding-bottom便可

6. 若是只简单对文字垂直居中，只要把文字的line-height设置成和容器同样高便可

---

Canvas

1. Canvas只支持px单位，而且若是canvas的宽高用css控制，或者$(‘canvas’).css({})来控制的话，里面图片都会变形. 只能用 $(‘canvas’)[0].width = 100 ; $(‘canvas’)[0].height = 300 ，或者在标签上写\< canvas width=100 height=300>

---

Display

1. 当父元素设置了display:flex以后， 父元素会变成block级， 同时最好把子元素所有设置成block，若是子元素是inline-block或者inline,容易出问题

2. 当父元素设置了display:table-cell以后，父元素变成inline-block级， 对子元素没影响

---

Width&Height

1. html和body均可以看作一个特殊的div, 通常不会对它设置高度，只当有整屏滑动的需求时候，才会设置html height:100% , body height:100%. 不过body常常和min-width, max-width，width等属性连用。

---

Background

1. 即便body设置了宽高， 对body设置background仍是整屏

2. 利用background-position:center和background-size能够作出背景图一直居中且宽or高的自适应的效果

3. Css3中的background-origin：content-box 和background-repeat: repeat 一块儿连用会冲突

---

Position

1. 子元素设置成position:absolute后会脱离正常的文档流，这时父元素的padding对子元素失效

2. position:absolute 是根据最近的position不为normal的父元素来定位的

3. positon:fixed 是根据浏览器视窗进行定位

---

Animation

1. transform:对元素进行变形

2. animation:规定元素动画，能够设立多个关键帧，而且不须要事件触发 若是作复杂的动画，一般和transform连用

3. transition: 只有两个关键帧的animation，即只有开始和结束. 另外，transition须要事件触发，好比hover

---

其余

1. 按钮通常都写成 span+backgrount-image的形式，由于如设置成img,会出现用户移动端长按能够保存的状况形成疑惑

---

BUG

1. div下img就算height:100%仍是会比div少几px,缘由是由于img是行内元素，会自动在尾部添上空白符。 解决方法：img 设置display:block便可
   其实全部的display:inline-block都会出现这个问题，浏览器会自动给元素的结尾添加一个空白字符(大小和font-size有关). 解决方法: 能够对父元素设置font-size:0px; 再在该元素里把font-size设置回来

2. padding/margin 的top, bottom 设置百分比是根据父元素的宽度来的。

---

结语

坑先挖这么点，之后碰到再陆续补充