likes
comments
collection
share

一些CSS技巧

作者站长头像
站长
· 阅读数 61

关于我的CSS

在我的工作经历中，我工作的前几年都是在做toB的一些产品平台，针对于toB的产品当时市场上已经出现了很多供各公司使用的现成的UI框架。从最早也是最流行的Bootstrap，再到后面的LayUI，最后经历了几个大型的前端开发框架的诞生，和他们相关的几个UI框架也变得流行起来，比如目前中后台会一直在用的Antd。因为人的惰性，再加上随手拿来一段现成的UI代码或者一个现成的UI组件引入，让我在之前的工作中并没有花太多的时间在CSS上，而是拿出更多的时间去学习Javascript、流行的前端框架（React、Vue）以及前端工程化相关的一些东西（Webpack）等等。

但是当我进入了一家以C端产品为主的公司，经常需要写很多H5移动端的页面，由于之前的经历，以至于让我在刚开始的阶段，踩了不少关于CSS以及手机兼容性的问题，这里主要是总结一下关于CSS平时在写的时候可以用的一些小技巧。

CSS技巧

display Block、InlineBlock、Inline

  1. display:block 表示块元素，是独占一行的，就是宽度默认会占满一行，可以手动设置宽和高，并且设置margin和padding都会起作用。 这里的起作用是指，可以有效的拉开和其他元素的距离。

  2. display:inline-block 表示行内块元素，也可以设置宽和高，但是可以允许其他元素和它保持同行。

  3. display:inline 表示行内元素，不能够独自占一行，设置宽和高是无效的，宽和高是根据内容撑开，左右设置margin和padding是有效的，但是上下设置是无效的，即设置上下没有将其他元素分隔开。

    注意：inline的padding-top和padding-bottom，设置这两个属性实际上已经成功加上了，但是没有成功拉开和其他元素的距离。

    这里的无效是指，没有成功引起布局上的影响，但是属性是已经设置上了的，就是由于dinline属性可防止产生影响。

    <style>
   span{
     width:200px;
     height:32px;
     padding-top:10px;
     padding-bottom:10px;
   }
 </style>
 <body>
   <div>ahhhhhhhh</div>
   <span>这是一个行内元素</span>
   <div>哈哈哈哈我在行内元素的下面</div>
 </body>

    效果如下：

    一些CSS技巧 可以看出，这些属性值都设置成功了，为了进一步证明这些都设置成功了，使window.getComputedStyle去手动获取属性值，结果如下：

    所以记住，这里设置成功了！但是效果没有！这里就需要在写一些H5的时候，如果想要通过计算各个元素的高度进行动态定位的话，要注意，如果是用了这些，那么就可能你计算的结果会比实际看上去的要大。

border-radius:999px

我以前最简单设置border-radius的思路，就是直接按照UI给的设计稿，直接根据上面的值设置。但是后来写H5的时候发现，因为需要测试不同宽度的机型，我发现为什么在更宽的页面上表现的效果会不一样（没有这么圆滑了）。

为什么不一样？

其实设置border-radius是设置元素的外边框圆角，假设border-radius:5px,那么就表示四个角的圆角半径是5px。在UI给的一个设计图上根据当前设计稿的一个高宽比刚好符合较好的圆滑效果，但是因为我们每个人的设备高宽比不一样，正常在设置这种宽度都会根据屏幕的百分比进行设置，这样比较简单，也能够适应各个宽度的屏幕，但是高度一般是相对定值。

这个相对于更大的宽度，对于相同的圆角值而言，圆滑度更小了，这样出来的圆角效果就没有更小屏幕的效果圆滑了。

如何解决这个问题呢？

这种问题，一般会出现在画按钮上，刚开始我是直接通过一个切图来代替，后面发现当圆角设置成远超过宽和高时，他们各自的比例就接近了，这样不管在哪种屏幕显示的圆角效果都是符合预期的。

所以可以将其设置成一个较大值，一般设置成999px。或者可以设置百分比的方式，比如在头像背景处理中，通常设置50%。

