【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>

效果为:

这样就没有间隙了,看出问题所在了,就是因为写代码元素标签之间的空格所致。但是我们有不能所有的代码都按照写在一行,一是不易于读不易于维护,二是很乱。

解决方案总结:

  1. 写成一行(不可取也是一种方式,,哈哈哈)
  2. 第二中就是有规则分分行,例如我这个就可以这样写:
                                    <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;

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不会变化。这个就是有时候我们设置好两个并排元素宽相加等于父元素但是第二个会被挤下去的原因。

本文转载于:猿2048➞https://www.mk2048.com/blog/blog.php?id=h2k1jaa&title=【CSS】小妙招,各种问题总结方法处理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370787.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java2Days 2012:Java EE

Java2Days会议是东欧的主要活动&#xff0c;目的是介绍Java开发的最新趋势。 今年&#xff0c;该活动于10月25日至26日在保加利亚的索非亚举行。 我在那里&#xff0c;并有机会与一些SAP的同事一起品尝了一些最新的Java&#xff0c;云和移动内容&#xff0c;这些内容已直接发送…

c++ 优先队列_C/C++数据结构:队列结构最全解析!带你零基础入门队列结构

前言上一章节针对于C语言栈结构做了解析&#xff0c;不清楚的可以回顾一下。本章节主要针对于C语言的基础数据结构队列做以解析。数据结构之队列队列是一种特殊的 线性表 &#xff0c;特殊之处在于它只允许在表的前端&#xff08;front&#xff09;进行删除操作&#xff0c;而在…

周期均方根和有效值的区别_黑猪肉和白猪肉有啥区别?

为啥散养黑猪肉的价格要比白猪贵很多?这其中的原因不看不知道!市面上的散养黑猪肉通常要比白猪肉贵很多&#xff0c;但是仍有不少人喜欢买黑猪肉回家吃&#xff0c;散养黑猪肉和白猪肉不仅仅是口感上有所差距&#xff0c;其价值差距体现在很多方面&#xff0c;接下来小编就和大…

测试环境搭建流程_前端构建 DevOps 搭建 DevOps 基础平台(中)

前言搭建基础平台搭建上篇的时候的时候&#xff0c;已经介绍过了项目流程设计、数据库搭建、jwt 登录等模块。此篇我们介绍分支管理设计及其他的基础模块。后端模块DevOps - Gitlab Api使用(已完成&#xff0c;点击跳转)DevOps - 搭建 DevOps 基础平台(已完成 50%)基础平台搭建…

什么是PermGen泄漏?

接下来是对Java应用程序中特定类型的内存问题的实用介绍。 即–我们将分析导致java.lang.OutOfMemoryError&#xff1a;PermGen空间的错误 堆栈跟踪中的症状。 首先&#xff0c;我们将介绍理解该主题所需的核心概念&#xff0c;并说明什么是对象&#xff0c;类&#xff0c;类…

rto净化效率计算公式_全面剖析 石油化工行业RTO蓄热式焚烧炉的优势要素

在我国的国民经济发展中&#xff0c;石油化工产业是重要的能源基础工业&#xff0c;但是废气的治理问题一直困扰着许多企业。直到RTO蓄热式焚烧炉的面世&#xff0c;为石油化工行业的废气治理带来了新希望。如今&#xff0c;有机废气治理工作越来越受到广泛重视&#xff0c;传统…

python作业:高级FTP程序

要求&#xff1a; 用户加密认证允许同时多用户登录每个用户有自己的家目录 &#xff0c;且只能访问自己的家目录对用户进行磁盘配额&#xff0c;每个用户的可用空间不同允许用户在ftp server上随意切换目录允许用户查看当前目录下文件允许上传和下载文件&#xff0c;保证文件一…

webpack学习笔记 (一)

一、安装nodejs&#xff1b; 点击打开nodejs官方站点&#xff1b; 点击下图框住的按钮&#xff0c;下周nodejs安装包&#xff1b; 安装下载好的安装包。 安装完毕之后&#xff0c;在cmd中输入node -v查看是否已经安装成功 如果有版本号显示&#xff0c;则代表安装成功&#xf…

将涡轮增压器添加到JEE Apps

我扮演的关键角色之一是在本地社区中传播Akka。 作为讨论的一部分&#xff0c;人们通常会想到的问题/疑问是Akka如何针对编写良好的Java / JEE应用程序提供更好的可伸缩性和并发性。 由于底层硬件/ JVM保持不变&#xff0c;因此参与者模型如何比传统的JEE应用程序发挥更多的功…

