CSS杂谈

作者: wade3po | 来源:发表于2019-02-06 08:54 被阅读12次

本文没有什么高深的东西,就是写几个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个人笔记 公众号

相关文章

  • CSS杂谈

    1. inline、block和display:inline-block block和inline这两个概念是简略...

  • css杂谈

    j#### text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中作用:定义行内...

  • CSS 杂谈

    CSS 杂谈 文档流 Normal Flow 流动是默认的网页布局形式。也就是说在默认状态下的HTML网页元素都是...

  • CSS杂谈

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

  • CSS杂谈

    关于浏览器乱码 说法正确的有 用不合适的编辑器编辑文件,常常会出现乱码,比如windows 记事本 html保存的...

  • CSS综合 杂谈

    1. 说一说你平时写代码遵守的编码规范 我是借鉴腾讯AlloyTeam团队代码规范 再结合公司以前定制的方案 编...

  • 杂谈CSS高度技巧

    不学习具体的知识点,只了解一下 文档流(Normal flow) 块级元素的宽高, 以div里只有行内元素举例 字...

  • 前端杂谈: CSS 权重 (Specificity)

    css 权重想必大家都听说过, 一些简单的规则大部分人也都知道: 较长的 css selector 权重会大于较短...

  • 创业杂谈--AR App竞品分析

    前序 创业杂谈--起由 创业杂谈--创业方向 创业杂谈--创业团队 那么这篇我们来看看AR App竞品。 在App...

  • 2018-10-17

    周末杂谈

网友评论

      本文标题:CSS杂谈

      本文链接:https://www.haomeiwen.com/subject/lunssqtx.html