摘要：解决方法设置即可其实所有的都会出现这个问题，浏览器会自动给元素的结尾添加一个空白字符大小和有关解决方法可以对父元素设置再在该元素里把设置回来的设置百分比是根据父元素的宽度来的。结语坑先挖这么点，以后碰到再陆续补充
前言
水平居中简单记录一下工作中经常碰到的css的一些坑，欢迎随时拍砖
该元素是position:nomal, 父元素内block子元素定宽的情况下，对子元素采用margin:0 auto 即可
该元素是position:absolute, 元素定宽width的情况下，用left:50%; margin-left:-(1/2)width 能绝对居中
父元素设置 display:flex, 父元素再设置justify-content:center 即可
该元素是inline, 那么对父元素设置text-align:center即可
父元素宽度自适应，对父元素加padding-left和padding-right即可
position:fixed 的元素居然可以用margin:0 auto的方式居中，真神奇
垂直居中该元素是position:nomal, 对父元素采用display:table-cell; vertical-align:middle;
即可
该元素是position:absolute, 元素定高height的情况下，用top:50%; margin-top:-(1/2)height 即可
父元素设置 display:flex, 父元素再设置align-item:center 即可
如果子元素是inline, 那么对父元素设置text-align:center即可
父元素高度自适应，对父元素加padding-top和padding-bottom即可
如果只简单对文字垂直居中，只要把文字的line-height设置成和容器一样高即可
CanvasCanvas只支持px单位，并且如果canvas的宽高用css控制，或者$(‘canvas’).css({})来控制的话，里面图片都会变形. 只能用 $(‘canvas’)[0].width = 100 ; $(‘canvas’)[0].height = 300 ，或者在标签上写< canvas width=100 height=300>
Display当父元素设置了display:flex之后， 父元素会变成block级， 同时最好把子元素全部设置成block，如果子元素是inline-block或者inline,容易出问题
当父元素设置了display:table-cell之后，父元素变成inline-block级， 对子元素没影响
Width&Heighthtml和body都可以看做一个特殊的div, 一般不会对它设置高度，只当有整屏滑动的需求时候，才会设置html height:100% , body height:100%. 不过body经常和min-width, max-width，width等属性连用。
Background即使body设置了宽高， 对body设置background还是整屏
利用background-position:center和background-size可以做出背景图一直居中且宽or高的自适应的效果
Css3中的background-origin：content-box 和background-repeat: repeat 一起连用会冲突
Position子元素设置成position:absolute后会脱离正常的文档流，这时父元素的padding对子元素失效
position:absolute 是根据最近的position不为normal的父元素来定位的
positon:fixed 是根据浏览器视窗进行定位
Animationtransform:对元素进行变形
animation:规定元素动画，可以设立多个关键帧，并且不需要事件触发 如果做复杂的动画，通常和transform连用
transition: 只有两个关键帧的animation，即只有开始和结束. 另外，transition需要事件触发，比如hover
其他按钮一般都写成 span+backgrount-image的形式，因为如设置成img,会出现用户移动端长按可以保存的情况造成疑惑
BUGdiv下img就算height:100%还是会比div少几px,原因是因为img是行内元素，会自动在尾部添上空白符。 解决方法：img 设置display:block即可
其实所有的display:inline-block都会出现这个问题，浏览器会自动给元素的结尾添加一个空白字符(大小和font-size有关). 解决方法: 可以对父元素设置font-size:0px; 再在该元素里把font-size设置回来
padding/margin 的top, bottom 设置百分比是根据父元素的宽度来的。
结语坑先挖这么点，以后碰到再陆续补充
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111334.html
摘要：前言不要再叫我切图崽，我很生气，这样很不礼貌，请叫我前端工程师从方面来说，前端工程师和切图崽的区别，并不是指写单条技巧的高低，甚至很多工程师在一些的奇技淫巧都比不上切图崽那切图崽到底和工程师之间的差别是什么呢差别是年工作经验视野，是格局，是 前言 不要再叫我切图崽，我很生气，这样很不礼貌，请叫我前！端！工！程！师！ 从css方面来说，前端工程师和切图崽的区别，并不是指写单条css技巧的...
摘要：但是这么多模块合并在一个文件里，全是匿名的话，系统如何区别哪个是哪个模块呢因此，我们需要对这些模块给不同的进行标识。 前言 高能预警，前方山路十八弯 在上一篇文章里简单的讨论了一下模块化Js, 先来回顾一下目前模块化的两大规范: CommonJs 同步加载模块规范 AMD/CMD 异步加载模块规范 其中CMD规范的产出是国内目前十分火爆的SeaJs, 这篇文章主要是解释几个使用S...
摘要：但是这么多模块合并在一个文件里，全是匿名的话，系统如何区别哪个是哪个模块呢因此，我们需要对这些模块给不同的进行标识。 前言 高能预警，前方山路十八弯 在上一篇文章里简单的讨论了一下模块化Js, 先来回顾一下目前模块化的两大规范: CommonJs 同步加载模块规范 AMD/CMD 异步加载模块规范 其中CMD规范的产出是国内目前十分火爆的SeaJs, 这篇文章主要是解释几个使用S...
摘要：但是这么多模块合并在一个文件里，全是匿名的话，系统如何区别哪个是哪个模块呢因此，我们需要对这些模块给不同的进行标识。 前言 高能预警，前方山路十八弯 在上一篇文章里简单的讨论了一下模块化Js, 先来回顾一下目前模块化的两大规范: CommonJs 同步加载模块规范 AMD/CMD 异步加载模块规范 其中CMD规范的产出是国内目前十分火爆的SeaJs, 这篇文章主要是解释几个使用S...
摘要：前言梳理一下中还不太熟悉的事件绑定统一用摒弃掉之前的解绑事件统一用语法糖，支持多个事件绑定同一个函数语法糖，支持多个事件绑定不同的函数语法糖，支持多个事件绑定不同的函数可以往里传参可以给未创建的上绑定事件只能采取事件委托的形式所以写成这样是 前言 梳理一下Jquery中还不太熟悉的API Jquery事件绑定统一用on(摒弃掉之前的click,bind),解绑事件统一用off 语法...
阅读 761·2021-07-25 21:37
阅读 3673·2019-08-30 15:55
阅读 2593·2019-08-30 15:54
阅读 1754·2019-08-30 15:44
阅读 3142·2019-08-30 15:44
阅读 879·2019-08-30 15:43
阅读 1053·2019-08-29 15:36
阅读 3059·2019-08-29 10:58
