开发者社区> 廊桥梦醉> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

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

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

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

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

img_40508deeaaac9318678617d9caa7249e.png

效果如下

img_1064a75cdeb071c4dd959f0bd1ce02b0.png

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

img_2f7d050b8e253e88d4a8704ae3b260eb.png

效果图

img_550c6013f5ba6d5abcc2881b08485f5e.png

另一种方法:

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

看布局

img_36545873e689a4f105648463c55abadb.png

css样式

img_7d8c722089ec132f68ec552bff316e81.png

最后的效果

img_2c4c367e228d3d2538c0c4ed444b3e91.png


二、改变 input file的默认样式

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

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

利用jquery的代码实现如下

html布局

img_7ea800a5a84d6846be8a93a003675cda.png

js

部分代码

img_31d7f2ad1f3fd21a23a03f5613d32323.png

css部分重点是css部分

img_0cf394e2ecb15f7bb015feef9c088e99.png

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

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

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

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

img_4c7502d503db2b10b60597fafc7b4cc2.png

具体是通过css实现,代码如下:

img_f98e6385433aecffa5b1799f56145c59.png

html结构

img_5fa4fd3e00bcd8c6f45be8e4805b1379.png

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

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

img_868af3315071d975b8bc9876b5678084.png

首先看html代码

img_a98038ddc0e7e47d8189f1525df36b5a.png

看css布局

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

img_fb31ae7680b406e7b87b03e6c95c5c7c.png

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

img_a3952003624b374f5db810188723e6fd.png

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

img_3101729fd3d86d526112a9916753ab9a.png

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

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

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

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


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

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

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

HTML

img_f20b1cfd7e028ed23225d6a476654b44.png

css

img_de6208a48bcb2b7a3559dee30cbdba95.png

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

img_5e9ce8bb43c9019baadffb969306bb3c.png

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

img_4b028ff60342a15dba6ca6a010e61cc2.png

总结:

1、可以看到这才是我们想要的结果,因此在实际开发中,为了更好的还原设计稿,在父元素很有必要设置font-size:0,避免莫名其妙的间距。

2、这种情况的另一种解决方式:去掉空白部分。(不采用,例子如下:)

img_b9f8bc9d352682a1d4387b3bd0fd4c4a.png

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

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

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

img_3b289ffc24f0dcde717af615050fce01.png

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

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

img_358373b3b7073f5f37fc07606ae5eebf.png

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 文本不会换行,文本会在同一行上继续,直到遇到<br>为止。

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

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

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

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

先看效果图

img_66c53f88053949f523196c62a6520d44.png

CSS部分

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

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

img_0f121820b6878663b120802b321fb9d2.png

布局

img_7f360750ff3a5d484429bb208dd67eb3.png

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

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

父容器使用伪类:after跟zoom

这种方式是最推荐的,目前大多数大型网站都是使用这种方式清除浮动,浏览器兼容好,不会出现什么奇怪的问题。

zoom是IE专有属性,可解决ie6,ie7浮动问题,IE8以上和非IE浏览器才支持伪类:after。

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

但推荐使用,可将改样式定义为公共样式,减少代码量

clearfixf:after{

display:block;

height:0;

content:'.';

visibility:hidden;

clear:both;

}

clearfix:{

zoom:1

}

null

代码如下:

img_9f35721bb87f7b4856e6a465d462913a.png

实现效果

img_752ae76d971086ee2048b8e3314f45a6.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
dom修改css样式
CSS-DOM: style属性是对象类型 nodeName是tring类型 如果文档的内容需要定期编辑和刷新 添加class属性的工作就会变成一种负担 如果文档内容需要一个CMS来处理 给文档内容的个别部分添加class属性或者其他样式的做法有时是不被允许的 font-size属性要用元素.
3163 0
CSS_边框样式
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/54729515 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
750 0
CSS简单使用
CSS简单使用 标签 : 前端技术 CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果.
901 0
css知多少(4)——解读浏览器默认样式
原文:css知多少(4)——解读浏览器默认样式   上一节《css知多少(3)——样式来源与层叠规则》介绍了样式的五种来源,咱们再通过一张图回顾一下。      对于上面的三层,咱们大概都比较熟悉了。
833 0
使用CSS
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 selector {declaration1; declaration2; ... declarationN } 选择器通常是您需要改变样式的 HTML 元素。
561 0
用CSS来改变网页鼠标显示样式的方法
一般而言,鼠标以斜向上的箭头显示,移到文本上时变为有头的竖线,移到超级链接上变为手型。但用css可控制鼠标的显示效果,如可使鼠标移到普通文本上也显示成手型。 用css控制的语法如下: 文本或其它页面元素 把 * 换成如下15个效果的一种: hand、crosshair、text、wait、default、help、e-resize、ne-resize、n-resize、nw-resize、w-resize、sw-resize、s-resize、se-resize和auto。
775 0
+关注
廊桥梦醉
对我来说,博客首先是一种知识管理工具,其次才是传播工具。我的技术文章,主要用来整理我还不懂的知识。我只写那些我还没有完全掌握的东西,那些我精通的东西,往往没有动力写。炫耀从来不是我的动机,好奇才是。
89
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载