love域名做的网站,上海注册设计公司网站,好听好记的域名,中国商机网官网1.实现div文字溢出自动省略号截取 overflow:hidden; /*超过部分不显示*/ text-overflow:ellipsis; /*超过部分用点点表示*/ white-space:nowrap;/*不换行*/ 2.规定行数的截取效果 text-overflow: ellipsis; /*有些示例里需要定义该属性#xff0c…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 idword typeradio namea /label forwordword/label
input idexcel typeradio namea /label forexcelexcel/label 第二步生成一个伪元素作为美化版的单选按钮先给伪元素添加一些样式这里可以自定义样式效果 input[typeradio] 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[typeradio]:checked label::before {
background-color: #01cd78;
background-clip: content-box;
padding: 2px;
width: 11px; /*选中后的按钮大小*/
height: 11px; /*选中后的按钮大小*/
} 第四步隐藏原来的按钮 input[typeradio] {
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写出代码 liimg /div党的进什么文件但还是觉得很受打击.jpg/divinput idradio4 typeradio namefileRadiolabel forradio4/label/li
liimg /div党的进什么文件但还是觉得很受打击.jpg/divinput idradio5 typeradio namefileRadiolabel forradio5/label/li
liimg /div党的进什么文件但还是觉得很受打击.jpg/divinput idradio6 typeradio namefileRadiolabel forradio6/label/li 效果就是第一行的效果第二行是使用js进行添加的li就是正确的margin-right:15px. 而第二行确多出一部分空隙。然后我再次修改html代码为 liimg /div党的进什么文件但还是觉得很受打击.jpg/divinput idradio4 typeradio namefileRadiolabel forradio4/label/liliimg /div党的进什么文件但还是觉得很受打击.jpg/divinput idradio5 typeradio namefileRadiolabel forradio5/label/liliimg /div党的进什么文件但还是觉得很受打击.jpg/divinput idradio6 typeradio namefileRadiolabel forradio6/label/li 效果为 这样就没有间隙了看出问题所在了就是因为写代码元素标签之间的空格所致。但是我们有不能所有的代码都按照写在一行一是不易于读不易于维护二是很乱。
解决方案总结
写成一行不可取也是一种方式哈哈哈第二中就是有规则分分行例如我这个就可以这样写 liimg /div党的进什么文得很受打击.jpg/divinput idradio1 typeradio namefileRadiolabel forradio1/label/liliimg /div
党的进什么文件但还是觉得很受打击.jpg/divinput idradio2 typeradio namefileRadiolabel forradio2/label/liliimg /div
党的进什么文件但还是觉得很受打击.jpg/divinput idradio6 typeradio namefileRadiolabel forradio6/label/li 3. 借助注释语句来去除空格 liimg /div党的进什么文得很受打击.jpg/divinput idradio1 typeradio namefileRadiolabel forradio1/label/li!--
--liimg /div党的进什么文件但还是觉得很受打击.jpg/divinput idradio2 typeradio namefileRadiolabel forradio2/label/li!--
--liimg /div党的进什么文件但还是觉得很受打击.jpg/divinput idradio6 typeradio namefileRadiolabel forradio6/label/li 4. 不写结束标签就是li的结束标签不写即可 liimg /div党的进什么文得很受打击.jpg/divinput idradio1 typeradio namefileRadiolabel forradio1/label
liimg /div党的进什么文件但还是觉得很受打击.jpg/divinput idradio2 typeradio namefileRadiolabel forradio2/label 5. 样式的问题还是采用样式解决哈哈使用文字间距属性letter-spacing。只需要在间隙元素上设置为0px然后看多出多少元素在简单元素的父元素设置负数值就好了。例如我这个就是在li元素设置 letter-spacing:0px;然后在父元素设置ulletter-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-equivx-ua-compatible contentIE7,IE8 //head 新版本在head标签中增加 head
meta http-equivx-ua-compatible contentIE9 /
/head 还有一种就是永远使用最新版本这样就不怕浏览器升级了 head
meta http-equivx-ua-compatible contentIEedge / /head 8.边框属性的位置
我们在布局的时候往往会产生边框导致布局错乱的现象这就是边框产生的位置导致的。边框产生的位置只有两个地方在内容内在内容外请看下面介绍。 box-sizing这是一个css3的属性他用来控制边框的位置产生在哪里。 box-sizing:border-box产生在内容内简单来说就是如果你设置一个div宽和高都是50px然后设置边框宽度为1px如果设置属性那么你可用的内容宽像素是48px50px-2px左右两个边框高同理。 box-sizing:content-box产生在内容外这个好理解也是我们最普遍见到的就是在内容外绘制边框。例如还是上面设置了50px后你可用内容宽像素还是50不会变化。这个就是有时候我们设置好两个并排元素宽相加等于父元素但是第二个会被挤下去的原因。
本文转载于:猿2048➞https://www.mk2048.com/blog/blog.php?idh2k1jaatitle【CSS】小妙招各种问题总结方法处理
