一些工作实践中的css样式使用

2021-12-03 03:10:01

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

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

在前端开发时我们有时需要让图片显示在页面的中间位置，但是究竟应该怎么用代码实现呢？其实很简单哦

第一步：在页面中加载一张图片

效果如下

然后分别给图片和图片的父元素加载样式

效果图

另一种方法：

通过display:table-cell与vertical-align结合

看布局

css样式

最后的效果

二、改变 input file的默认样式

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

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

利用jquery的代码实现如下

html布局

部分代码

css部分重点是css部分

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

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

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

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

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

html结构

四、vertical-align的使用

w3c官网说明：vertical-align 属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。（重点1：行内元素；重点2：单元格内）

vertical-align是为了对齐文本和紧邻文本的元素。尽管如此，你也能在不同场景下使用vertical-align去进行灵活细微的元素对齐工作，而且你并不需要知道元素的具体尺寸。

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

使用vertical-align的前提条件

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

inline

inline-block

inline-table

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

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

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

首先看html代码

看css布局

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

2.右边小图跟标题部分的布局

3.最下边icon跟说明部分的布局

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

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

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

3.如果布局是<img>内容内容可参照w3c官网来学习。

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

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

这是像素级还原设计稿很有用的设置，因为元素节点有文本节点，在缩进代码时会占据宽度，这么说不好理解，演示如下：

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

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

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

3、对text-overflow:ellipsis,和white-space做一下解释

（1）text-overflow:ellipsis

text-ellipsis是一个特殊的样式，有关解释是这样的，text-overflow属性仅是注解，当文本溢出时是否显示省略标记，并不具备其他的样式属性定义。要实现溢出时产生省略效果还需要定义：强制文本在一行内显示（white-space:no-wrap）及溢出内容为隐藏（overflow:hidden）,只有这样才能实现溢出本文显示省略号的效果

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

(2)white-space

white-space属性声明建立布局过程中如何处理元素中的空白（这里的空白符应该指我们用键盘敲入的空格或回车，因为用或
无论white-space设置什么都会有空格或回车。）

下面w3c上white-space可能的值：

normal默认，空白会被浏览器忽略

pre空白会被浏览器保留，其行为方式类似HTML中的<pre>标签为止

nowrap 文本不会换行，文本会在同一行上继续，直到遇到 为止。

pre-wrap保留空白符序列，但是正常的进行换行。

prw-line 合并空白符序列，但是保留换行符；

inherit 规定应该从父元素集成white-space属性的值

七、纯CSS正方形自适应9宫格图片布局

先看效果图

CSS部分

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

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