![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
Let dreams fly
一定要学习,才能提高自己!
展开
-
设置文字两边对齐
设置文字两边对齐1.css.text-justify{ text-align-last: justify; text-align: justify; text-justify: distribute-all-lines;}原创 2021-04-16 15:50:26 · 272 阅读 · 0 评论 -
css实现高斯模糊效果
css模糊效果1.css -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);原创 2020-04-13 10:50:58 · 2019 阅读 · 0 评论 -
什么是FOUC?如何避免FOUC?
什么叫做 FOUC 浏览器样式闪烁这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC.在引用css的过程中,如果方法不当或者位置引用不对,会导致某些页面在windows下的ie出现一些奇怪的现象,以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效,简称FOCU原因大致为:1,使用import方法导入样式表;2,将样式表...原创 2019-10-11 11:06:28 · 1782 阅读 · 0 评论 -
css实现骨架屏
css实现骨架屏1.css@-webkit-keyframes skeleton-ani { 0% { left: 0 } to { left: 100% }}@keyframes skeleton-ani { 0% { left: 0 } to { left: 100% }}.skt-loading .skeleton { positi...原创 2019-09-20 14:11:49 · 2410 阅读 · 0 评论 -
html中禁止文字被选中
html中禁止文字被选中user-select:none |text| all | element取值:none:文本不能被选择text:可以选择文本all :当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。element:可以选择文本,但选择范围受元素边界的约束说明:1.IE6-9不支持该...原创 2019-05-23 16:11:38 · 28641 阅读 · 0 评论 -
css变量
css变量1.html<body> <header id="main-header"> <h1>css 变量</h1> </header> <div class="container"> <div class="grid"> ...原创 2019-04-17 11:13:34 · 243 阅读 · 0 评论 -
前端常见知识总结
前端常见知识总结1.盒模型盒模型由margin、border、padding、content组成。盒模型有两种标准,一个是标准模型,一个是IE模型。标准盒模型的宽高只是内容(content)的宽高,而在IE中盒模型的宽高为边框(border)+填充(padding)+内容(content)的总宽高。2.sessionStorage、localStorage和cookie的区别共同点...原创 2019-03-26 09:23:08 · 453 阅读 · 1 评论 -
css解决纯数字或字母不自动换行
css解决纯数字或字母不自动换行1.css word-break: break-all;效果:原创 2018-07-06 09:10:26 · 25151 阅读 · 0 评论 -
常用css类合集
建站常用css类合集简介:每当我们新开一个项目时,无论我们是pc端还是移动端网站,无论是引用前端框架还是自己开发,总会用到某些公用的样式,所以我将自己常用的进行了整理。/*border*/.border0 { border: 0 !important;}/* color */.text-black { color: #333333;}.text-grey-we...原创 2018-07-04 13:53:32 · 493 阅读 · 0 评论 -
修改输入框placeholder文字样式(颜色、字号等)
修改输入框placeholder文字样式(颜色、字号等)1.html<input type="text" placeholder="请输入文本" />2.cssinput::-webkit-input-placeholder,textarea::-webkit-input-placeholder { color: red;}input:-moz-place...原创 2018-06-21 09:05:05 · 6619 阅读 · 0 评论 -
css单行文本溢出显示省略号
css单行文本溢出显示省略号1.css.text { overflow: hidden; text-overflow: ellipsis; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }...原创 2018-05-22 10:39:55 · 449 阅读 · 0 评论 -
label文字 与input 不在一条直线上解决方案
label文字 与input 不在一条直线上解决方案1.html<div> <input class="form-input" type="checkbox" /> <label>全选</label> </div>2.css.form-input { float: left; }效果:...原创 2018-05-22 10:40:19 · 9182 阅读 · 3 评论 -
css或css3元素垂直水平居中
css元素垂直水平居中本文章提供以下7种垂直水平居中的方法,具体用哪种见仁见智。1.利用css3的transform属性,同时将它内部的img垂直居中<div class="transform"><img src="favicon.ico" /></div>.transform { width: 300px; height: 300px; te...原创 2018-05-21 13:18:25 · 2439 阅读 · 0 评论 -
css+html实现时间轴
css+html实现时间轴1.css body { font-size: 12px; } ul li { list-style: none; } .track-rcol { width: 100%; border: 1px solid #eee; } .track-list { margin: 20px; padding-l...原创 2018-05-21 09:58:21 · 39290 阅读 · 6 评论 -
css修改滚动条默认样式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>css修改滚动条默认样式</title> </head> <style> .inner { width: 100%; height: 2原创 2018-05-18 10:48:36 · 1202 阅读 · 0 评论