CSS杂谈

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

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

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

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

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

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

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

当我们想要写一些可以左右滑动的时候,父元素宽度100%,然后设置overflow-xscroll和white-spacenowrap,子元素设置displayinline-block。

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

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

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

(完)

Coding 个人笔记

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180822G1SB3C00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励