前言
简单记录一下工作中经常碰到的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
设置成和容器一样高即可
Canvas
Canvas只支持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&Height
html和body都可以看做一个特殊的div, 一般不会对它设置高度,只当有
整屏滑动
的需求时候,才会设置htmlheight: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
是根据浏览器视窗进行定位
Animation
transform
:对元素进行变形animation
:规定元素动画,可以设立多个关键帧,并且不需要事件触发 如果做复杂的动画,通常和transform
连用transition
: 只有两个关键帧的animation,即只有开始和结束. 另外,transition需要事件触发,比如hover
其他
按钮一般都写成
span
+backgrount-image
的形式,因为如设置成img,会出现用户移动端长按可以保存的情况造成疑惑
BUG
div下img就算height:100%还是会比div少几px,原因是因为img是行内元素,会自动在尾部添上空白符。 解决方法:img 设置
display:block
即可
其实所有的display:inline-block
都会出现这个问题,浏览器会自动给元素的结尾添加一个空白字符(大小和font-size有关). 解决方法: 可以对父元素设置font-size:0px; 再在该元素里把font-size设置回来padding/margin
的top, bottom 设置百分比是根据父元素的宽度来的。
结语
坑先挖这么点,以后碰到再陆续补充
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。