CSS杂谈

本文没有什么高深的东西，就是写几个CSS样式经常遇见的东西，可能大部分都已经知道怎么解决了，当做小白文浏览就好。

当我们把一些块元素设置display-inline-block的时候，你会发现各个块之间有间距，刚开始我以为是没有设置margin 0 和padding 0，后来才知道，是代码换行的原因，只要把代码之间的换行去掉就没问题。但是这样对于代码又很不优雅，那么可以把这些设置inline-block的元素用一个div包裹起来，然后给这个div设置font-size 0，不能给这些元素设置0。亲测有效。

当我们想要一个div元素居中，那么我们要给这个div宽度然后设置margin 0 auto。在某些场景下我们想要div居中，内容又不固定，这时候可以把这个div包裹在一个父元素下，父元素设置text-align center，然后把这个div设置成display inline-block。当然有人会问，如果只是这样直接用p元素不一样吗，我想说的是当你遇见之后你就知道了。包括图片等也可以用这种方法居中。

之前讲过BFC，在子元素设置margin之后父元素也会跟着往下移，这是共享margin的原因。这边简单再说一下，可以使用加padding、border、overflow、float、position等。

几乎所有页面都会遇见上下左右垂直居中的问题，很多人用距离去定位居中，我这边推荐的是用flex布局，还不知道的可以去学一下。用定位，当你设置定位之后，top left right bottom都设置为0之后，再设置margin auto是有用的。使用translate，距离设置50%之后，设置一个translate本身50%。当然，首选flex布局，当你不能用flex的时候就只能用后面几种方法了。

Input光标大小，我们可以改变input的font-size来改变光标的大小，要是遇见一些要设定光标的大小的产品或者UI，我是觉得拿出两米大刀放桌上最好。实在需要调整的话就使用padding，给input设定小点的高度，然后设置padding。

滚动条大小是可以设置的，还可以设置一些简单的样式，只不过都要加前缀等。当你要隐藏滚动条的时候，把有滚动条的子元素放到一个父元素里面，子元素宽度大于父元素，父元素设置overflow hidden就可以了。

当我们想要写一些可以左右滑动的时候，父元素宽度100%，然后设置overflow-x scroll和white-space nowrap，子元素设置display inline-block。

内容较多，滚动定位，为了用户体验我们会想要滚动的时候是慢慢滚动的，我们可以用JS设置animate来实现。

当你要做很多边框一层一层的时候，我想大部分会采用很多div上下左右居中，然后不停背景图片，这边推荐使用box-shadow，其他都设置0，调整扩张半径。两层border的时候，使用outline。

CSS能做的其实太多了，只不过我们习惯了用JS去实现，但是CSS实现比JS实现在性能上更优，希望都能慢慢积累。

欢迎关注Coding个人笔记 公众号