工作实践中的css样式使用

最近在git上看到了这样一个文件https://github.com/chokcoco/iCSS，关于css实现的一些很不错的样式，所以准备自己总结一下自己项目中用到的一些样式。

一、css中可以继承与不可以继承的一些属性

无继承性的属性

1、display：规定元素应该生成的框的类型

2、文本属性：
        vertical-align：垂直文本对齐
        text-decoration：规定添加到文本的装饰
        text-shadow：文本阴影效果
        white-space：空白符的处理
        unicode-bidi：设置文本的方向

3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性：content、counter-reset、counter-increment

7、轮廓样式属性：outline-style、outline-width、outline-color、outline

8、页面样式属性：size、page-break-before、page-break-after

9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

有继承性的属性

1、字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

3、元素可见性：visibility

4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性：quotes

7、光标属性：cursor

8、页面样式属性：page、page-break-inside、windows、orphans

9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

所有元素可以继承的属性

1、元素可见性：visibility

2、光标属性：cursor

内联元素可以继承的属性

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

块级元素可以继承的属性

text-indent、text-align

二、怎么使用CSS让图片水平垂直都居中

参考另一篇文章：https://www.jianshu.com/writer#/notebooks/20757449/notes/37778904

三、改变 input file的默认样式

我们在做input文本上传的时候，html自带的上传按钮比较丑，如何对其进行美化呢？

input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。

利用jquery的代码实现如下

html布局

js

部分代码

css部分重点是css部分

在vue中的使用，可以通过数据绑定来实现上传文件名称的改变，这里不再多说！

四、移动端1px边框的实现

在高清屏幕上，border-width:1px;并不是最小边框，移动端浏览器可以显示的最小颗粒比css中1px还要小

首先看一下在移动端效果对比

具体是通过css实现，代码如下：

html结构

五、vertical-align的使用

适用于行内元素和单元格（重点1：行内元素；重点2：单元格内）vertical-align是为了对齐文本和紧邻文本的元素。

深入了解原因可参考：https://www.jianshu.com/p/71a03b8f6eb6

使用vertical-align的前提条件

vertical-align用于对齐行内级元素。行内级元素的display属性是如下值中的一种：
inline
inline-block
inline-table

行内元素垂直居中或者顶部对齐，底部对齐（以顶部对齐为例）

为了避免由于元素之间莫名产生的空隙，特别设置父元素的font-size的值为0

首先看一下要达到的效果图（左大图与右边文字顶部对齐，另外两个小图片与同一行的文字也是顶部对齐，但是看图貌似是中部对齐，所以可以通过调整右边文字的行高实现真正的顶部对齐）

效果图 html代码

1.左边大图与右边的布局

左边大图与右边的布局css布局   右边小图跟标题部分的布局   最下边icon跟说明部分的布局

对于以上情景的总结如下：
1.vertical-align属性适用于非块级元素；
2.同一行内的俩元素，一行元素有固定高度的话，另一个要有等值的行高，然后给其中一个或者多个元素设置vertical-align属性，若效果不明显可以通过调整行高来微调；
3.如果布局是<p><img><span>内容内容</span></p>可参照w3c官网来学习。

六、display:table-cell的等高布局

display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的。单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的。

与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

想了解更多，请查看张鑫旭老师的文章《我所知道的几种display:table-cell的应用》

以及简书的另一片文章 https://www.jianshu.com/p/2479665ee1f8

1.等高布局

table表格中的单元格最大特点之一就是同一行列表元素都等高，所以很多时候我们需要等高布局的时候就可以借助display：table-cell属性

实例：实现两栏等高

html 效果图

2. 垂直水平居中

html 效果图

垂直居中可参考：8种垂直居中的方式https://www.jianshu.com/writer#/notebooks/20757449/notes/37778904

七、给父元素设置font-size=0属性

问题的根源是 inline（a标签默认是display:inline） 和 inline-block (.list 设置的是 display:inline-block) 是内联布局，既然是内联那么就会受空白区域的影响，会有默认的属性，比如：p标签有默认的padding。

举例：

HTML css

理论上box下面的三个div都是30px，刚好在一行显示，但是实际效果是这样的：

这就是上文说到的原因，我们在box下添加 font-size:0; 再看看效果

总结：
1、可以看到这才是我们想要的结果，因此在实际开发中，为了更好的还原设计稿，在父元素很有必要设置font-size:0，避免莫名其妙的间距。
2、这种情况的另一种解决方式：去掉空白部分。（不采用，例子如下：）

