热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

揪css系列(1)业务代码中可用的小技巧

欢迎提issues斧正:css小技巧业务代码中可用的CSS技巧兼容chrome下的10px字体p{font-size:10px;-webkit-transform:scale(.8

欢迎提issues 斧正: css小技巧

业务代码中可用的CSS技巧

兼容chrome下的10px字体

p {
font-size: 10px;
-webkit-transform: scale(.83);
}

此方法在前端页面需要展示更小字体,兼容浏览器时非常有用。

文本溢出显示省略号…

p {
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

此方法对前端页面容错非常有效,因为一个元素里的内容太多,就会导致显示不完,省略号让用户体验更好。如果元素宽高没限制,内容太多会导致文本溢出,严重影响用户体验。

给元素增加hover渐变效果

div {
width:200px;
height:200px;
transition: box-shadow .5s;
-moz-transition: box-shadow .5s;
-webkit-transition: box-shadow .5s;
-o-transition: box-shadow .5s;
}
div:hover {
box-shadow: 0 14px 20px #666;
}

鼠标经过会有阴影效果,鼠标离开恢复。

居中div

常用margin方法:

div {
width:200px;
margin:0 auto;
}

1/2宽高的margin,50%的left、top方法:

div {
Width:500px ;
height:300px;
Margin: -150px 0 0 -250px;
position:relative;
background-color:pink;
left:50%;
top:50%;
}

LTRB值为0的方法:

div {
width: 400px;
height: 300px;
margin:auto;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}

transform方法

div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

带文本元素的话,外面包一层div,让里面的line-height = height:

p {
height:30px;
line-height:30px;
}

flex弹性盒子布局居中:

div {
display: flex;
flex-flow: row wrap;
width: 408px;
align-items: center;
justify-content: center;
}

默认继承

默认继承: font-size font-family color等, 元素有UL LI DL DD DT等;
不可继承: border padding margin width height 等表现元素大小的属性。

清除浮动

结尾处使用div空标签清除浮动(非div需要display:block),不过这种方式向DOM添加了不必要的元素,使用不是很多。

.clear{clear:both;}

利用overflow属性。必须定义width或zoom:1,同时不能定义height,应用值为hidden或auto的overflow属性有一个有用的副作用,这会自动清理包含的任何浮动元素。

div {
float:none;
overflow:hidden;
}

给父级div定义伪类:after和zoom(zoom为IE6.7专属)

.clearfix:after{
content:'';
height:0;
display:block;
visibility:hidden;
clear:both
}

最大最小宽度高度兼容

当使用height:auto 时应考虑到元素最大或最小的宽度高度,以便容错。、

div {
min-height:500px;
height:auto;
max-width:500px;
width:auto;
}

cursor 属性(禁点)

email me
a {cursor:not-allowed;}

cursor其他常用属性

default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针(一只手)
move 此光标指示某对象可被移动。
text 此光标指示文本。
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。

window font && mac font 兼容

* {
font-family: "PingFang SC","microsoft yahei",Arial,Helvetica,sans-serif;
}

‘PingFang SC’是mac下和微软雅黑接近的字体,’microsoft yahei’同’微软雅黑’,不过有些网站不兼容中文(GB2312)的字符还是用英文的比较好,Arial主要用于文字中的数字。

阻止事件

email me
a {pointer-events:none;}

禁止选中文本

* {
-moz-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}

a标签hover

被点击访问过的超链接样式不在具有hover和active的样式了,解决方法是改变CSS属性的排列顺序:
L-V-H-A(link,visited,hover,active)

CSS写一个简单的幻灯片效果

div {
width:480px;
height:320px;
margin:50px auto;
overflow: hidden;
box-shadow:0 0 5px rgba(0,0,0,1);
background-size: cover;
background-position: center;
-webkit-animation-name: "loops";
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes "loops" {
0% {background:url(0.jpg) no-repeat;}
25% {background:url(1.jpg) no-repeat;}
50% {background:url(2.jpg) no-repeat;}
75% {background:url(3.jpg) no-repeat;}
100% {background:url(4.jpg) no-repeat;}
}

rgba()和opacity

rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度 ;

div {
opacity:0.5;
}

而rgba()只作用于元素的颜色或其背景色。设置rgba透明的元素的子元素不会继承透明效果。

div {
background: rgba(255,255,0,0.8);
}

使用圆角

div {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

!important

css优先级为: !important > 内联样式 > id > class > tag
所以,使用!important时需要小心。

伪类使用

p:first-of-type 选择属于其父元素的首个p元素。
p:last-of-type 选择属于其父元素的最后p元素。
p:only-of-type 选择属于其父元素唯一的p元素。
p:only-child 选择属于其父元素的唯一子元素。
p:nth-child(n) 选择属于其父元素的第n个子元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中
::selection 匹配被用户选取的选取是部分

position的relative和absolute

position参考文章:详解css相对定位和绝对定位




.parent{
position: absolute; //变换这段代码做测试
border: 1px solid #ccc;
height: 200px;
width: 200px;
}
.child{
position: relative; //变换这段代码做测试
left: 100px;
top:100px;
background: blue;
height: 50px;
width: 50px;
}

relative:

如果设定TRBL,并且父级没有设定position属性,仍旧以父级的左上角为原点进行定位。
如果设定TRBL,并且父级设定position属性,则以父级的左上角为原点进行定位,位置由TRBL决定。如果父级有Padding属性,那么就以内容区域的左上角为原点,进行定位。
相对定位总是以父级左上角为原点进行定位的,如果父级不存在,则以浏览器左上角进行定位。

absolute:

如果设定TRBL,并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。
如果设定TRBL,并且父级设定position属性,则以父级的左上角为原点进行定位,位置由TRBL决 定。只以父级左上角为原点进行定位,父级的padding对其根本没有影响。
使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行定位。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。
绝对定位的框从标准流中脱离,这意味着他们对其后的兄弟盒子的定位没有影响,其他的盒子好像就好像这个盒子不存在一样。

使用新特性

盒子阴影(box-shadow)
文本阴影(text-shadow、)
transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
媒体查询 @media (min-width: 1280px)
border-image 嵌入图片形式的边框 border-image: url(border.png) 27/27px round;
线性渐变(gradient) linear-gradient 线性渐变 radial-gradient 径向渐变 等等

推荐阅读
  • 本文旨在构建一个JavaScript函数,用于对用户输入的电子邮件地址和密码进行有效性验证。该函数将确保输入符合标准格式,并检查密码强度,以提升用户账户的安全性。通过集成正则表达式和条件判断语句,该方法能够有效防止常见的输入错误,同时提供即时反馈,改善用户体验。 ... [详细]
  • 投融资周报 | Circle 达成 4 亿美元融资协议,唯一艺术平台 A 轮融资超千万美元 ... [详细]
  • 本文详细介绍了 jQuery 的入门知识与实战应用,首先讲解了如何引入 jQuery 库及入口函数的使用方法,为初学者提供了清晰的操作指南。此外,还深入探讨了 jQuery 在实际项目中的多种应用场景,包括 DOM 操作、事件处理和 AJAX 请求等,帮助读者全面掌握 jQuery 的核心功能与技巧。 ... [详细]
  • 《精通 jQuery》第六章:深入解析与实战应用
    《精通 jQuery》第六章:深入解析与实战应用本章详细探讨了 Ajax 技术的核心机制及其实际应用。Ajax 通过 XMLHttpRequest 对象实现客户端与服务器之间的异步数据交换,从而在不重新加载整个页面的情况下更新部分内容。这种技术不仅提升了用户体验,还提高了应用的响应速度和效率。此外,本章还介绍了如何利用 jQuery 简化 Ajax 操作,并提供了多个实战案例,帮助读者更好地理解和掌握这一重要技术。 ... [详细]
  • 在 Linux 系统中,`/proc` 目录实现了一种特殊的文件系统,称为 proc 文件系统。与传统的文件系统不同,proc 文件系统主要用于提供内核和进程信息的动态视图,通过文件和目录的形式呈现。这些信息包括系统状态、进程细节以及各种内核参数,为系统管理员和开发者提供了强大的诊断和调试工具。此外,proc 文件系统还支持实时读取和修改某些内核参数,增强了系统的灵活性和可配置性。 ... [详细]
  • 本文深入探讨了 `ExpressionChangedAfterItHasBeenCheckedError` 错误的原因及其解决方案。通过分析 Angular 的变更检测机制,详细解释了该错误的发生条件,并提供了多种有效的应对策略,帮助开发者在实际开发中避免这一常见问题。 ... [详细]
  • 深入理解 CSS 盒模型、box-sizing 属性及定位元素的水平和垂直居中技巧
    深入理解 CSS 盒模型、box-sizing 属性及定位元素的水平和垂直居中技巧 ... [详细]
  • 在2020年8月19日的深度分析中,我们探讨了HTML标签中同时存在`a`标签的`href`和`onclick`属性时的触发顺序问题。此外,还讨论了如何在一个自适应高度的父级`div`中,使两个子`div`中的一个固定高度为300px,另一个自动填充剩余空间的方法。最后,文章详细介绍了JavaScript异步加载的多种实现方式,包括但不限于`async`、`defer`属性以及动态脚本插入技术,为开发者提供了丰富的技术参考。 ... [详细]
  • 精通jQuery:深入解析事件处理机制与应用技巧
    本文详细探讨了jQuery的事件处理机制及其应用技巧,通过具体的代码示例,逐一解析了每个jQuery代码片段与其对应的HTML结构。文章以标记为基准,CSS作为通用样式,确保每段代码都能独立运行。HTML和CSS代码统一放置在文章末尾,方便读者参考和实践。 ... [详细]
  • 深入解析 AngularJS 表达式的应用与优化技巧
    本文深入探讨了AngularJS表达式的应用及其优化策略。在AngularJS中,表达式主要通过$digest循环进行自动解析,但在某些场景下,手动解析表达式也是必要的。文章详细介绍了如何利用$parse服务实现手动解析,并提供了多种优化技巧,以提高应用性能和响应速度。 ... [详细]
  • 本文深入探讨了 hCalendar 微格式在事件与时间、地点相关活动标记中的应用。作为微格式系列文章的第四篇,前文已分别介绍了 rel 属性用于定义链接关系、XFN 微格式增强链接的人际关系描述以及 hCard 微格式对个人和组织信息的描述。本次将重点解析 hCalendar 如何通过结构化数据标记,提高事件信息的可读性和互操作性。 ... [详细]
  • HTML5绘图功能的全面支持与应用
    HTML5绘图功能的全面支持与应用 ... [详细]
  • 探讨两种常数卷积的结果与一种常见的洗牌算法错误及其影响
    在编程中,随机打乱数组元素的顺序(即“洗牌”)是一个常见的需求。标准的洗牌算法是Fisher-Yates shuffle,但许多开发者在实现时容易犯错,导致结果不均匀。本文探讨了两种常数卷积的结果,并分析了一种常见的洗牌算法错误及其对随机性的影响。通过详细的实验和理论分析,我们揭示了这些错误的具体表现和潜在危害,为开发者提供改进的建议。 ... [详细]
  • Node.js 教程第五讲:深入解析 EventEmitter(事件监听与发射机制)
    本文将深入探讨 Node.js 中的 EventEmitter 模块,详细介绍其在事件监听与发射机制中的应用。内容涵盖事件驱动的基本概念、如何在 Node.js 中注册和触发自定义事件,以及 EventEmitter 的核心 API 和使用方法。通过本教程,读者将能够全面理解并熟练运用 EventEmitter 进行高效的事件处理。 ... [详细]
  • RancherOS 是由 Rancher Labs 开发的一款专为 Docker 设计的轻量级 Linux 发行版,提供了一个全面的 Docker 运行环境。其引导镜像仅 20MB,非常适合在资源受限的环境中部署。本文将详细介绍如何在 ESXi 虚拟化平台上安装和配置 RancherOS,帮助用户快速搭建高效、稳定的容器化应用环境。 ... [详细]
author-avatar
D大龙
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有