最近在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/p/7bbc4860a45c

三、改变 input file的默认样式

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

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

利用jquery的代码实现如下

html布局

js
部分代码

css部分重点是css部分

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

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

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

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

解决方式汇总参考我的另一个文章：https://www.jianshu.com/p/0079624d240c

五、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

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

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

对于以上情景的总结如下：

1.vertical-align属性适用于非块级元素；

2.同一行内的俩元素，一行元素有固定高度的话，另一个要有等值的行高，然后给其中一个或者多个元素设置vertical-align属性，若效果不明显可以通过调整行高来微调；

3.如果布局是

可参照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属性

实例：实现两栏等高

2. 垂直水平居中

垂直居中可参考：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。

举例：

\

理论上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%最终效果完美。

布局

注意点：由于图片在拉伸或者压缩知乎会变形，所以要给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可以通过布局隐藏滚动条

十三、filter:blur()实现图片模糊效果

图片的模糊效果

先看效果对比

代码设置

项目中的应用

描述：背景是一张模糊的图片，同时有一个半透明蒙层

实现方法

html部分代码：

header是最外层的盒子，样式为

然后设置背景图的样式

当不给header添加overflow:hidden属性的时候，由于我们给背景图片使用了filter属性会导致背景图的阴影溢出，如下图

所以需要给header添加overflow:hidden属性

十四、圣杯布局与双飞翼布局

圣杯布局和双飞翼布局是前端工程师日常掌握的重要布局方式。两者的功能相同都是为了实现两侧的宽度固定，中间宽度自适应的三栏布局

圣杯布局是一种最常见的网站布局，页面从上到下，分成三个部分，头部、躯干、尾部，其中躯干又水平分成三个栏，从左到右为：导航栏、主栏、副栏

虽然两者的实现方法略有差异，不过都遵循了以下要点：

*两侧宽度固定，中间宽度自适应

*中间部分在DOM结构上优先，以便先行渲染

*允许三列中的任意一列成为最高列

*只需要使用一个额外的

下面将以此介绍圣杯布局和双飞翼布局的实现方式，并在最后根据个人思考对原有方法做出一些修改，给出其他一些可行的方案。

圣杯布局

1. DOM结构

首先定义出整个布局的DOM结构，主题部分就是由container包裹的center、left、right三列，其中center定义在前面。

2. css代码

假设左侧的固定宽度是200px,右侧的固定宽度是150px，则首先在container上设置

为左右两列预留出相应的空间，得到如下示意图：

随后分别为三列设置宽度与浮动，同时对footer设置清除浮动：

得到如下效果：

根据浮动的特性，由于center的宽度是100%，即占据了第一行的所有空间，所以left和right被挤到了第二行

接下来的工作是将left放置到之前预留出的位置，这里使用负外边距（margin的百分比是相对于父元素的宽度）：

得到：

随后还需要使用定位方法：

这里使用position：relative和right：200px将left的位置在原有位置基础上左移200px，以完成left的放置：

接下来放置right，只需要添加一条盛名即可：

得到最终的效果图：

至此布局效果完成，不过还需要考虑最后一步，那就是页面的最小宽度，但是这并不是简单的200+150=350px，回想之前left使用了position：relative，所以就意味着在center开始的领域，还存在着一个left的宽度（在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。），所以页面的最小宽度应该为200+150+200=550px:

综上所述：圣杯布局的css代码为

最后提醒一下很多朋友可能会忽略的小细节：在#center中，包含了一条声明width:100%;，这是中间栏能做到自适应的关键。可能会有朋友认为不需要设置这条声明，因为觉得center在不设置宽度的情况下会默认将宽度设置为父元素（container）的100%宽度。但需要注意到，center是浮动元素，由于浮动具有包裹性，在不显示设置宽度的情况下会自动收缩到内容的尺寸大小。如果去掉width:100%,则当中间栏不包含或者包含较少内容的时候，整个布局会崩溃，而打不到这样的效果：

我们还是把关键点用一个口诀记住：中间加 margin，左右加 float，先加左右，后加中间。

双飞翼布局

1.DOM结构

双飞翼布局的dom结构与圣杯布局的区别是container仅包裹住center，另外.coumn类从center移至container上。

2.css代码

按照与圣杯布局的思路，首先设置各列的宽度与浮动，并且为左右两列预留出空间，以及为footer设置清除浮动：

得到效果图如下：

以上代码将container，left，right设置为float：left，而container内部center由于没有设置浮动，所以其宽度默认为container 的宽度，通过对其设置margin-left和margin-right为左右两列预留出空间。

将left放置到预留位置：

得到：

将right放置到预留位置

最终得到的效果：

最后计算最小页面宽度：由于双飞翼布局没有用到position:relative进行定位，所以最小页面宽度应该为200+150=350px。但是当页面宽度缩小到350px附近时，会挤占中间栏的宽度，使得其内容被右侧栏覆盖，如下所示：

中间栏内容被覆盖

因此在设置最小页面宽度时，应该适当增加一些宽度以供中间栏使用（假设为150px），则有：

至此双飞翼布局大功告成！其布局整体代码为：

思考与总结

通过对圣杯布局和双飞翼布局的介绍可以看出，圣杯布局在dom结构上显的更加直观和自然，且在日常开发过程中，更容易形成这样的DOM结构（通常<aside>和<article>/<section>一起被嵌套在<main>中）；而双飞翼布局在实现上由于不需要使用定位，所以更加简洁，且允许的页面最小宽度通常比圣杯布局更小。

其实通过思考不难发现，两者在代码实现上都额外引入了一个

从这个角度出发，如果去掉额外添加的

DOM结构

去掉额外的<div>标签后，得到的DOM结构如上所示，基于双飞翼布局的实现思路，只需要在center上做出修改：

1.使用calc（）

通过calc()可以十分方便地计算出center应该占据的自适应宽度，目前calc()支持到IE9。

2. 使用border-box

使用border-box可以将center的整个盒模型宽度设置为父元素的100%宽度，此时再利用padding-left和padding-right可以自动得到中间栏的自适应宽度。不过需要注意的是，由于padding是盒子的一部分，所以padding部分会具有中间栏的背景色，当中间栏高于侧栏时，会出现这样的情况：

目前box-sizing支持到IE8。

3. 使用flex

这里使用flex还是需要与圣杯布局相同的DOM结构，不过在实现上将更加简单：

css代码如下：