八、CSS控制文字只显示规定行数，超出部分显示省略号

1、单行文字超出部分显示省略号

可以实现超出部分显示省略号的效果的元素必须是：(1)配置为inline-block或block的元素，或者默认为block的div、p元素;(2)强制不换行white-space:no-wrap；（3）固定宽度；（4）超出部分隐藏 overflow:hidden；（5）超出部分以‘...’结尾text-overflow:ellipsis

总结：简单理解就是要把文本限制在一行，肯定这一行的宽度是有限制的（width），强制不换行（white-space:no-wrap），并且你的溢出部分要隐藏起来（overflow:hidden）,然后出现省略号（text-overflow:ellipsis）;

2、多行文字超出部分显示省略

（1）将对象作为弹性伸缩盒子模型显示display：-webkit-box;(2)从上到下垂直排列子元素，设置伸缩盒子的子元素排列方式 -webkit-box-orient:vertical;(3)-webkit-line-clamp:2,这个属性不是css的规范属性，结合上边两个属性，表示显示的行数（4）超出部分隐藏；（5）超出部分'...'显示；（6）对元素的是行内元素还是块级元素不做要求。

九、纯CSS正方形自适应9宫格图片布局，未加载前显示占位符

先看效果图

重点是：给image的父盒子相对定位,height设置为0，height设置为0，依然可以撑开的黑魔法就是下边的padding，黑魔法的时刻就是将padding-top或者padding-bottom设置为跟盒子宽度一样,w3c也提过，当我们给padding设置100%的时候，是相对盒子的宽度设置的百分比，也就是保证了padding值跟盒子的宽度是一致的，所以这个盒子看起来就是一个宽高相等的容器。

然后给图片设置绝对定位，宽度和高度都为100%最终效果完美。

CSS部分

布局

注意点：由于图片在拉伸或者压缩知乎会变形，所以要给img标签添加属性：object-fit:cover属性，防止图片变形。

十、清除浮动(最常用的方式)

父容器使用伪类:after跟zoom
        这种方式是最推荐的，目前大多数大型网站都是使用这种方式清除浮动，浏览器兼容好，不会出现什么奇怪的问题。
        zoom是IE专有属性，可解决ie6,ie7浮动问题，IE8以上和非IE浏览器才支持伪类:after。

缺点：就是代码比较多，需要伪类:after跟zoom一起使用才能兼容所有主流浏览器。

但推荐使用，可将改样式定义为公共样式，减少代码量
clearfix:fafter{
        display：block；
        height：0；
        content:'.';
        visibility:hidden;
        clear:both;
}

clearfix:{   
        zoom:1
}

十一、sticky footers布局

sticky footers解决的问题是，当页面的内容不够长的时候，页脚块粘贴在视窗底部，如果内容足够长的话，页脚块会被内容向下推送。

我现在介绍的是相对复杂，但是兼容性最好的方案

首先看布局

重点说一下css

detail是最外层的包裹元素，需要给元素固定定位，height、width都是100%；并且让多出来的元素可以滚动查看，所以添加overflow:auto属性，弹层一般都是有颜色的，所以添加背景颜色为rgba(7,17,27,0.5)

detail-wrapper跟detail-close是同一级元素，.detail-close不多说是关闭按钮的盒子为了在屏幕内容不满一屏的时候显示在最下边，需要给元素添加负margin-top;detail-wrapper是内容的盒子设置最小的高度是屏幕的高度即min-height:100%;

重点是detail-main的样式添加，padding-bottom,这个属性是必须的，为了让关闭按钮不遮挡内容；

具体css样式如下

当内容未满一屏幕的时候的最终效果如下

当内容超过一屏幕之后的效果

最后给大家推荐一个网站来更深一层的学习sticky footers布局https://www.w3cplus.com/css3/css-secrets/sticky-footers.html

补充：利用flex布局也可以实现同样的效果，代码如下

十二 、css 改变scroll滚动条的样式
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/兼容性不好
::-webkit-scrollbar{
        width:10px;
        height:10px;
        background-color:red;
  }

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
        -webkit-box-shadow:inset0 06px rgba(0,0,0,0.4);
        border-radius:20px;
        background-color:red;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
        border-radius:20px;
        -webkit-box-shadow:inset0 06px rgba(0,0,0,.3);
        background-color:red;
}

ps可以通过布局隐藏滚动条