margin和padding的正确使用

一般如果两个元素是父子关系，会给父元素设置padding，如果两个元素是同级关系，则会给元素设置margin，这里需要注意如果上一个元素设置了margin-bottom，下一个元素设置了margin-top，实际的间隔是这两者选择较大的一个值。

  1. 如果是两个父子元素，我就是将子元素设置了margin-bottom会怎么样？

     <style>
   .child{margin-bottom:20px}
 </style>
 <div class="parent">
   <div class="child">aaaaa</div>
 </div>

    你会发现，父元素的高度并没有因为margin而撑开。所以这样的写法也是不推荐的，还是之前的那个解释，如果想要计算高度的时候你会发现计算出来的实际高度会比你眼前看到的高度要小。这样就会导致在计算一些其他高度比如滚动，会出现高度偏差，这样一个小问题可能就会让自己定位半天，所以在平时的代码编写就需要尽量的按照较好的标准来写。

  2. 设置高宽等比缩放的时候，可以使用padding来实现

    在H5开发过程中，经常需要做那种适应性布局，特别是一些图片展示，为了更好的兼容，会设置百分比。

<div class="parent">
  <div class="child"></div>
</div>

<style>
  .parent {
    position: relative;
    padding: 30% 40%; // 这样设置padding就可以让父元素撑开了
  }
  // 实际上我们需要宽高等比缩放的是child元素
  .child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>

object-fit

指定img或video的内容应该如何适应某个高度和宽度的框

几种属性值：

  • contain 内容会保持本身的高宽比缩放（外框不会填满）
  • cover 内容保持本身高宽比的同时填充外框（会有裁剪）
  • fill 完全填充外框（会被拉伸适应外框高宽比）
  • none 保持原有尺寸

实际项目中推荐使用cover。

flex布局下text或者image大小适应

flex布局下的元素项，当文本text或者图片mage内容比项本身大，flexbox的默认行为就是：浏览器不会伸缩他们，会出现文本溢出的现象，即使使用 overflow-wrap: break-wrap 也不管用。

如何解决？

需要手动改变这个默认行为，需要给项设置min-width=0，因为min-width默认是auto，这也是产生溢出的原因。

.title {
	overflow-wrap: break-wrap;
	min-width: 0;
}

同样，如果是按列排列，就需要设置min-height=0;

图片最大宽

作为一般规则，不要忘记对所有图像设置max-width: 100%。这可以添加到您使用的CSS重置文件中。

默认背景

我们在设置头像或者某个头图时，正常规范的设计都会会有一个默认的头像或者背景图。假如们使用最简单的src替换方式，那么就需要在相关的每个JS中添加img.src || 'url'类似这种代码，但是如果后面整个产品升级，同样也需要做默认图片的升级，但是又需要保留以前老版本的使用，这个时候在不重新build的情况下是没有办法实现的。

所以需要通过一种更加简单更加统一的方式实现：使用CSS background。用头像来举个例子：

设计两层元素，父级元素div和子级元素img，给div添加一个default-avatar类名，这个类名需要设置一个默认background，img元素正常使用src的方式显示当前需要展示的图片。

  <style>
  .default-avatar{
    background:url("") no-repeat center;
    background-size:cover
  }
  </style>
  <div class="default-avatar">
        <img alt="" src="url" />
  </div>

这里如果有圆角的话，记得只需要设置父级元素的圆角，并且一定要加上overflow:hidden，不然子元素还是会把每个角都撑满。

未完待续

关于CSS的一些技巧远不止这些，目前总结的只是我经常能用到的地方。随着更多的CSS新属性的诞生，需要保持一直学习的态度，有些东西并不是为了一定要用在什么地方那个而去看，而是提前了解提前认识，为了以后的某个时刻。如果你之前看了，那么你就知道应该用什么，或者说，我为了解决这个问题，我应该搜索什么样的关键词。

转载自:https://juejin.cn/post/7240361633309507641
评论
请登录