【CSS】小妙招,各种问题总结方法处理
1.实现div文字溢出自动省略号截取
overflow:hidden; /*超过部分不显示*/
text-overflow:ellipsis; /*超过部分用点点表示*/
white-space:nowrap;/*不换行*/
2.规定行数的截取效果
text-overflow: ellipsis; /*有些示例里需要定义该属性,实际可省略*/
display: -webkit-box;
-webkit-line-clamp: 2;/*规定超过两行的部分截断*/
-webkit-box-orient: vertical;
overflow : hidden;
word-break: break-all;/*在任何地方换行*/
3.修改默认radio按钮样式
默认的radio样式非常的难看,并且不容易布局所有我们有时候需要修改为自定义的样式或者颜色。基本分为五步:
第一步:就是我们的html结构:
<input id="word" type="radio" name="a" /><label for="word">word</label>
<input id="excel" type="radio" name="a" /><label for="excel">excel</label>
第二步:生成一个伪元素,作为美化版的单选按钮,先给伪元素添加一些样式,这里可以自定义样式效果
input[type="radio"] + label::before {
content: "\a0"; /*不换行空格*/
display: inline-block;
vertical-align: middle;
font-size: 18px;
width: 15px; /*没有选中时的按钮大小*/
height: 15px; /*没有选中时的按钮大小*/
margin-right: 8px; /*按钮与文字的间距*/
border-radius: 50%;
border: 1px solid #01cd78;
text-indent: 10px;
line-height: 1;
}
第三步:选中按钮时候的样式效果
input[type="radio"]:checked + label::before {
background-color: #01cd78;
background-clip: content-box;
padding: 2px;
width: 11px; /*选中后的按钮大小*/
height: 11px; /*选中后的按钮大小*/
}
第四步:隐藏原来的按钮
input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
第五步:参考文献:https://www.cnblogs.com/xinjie-just/p/5911086.html
4.inline-block属性间距
现象分析
此问题是设置样式属性displayinline-block。应用常例是li属性设置水平放置后出现间隙。
照图说话;
例如上图很明显可以看出第二行间隙比第一行小,第一行为间隙样例,我本来设置两个li之间间距为15应该为第二行效果,但是在html写出代码:
<li><img /><div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio4" type="radio" name="fileRadio"><label for="radio4"></label></li>
<li><img /><div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio5" type="radio" name="fileRadio"><label for="radio5"></label></li>
<li><img /><div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio6" type="radio" name="fileRadio"><label for="radio6"></label></li>
效果就是第一行的效果,第二行是使用js进行添加的li就是正确的margin-right:15px. 而第二行确多出一部分空隙。然后我再次修改html代码为:
<li><img /><div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio4" type="radio" name="fileRadio"><label for="radio4"></label></li><li><img /><div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio5" type="radio" name="fileRadio"><label for="radio5"></label></li><li><img /><div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio6" type="radio" name="fileRadio"><label for="radio6"></label></li>
效果为:
这样就没有间隙了,看出问题所在了,就是因为写代码元素标签之间的空格所致。但是我们有不能所有的代码都按照写在一行,一是不易于读不易于维护,二是很乱。
解决方案总结:
- 写成一行(不可取也是一种方式,,哈哈哈)
- 第二中就是有规则分分行,例如我这个就可以这样写:
<li><img /><div>党的进什么文得很受打击.jpg</div><input id="radio1" type="radio" name="fileRadio"><label for="radio1"></label></li><li><img /><div>
党的进什么文件但还是觉得很受打击.jpg</div><input id="radio2" type="radio" name="fileRadio"><label for="radio2"></label></li><li><img /><div>
党的进什么文件但还是觉得很受打击.jpg</div><input id="radio6" type="radio" name="fileRadio"><label for="radio6"></label></li>
3. 借助注释语句来去除空格
<li><img /><div>党的进什么文得很受打击.jpg</div><input id="radio1" type="radio" name="fileRadio"><label for="radio1"></label></li><!--
--><li><img /><div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio2" type="radio" name="fileRadio"><label for="radio2"></label></li><!--
--><li><img /><div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio6" type="radio" name="fileRadio"><label for="radio6"></label></li>
4. 不写结束标签,就是li的结束标签不写即可:
<li><img /><div>党的进什么文得很受打击.jpg</div><input id="radio1" type="radio" name="fileRadio"><label for="radio1"></label>
<li><img /><div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio2" type="radio" name="fileRadio"><label for="radio2"></label>
5. 样式的问题还是采用样式解决,哈哈使用文字间距属性letter-spacing。只需要在间隙元素上设置为0px,然后看多出多少元素在简单元素的父元素设置负数值就好了。例如我这个就是在li元素设置{ letter-spacing:0px;}然后在父元素设置ul{letter-spacing:-8px}
5.calc计算属性
左右布局中一部分定值一部分比例布局,这个时候是不是很纠结,一部分是需要固定的宽度,另一部分想根据浏览器大小自动适应。
完美的计算就是自适应部分使用百分百布局,可是又不能100%,因为已经被占用了一部分定值。这个时候就需要calc计算属性了,你可以写成:100% - 定值 这样规定宽度,相当于在这个宽度属性这里写了一个百分百布局只是减去的一些值。
.content_left {
background-color: cadetblue;
width: 200px;
height:100%;
border: 1px solid #D0D6D9;
}
.content_right {
background-color: cornflowerblue;
/*注意使用时计算符号前后要空格*/
width: calc(100% - 215px);
height: 100%;
margin-left: 10px;
border: 1px solid #D0D6D9;
}
6.左右float布局后父元素没有自适应高度
这个是实际项目中发现的问题,在一个大的div中放置两个子div元素进行左右布局:float: left;和float:right;之后父div没有适应子元素高度,父元素高度为0;
解决办法:父元素div增加:overflow:hidden;
或者使用双伪元素法:
/*清除浮动*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
} .clearfix:after {
clear: both;
} .clearfix {
zoom: ; /*IE678*/
}
7.根据页面切换不同的IE文档模式
很多时候我们都不注意低版本的文档切换,因为新项目很少要I8以下了。很不幸的遇到了老项目整合或者老项目扩展新功能。
例如老项目只支持ie8以下,而你的新页面是IE9起步,恭喜你拉哈哈。你不会让用户去按F12根据不同的页面切换文档模式的太傻了。那怎么办,当然是我们自动切换了。
我们使用x-ua-compatible属性:IE以后增加的新属性,用来进行切换ie浏览器渲染方式。(当然首先保证你环境存在)
例如我上面说到的情况就可以这样处理:
老版本在head标签中增加:
<head>
<meta http-equiv="x-ua-compatible" content="IE=7,IE=8" />
</head>
新版本在head标签中增加:
<head>
<meta http-equiv="x-ua-compatible" content="IE=9" />
</head>
还有一种就是永远使用最新版本这样就不怕浏览器升级了:
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge" />
</head>
8.边框属性的位置
我们在布局的时候往往会产生边框导致布局错乱的现象,这就是边框产生的位置导致的。边框产生的位置只有两个地方,在内容内,在内容外,请看下面介绍。
box-sizing:这是一个css3的属性他用来控制边框的位置产生在哪里。
box-sizing:border-box:产生在内容内,简单来说就是如果你设置一个div宽和高都是50px,然后设置边框宽度为1px,如果设置属性,那么你可用的内容宽像素是48px=50px-2px(左右两个边框),高同理。
box-sizing:content-box:产生在内容外,这个好理解,也是我们最普遍见到的,就是在内容外绘制边框。例如还是上面,设置了50px后,你可用内容宽像素还是50不会变化。这个就是有时候我们设置好两个并排元素宽相加等于父元素但是第二个会被挤下去的原因。
【CSS】小妙招,各种问题总结方法处理的更多相关文章
- 一种比css_scoped和css_module更优雅的避免css命名冲突小妙招
css_scoped 与 css_module 我们知道,简单的class名称容易造成css命名重复,比如你定义一个class: <style> .main { float: left; ...
- Angular+ionic2 web端 启动程序出现短暂 白屏或黑屏 的处理小妙招
在ionic2项目启动是会出现短暂的白屏或者黑屏,虽然很短,但是用户体验不太好.上网查了相关的资料,都是针对打包APP的解决办法,针对浏览器端使用的项目没有效果,所以自己写了样式,巧妙的避开这个问题, ...
- Angular 开发小妙招1:提交表单数据验证不通过,更改输入组件的样式
开发表单时,客户端数据完整性校验是必不可少的,在jquery 时代出现了无数的数据验证插件也很好用,开发Angular 应用时,angular 内置了一些常用的数据验证指令.今天要讲的不是这些指令如何 ...
- 14个Linux系统安全小妙招,总有一招用的上!
对于互联网IT从业人员来说,越来越多的工作会逐渐转移到Linux系统之上,这一点,无论是开发.运维.测试都应该是深有体会.曾有技术调查网站W3Techs于2018年11月就发布一个调查报告,报告显示L ...
- 关于MySQL索引知识与小妙招 — get get get
一.索引基本知识 1.1 索引的优点 大大减少了服务器需要扫描的数据量,加快数据库的检索速度 帮助服务器避免排序和临时表 将随机io变成顺序io 1.2 索引的用处 速查找匹配WHERE子句的行 从c ...
- 【转】一个小妙招能让你在服装上省下好多rmb
朋友们,你们仔细算过自己每年在淘宝上买衣服消费了多少rmb吗?100?1000?10000?甚至更多? 朋友们,你知道淘宝上大多数店铺的衣服是哪里来的吗? 朋友们,你知道怎么在这上面能节省更多的mon ...
- 这里有40条提升编程技能小妙招!还有TIOBE 7月份的编程语言排行榜
如何提高编程技能?恐怕很多开发者思考过这个问题.最近,拥有将近 15 年开发经验的软件工程师 Kesk -*- 写了一篇博客,列举了 40 条对其职业生涯有所帮助的事项. 或许,通过以下 40 个 ...
- 下载kaggle数据集的小妙招
kaggle是很多数据分析和机器学习初学者非常喜爱的数据科学竞赛平台. 这个平台上有很多接近现实业务场景的数据集,非常适合练手. 今天向大家推荐一个下载kaggle数据集的小工具--kaggleAPI ...
- Web开发小妙招:巧用ThreadLocal规避层层传值
摘要:我们可以在处理每次请求的过程中,无需从Controller以及Service中的方法层层传值,只需要直接通过该局部变量取值即可. 本文分享自华为云社区<拦截器中巧用ThreadLocal规 ...
随机推荐
- jdango
1.jdango的下载 命令行: pip install django ==1.11.18 pip install django ==1.11.18 -i https://pypi.douban.co ...
- 多级路由请求js文件路径不对的解决方法
1.问题描述 最近因为项目的原因开始学习vue,看了几天教程然后开始撸项目.撸的过程也挺顺利,撸了一个多月项目要上线的时候却出现了问题——用history模式打开网站的时候,从导航点到具体的内容页是正 ...
- Oracle 树操作、递归查询(select…start with…connect by…prior)
一.Oracle中start with…connect by prior子句用法 connect by 是结构化查询中用到的,其基本语法是:select … from tablename start ...
- 使用通配符和泛型:完成父子类关系的List对象的类型匹配
泛型和通配符 使用泛型和通配符都可以让一个方法所表示的算法逻辑适应多种类型. Java中具备继承关系的类A.B(A extends B)它们的集合List<A>和List<B> ...
- spark-submit(spark版本2.4.2)
spark-submit官方文档 :http://spark.apache.org/docs/latest/submitting-applications.html Launching Applica ...
- 吴恩达机器学习笔记1-单变量线性回归(Linear Regression with One Variable)
在监督学习中我们有一个数据集,这个数据集被称训练集.
- feh: linux终端下看图片的好工具
1) 普通浏览 $ feh * 可以察看当前目录下的所有图片,以及当前子目录里的所有图片 2) 播放幻灯片 (-D) $ feh -D 2 *.jpg 对所有jpg以幻灯片的方式播放,每两秒放一张 ...
- pyengine介绍及使用
一个可以通过HTTP请求动态执行Python 代码的HTTP服务器,还自带一个装饰器来执行时间较长的任务. 使用方法 1 pip install pyengine 2 pyengine run -d ...
- TensorFlow中的变量和常量
1.TensorFlow中的变量和常量介绍 TensorFlow中的变量: import tensorflow as tf state = tf.Variable(0,name='counter') ...
- java mongodb连接配置实践——生产环境最优
之前百度,google了很多,发现并没有介绍mongodb生产环境如何配置的文章, 当时想参考下都不行, 所以写篇文章,大家可以一块讨论下. 1. MongoClientOptions中的连接池配置: ...