去除inline-block 元素间间距的方法

现象：真正意义上的inline-block 水平呈现的元素间，换行显示或空格分隔的情况下又间距。

  1. 元素本身就是inline-block
  3. <input /> <input type="submit" />
  6. 设置属性为inline-block的元素
  8. .space a {
  9.     display: inline-block;
  10.     padding: .5em 1em;
  11.     background-color: #cad5eb;
  12. }
  13. <div class="space">
  14.     <a href="##">惆怅</a>
  15.     <a href="##">淡定</a>
  16.     <a href="##">热血</a>
  17. </div>

解决方案

1.移除空格
2.使用margin负值

  1. .space a {
  2.     display: inline-block;
  3.         margin-right:-3px;
  4. }

3.font-size:0(使用方案)

  1. .space {
  2.     font-size: 0;
  3. }
  4. .space a {
  5.     font-size: 12px;
  6. }

4.letter-spacing

  1. .space {
  2.     letter-spacing: -3px;
  3. }
  4. .space a {
  5.     letter-spacing: 0;
  6. }

display:table 应用场景

动态垂直居中对齐

css Table布局-display:table

  1. .menu{
  2.     display:table
  3. }
  4. .text{
  5.     display:table-cell
  6.   vertical-align:middle
  7. }

图片统一大小后的拉伸问题

文章

需求：要求图片的大小都固定
场景：图片的原始大小都不一样，强行设定大小值会导致拉伸，如果不设定大小参差不齐

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         img{
  9.             width: 150px;
  10.             height: 150px;
  11.             /* background-size: cover; */
  12.             object-fit: cover;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div>
  18.         <img src="https://dummyimage.com/200x200/000/fff" alt="">
  19.         <img src="https://dummyimage.com/170x200/000/fff" alt="">
  20.         <img src="https://dummyimage.com/230x200/000/fff" alt="">
  21.         <img src="https://dummyimage.com/280x200/000/fff" alt="">
  22.         <img src="https://dummyimage.com/150x150/000/fff" alt="">
  23.     </div>
  24. </body>
  25. </html>

解决方案

1.cover
缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
cover值 尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）

优点：背景图片全部覆盖所属元素区域
缺点：超出的部分会被隐藏

  1. background-size:cover;

2.object-fit
场景 : 使用 img 标签来引入图片时。

  1. object-fit: cover;

cover: 被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。

引入style的位置的区别

优先级不同，就近原则，离标签越近的style优先级越高，body的优先级高于head

如果将css放在头部，css的下载解析式可以和html的解析同步进行的
如果放在body，在body开始之前声明了css时，样式实际上已经加载了，因此用户很快就会看到屏幕上出现的内容(例如背景颜色)。且在解析声明的样式时，浏览器必须重新呈现页面，加载时新旧。

右侧出现滚动条导致页面抖动

场景：在页面内容没有占满屏幕时右侧不会出现滚动条，当再加载内容时页面会出现右侧滚动条，页面宽度由于是auto，整个页面会向左移动

  1. html {  
  2. overflow-x: hidden;  
  3. overflow-y: auto;  
  4. }  
  5. body {  
  6. width: 100vw;  
  7. overflow: hidden;  
  8. padding-right: calc(100vw - 100%);  
  9. }

网站字体样式自定义

  1. @font-face {
  2.   font-family: mFont;
  3.   src: url('../font/crapaud_petit.ttf');
  4. }
  6. font-family ： 该字体引用名，方便引用
  7. src:url()   ： 本地字体资源.ttf的相对路径
  9. //页面中使用
  10. body{
  11.     font-family:mFont;
  12. }

滚动条 scrollbar 出现造成页面宽度被挤

https://segmentfault.com/a/1190000017044563

overflow
overlay
行为与auto相同，但滚动条绘制在内容之上而不是占用空间。 仅在基于WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。

利用vw和calc实现
因为100vw是window的宽度，其实就是window.innerWidth, 而容器的宽度100%就是除了滚动条的可用宽度，因此在没有滚动条时候calc(100% - 100vw)就是0，触发滚动条时候其值为负的滚动条宽度，我们将其赋值给容器的margin-right，即可巧妙补偿这个宽度的挤压，在滚动条存在的情况下容器宽度仍然占据整个视口的宽度。

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. html {
  6.   overflow-y: auto;
  7.   overflow-x: hidden;
  8. }
  9. .container {
  10.   height: 2000px;
  11.   margin-right: calc(100% - 100vw);
  12.   padding: 17px;
  13.   background-color: #00b83f;
  14.   text-align: right;
  15. }

margin : top 显示在另一个div之上

场景：两个兄弟节点，想让div2 显示在 div1 之上，但是div2 会被div1 盖住
原因：可能是你的节点一设置了position：relative;属性，但是第二个节点没有设置
解决：设置 position:relative 属性

背景图片自适应

场景：网站banner图片是根据浏览器页面整屏幕显示的，通过 background : url() ;属性进行设置的，这时候需要根据网站的拉伸进行图片的自适应调整。

  1. background-size:100% 100%;

table 表格（tr）行间距

注：给 tr 加 margin 不会生效

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，它的属性值如下：

值 描述
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承 border-collapse 属性的值。

border-collapse属性加上border-spacing属性就可以设置tr行间距

  1. table{
  2.     border-collapse: separate;
  3.     border-spacing: 5px 10px;
  4. }

如何修改 placeholder 样式

  1. <style>
  2.     input::placeholder {
  3.         color: green;
  4.     }
  5. </style>
  7. <input type="text" placeholder="hello world" style="color: red;">

IE解决方案:
首先IE9及以下不支持placeholder。IE10需要用:-ms-input-placeholder,并且属性需要加上!important提高优先级。

  1. <style>
  2.     input:-ms-input-placeholder {
  3.         color: green !important;
  4.     }
  5. </style>
  6. <input type="text" placeholder="hello world" style="color: red;">

overflow 不出现滚动条

备注：隐藏横向（x轴）滚动条且可以正常滚动，在pc端无法实现，只有在移动端模式下才可以正常滚动。

首先，如果需要隐藏滚动条并在内容溢出时显示滚动条，只需要设置overflow：auto样式即可。想要完全隐藏滚动条只需设置overflow：hidden即可，但是这样一来将导致元素内容不可滚动。时至今日，还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容，只能通过针对特定浏览器设置滚动条样式来实现。

Firefox浏览器

  1. scrollbar-width: none; /* Firefox */

IE浏览器

  1. -ms-overflow-style: none; /* IE 10+ */

chrome 和 safari 浏览器

  1. ::-webkit-scrollbar {
  2.   display: none; /* Chrome Safari */
  3. }

注意：当你要隐藏滚动条的时候，最好将overflow显示设置为auto或者scroll保证内容是可滚动的。

示例
我们使用上面的CSS属性以及溢出实现下面一个实例——隐藏水平滚动条，同时允许垂直滚动条：

  1. .demo::-webkit-scrollbar {
  2.   display: none; /* Chrome Safari */
  3. }
  5. .demo {
  6.   scrollbar-width: none; /* firefox */
  7.   -ms-overflow-style: none; /* IE 10+ */
  8.   overflow-x: hidden;
  9.   overflow-y: auto;
  10. }

http://caibaojian.com/hide-scrollbar.html