MapReduce的工作原理

一、MapReduce模型框架 MapReduce是一个用于大规模数据处理的分布式计算模型&#xff0c;最初由Google工程师设计并实现的&#xff0c;Google已经将完整的MapReduce论文公开发布了。其中的定义是&#xff0c;MapReduce是一个编程模型&#xff0c;是一个用于处理和生成大规模数据…

react实现多行文本超出加省略号

http://www.css88.com/archives/5206 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 根据该文章方法&#xff0c;放在react项目中发现并不能实现&#xff0c;仔细观察发现原来react解析出来的css样…

qq群 html,我的群组-普通群组.html

&#xfeff;我的群组&#xff0d;普通群组$axure.utils.getTransparentGifPath function() { return resources/images/transparent.gif; };$axure.utils.getOtherPath function() { return resources/Other.html; };$axure.utils.getReloadPath function() { return resou…

查看PLC IP 端口_西门子828D数控系统X130接口通讯怪异现象(X130手动设置的 IP)...

西门子828D数控系统&#xff0c;调试PLC过程中遇到网络通信怪异问题(不能直连非要加个路由器)&#xff0c;笔记本电脑的以太网网络直接连接显示网络电缆被拔出&#xff0c;如下图所示&#xff1a;奇怪&#xff0c;怎么出现这种情况了呢&#xff0c;因为我用这台电脑调试过别的P…

bzoj1263

贪心 n%31 分出一个4&#xff0c;其余用3&#xff0c;n%32&#xff0c;分出一个2&#xff0c;其余用3&#xff0c;然后高精度就行了 #include<bits/stdc.h> using namespace std; const int N 5005; struct BigInt {int len;int a[N];BigInt() { memset(a, 0, sizeof(a)…

c语言volatile_[技术]为什么单片机C语言编程时某一变量有时乱码

最近一个项目里面&#xff0c;在KEIL中用C语言在单片机里面定义了一个状态机全局变量&#xff0c;这个变量随时会改变&#xff0c;用于切换触摸屏的界面&#xff0c;可是程序运行中出现了一个问题&#xff0c;这个状态机号总是出现了被莫名奇妙改变的问题&#xff0c;导致触屏不…

微型计算机2017年9月上,2017年9月计算机一级考试WPS Office冲刺题

2017年9月计算机一级考试WPS Office冲刺题2017年下半年计算机一级考试将在9月份进行&#xff0c;为了方便考生备考计算机一级考试。下面是小编为大家带来的计算机一级考试WPS Office冲刺题&#xff0c;欢迎阅读。冲刺题一&#xff1a;1、PowerPoint 演示文稿和模板的扩展名是【…

11尺寸长宽 iphone_弱电工程LED显示屏尺寸规格及计算方法

前言&#xff1a;led屏幕在生活中&#xff0c;随处可见&#xff0c;显示屏、广播屏等等&#xff0c;但是led尺寸怎么计算的&#xff0c;你知道吗&#xff1f;今天我们一起了解一下led屏幕尺寸的计算方法。正文&#xff1a;一、点间距的计算1、各单元板常见型号及尺寸LED屏普遍是…

marquee标签的使用

<!DOCTYPE html> <html> <head><meta charset"utf-8" /><title>演示marquee</title><style type"text/css">*{padding: 0px;margin: 0px;}marquee{border: 1px solid purple;}img{width: 360px;height: auto;}&…

32位数据源中没有mysql_[SpringBoot实战]快速配置多数据源(整合MyBatis)

前言由于业务需求&#xff0c;需要同时在SpringBoot中配置两套数据源&#xff08;连接两个数据库&#xff09;&#xff0c;要求能做到service层在调用各数据库表的mapper时能够自动切换数据源&#xff0c;也就是mapper自动访问正确的数据库。本文内容&#xff1a;在SpringbootM…

考研计算机冷门学校,考研5个冷门的985院校 别随大流,这些几所也是很不错的...

导语&#xff1a;想必大家考研的目的有很多&#xff0c;最主要的就是想去更好的学校提升自己&#xff0c;大部分会肯定是会更倾向于985这类的院校&#xff0c;每年其实除了那些被“挤破头”的985院校&#xff0c;其实还有不少“低调”的985院校是非常值得报考的&#xff0c;下面…