非常实用的CSS小技巧
时间2024-05-26 02:28:03发布访客分类CSS浏览111
导读：非常实用的CSS小技巧 1. 文字水平居中 将一段文字置于容器的水平中点，只要设置text-align属性即可： text-align:center; 2. 容器水平居中 先该容器设置一个明确宽度，然后将margin的水平值设为auto即...
非常实用的CSS小技巧
1. 文字水平居中
将一段文字置于容器的水平中点，只要设置text-align属性即可：
text-align:center;
2. 容器水平居中
先该容器设置一个明确宽度，然后将margin的水平值设为auto即可。
div#container {
width:760px;
margin:0 auto;
}
3. 文字垂直居中
单行文字的垂直居中，只要将行高与容器高设为相等即可。
比如，容器中有一行数字。
1234567890
然后CSS这样写：
div#container {
height: 35px;
line-height: 35px;
}
如果有n行文字，那么将行高设为容器高度的n分之一即可。
4. 容器垂直居中
比如，有一大一小两个容器，请问如何将小容器垂直居中？
首先，将大容器的定位为relative。
div#big{
position:relative;
height:480px;
}
然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可。
div#small {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px;
}
5. 图片宽度自适应
如何使得较大的图片，能够自动适应小容器的宽度？CSS可以这样写：
img {
max-width: 100%}
6. 3D按钮
要使按钮具有3D效果，只要将它的左上部边框设为浅色，右下部边框设为深色即可。
div#button {
background: #888;
border: 1px solid;
border-color: #999 #777 #777 #999;
}
7. font属性快捷写法
font快捷写法的格式为：
body {
font: font-style font-variant font-weight font-size line-height font-family;
}
所以，
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
font-variant: small-caps;
font-style: italic;
line-height: 150%;
}
可以被写成：
body {
font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;
}
8. link状态设置顺序
link的四种状态，需要按照下面的前后顺序进行设置：
a:link a:visited a:hover a:active
9. CSS优先性
如果同一个容器被多条CSS语句定义，那么哪一个定义优先呢？
基本规则是：
行内样式 >
id样式 >
class样式 >
标签名样式
比如，有一个元素：
行内样式是最优先的，然后其他设置的优先性，从低到高依次为：
div
然后，将它四个边框中的三个边框设为透明，剩下一个设为可见，就可以生成三角形效果：
.triangle {
border-color: transparent transparent green transparent;
border-style: solid;
border-width: 0px 300px 300px 300px;
height: 0px;
width: 0px;
}
16. 禁止自动换行
如果你希望文字在一行中显示完成，不要自动换行，CSS命令如下：
h1 {
white-space:nowrap;
}
17. 用图片替换文字
有时我们需要在标题栏中使用图片，但是又必须保证搜索引擎能够读到标题，CSS语句可以这样写：
h1 {
text-indent:-9999px;
background:url("h1-image.jpg") no-repeat;
width:200px;
height:50px;
}
18. 获得焦点的表单元素
当一个表单元素获得焦点时，可以将其突出显示：
input:focus {
border: 2px solid green;
}
19. !important规则
多条CSS语句互相冲突时，具有!important的语句将覆盖其他语句。由于IE不支持!important，所以也可以利用它区分不同的浏览器。
h1 {
color: red !important;
color: blue;
}
上面这段语句的结果是，其他浏览器都显示红色标题，只有IE显示蓝色标题。
20. CSS提示框
当鼠标移动到链接上方，会自动出现一个提示框。
链接文字 提示文字
CSS这样写：
a.tooltip {
position: relative}
a.tooltip span {
display:none;
padding:5px;
width:200px;
}
a:hover {
background:#fff;
}
/*background-color is a must for IE6*/ a.tooltip:hover span{
display:inline;
position:absolute;
}
21. 各类浏览器的专用语句
/* IE6 and below */ * html #uno {
color: red }
/* IE7 */ *:first-child+html #dos {
color: red }
/* IE7, FF, Saf, Opera */ html>
body #tres {
color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */ html>
/**/body #cuatro {
color: red }
/* Opera 9.27 and below, safari 2 */ html:first-child #cinco {
color: red }
/* Safari 2-3 */ html[xmlns*=""] body:last-child #seis {
color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:nth-of-type(1) #siete {
color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:first-of-type #ocho {
color: red }
/* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) {
#diez {
color: red }
}
/* iPhone / mobile webkit */ @media screen and (max-device-width: 480px) {
#veintiseis {
color: red }
}
/* Safari 2 - 3.1 */ html[xmlns*=""]:root #trece {
color: red }
/* Safari 2 - 3.1, Opera 9.25 */ *|html[xmlns*=""] #catorce {
color: red }
/* Everything but IE6-8 */ :root *>
#quince {
color: red }
/* IE7 */ *+html #dieciocho {
color: red }
/* Firefox only. 1+ */ #veinticuatro, x:-moz-any-link {
color: red }
/* Firefox 3.0+ */ #veinticinco, x:-moz-any-link, x:default {
color: red }
/***** Attribute Hacks ******/ /* IE6 */ #once {
_color: blue }
/* IE6, IE7 */ #doce {
*color: blue;
/* or #color: blue */ }
/* Everything but IE6 */ #diecisiete {
color/**/: blue }
/* IE6, IE7, IE8 */ #diecinueve {
color: blue\9;
}
/* IE7, IE8 */ #veinte {
color/*\**/: blue\9;
}
/* IE6, IE7 -- acts as an !important */ #veintesiete {
color: blue !ie;
}
/* string after ! can be anything */
22. 容器的水平和垂直居中
HTML代码如下：
![]()
CSS代码如下：
.logo {
display: block;
text-align: center;
display: block;
text-align: center;
vertical-align: middle;
border: 4px solid #dddddd;
padding: 4px;
height: 74px;
width: 74px;
}
.logo * {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.logo .photo {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%;
}
23. CSS阴影
外阴影：
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
内阴影：
.shadow {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}
24. 取消IE文本框的滚动条
textarea {
overflow: auto;
}
25. 黑白图像
这段代码会让你的彩色照片显示为黑白照片，是不是很酷？
img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
26. 使用 :not() 在菜单上应用/取消应用边框
先给每一个菜单项添加边框
/* add border */.nav li {
border-right: 1px solid #666;
}
然后再除去最后一个元素
// remove border /.nav li:last-child {
border-right: none;
}
可以直接使用 :not() 伪类来应用元素：
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
这样代码就干净，易读，易于理解了。
当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）：
.nav li:first-child ~ li {
border-left: 1px solid #666;
}
27. 页面顶部阴影
下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果：
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}
28. 给 body 添加行高
你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可,这样文本元素就可以很容易地从 body 继承。
body {
line-height: 1;
}
29. 所有一切都垂直居中
要将所有元素垂直居中，太简单了：注意：在IE11中要小心flexbox。
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
30. 逗号分隔的列表
让HTML列表项看上去像一个真正的，用逗号分隔的列表,对最后一个列表项使用 :not() 伪类。
ul >
li:not(:last-child)::after {
content: ",";
}
31. 使用负的 nth-child 选择项目
在CSS中使用负的 nth-child 选择项目1到项目n。
li {
display: none;
}
/* select items 1 through 3 and display them */li:nth-child(-n+3) {
display: block;
}
32. 对图标使用 SVG
我们没有理由不对图标使用SVG，SVG对所有的分辨率类型都具有良好的扩展性，并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。
.logo {
background: url("logo.svg");
}
33. 优化显示文本
有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
注：请负责任地使用 optimizeLegibility。此外，IE /Edge没有 text-rendering 支持。
34. 对纯 CSS 滑块使用 max-height
使用 max-height 和溢出隐藏来实现只有CSS的滑块：
.slider ul {
max-height: 0;
overlow: hidden;
}
.slider:hover ul {
max-height: 1000px;
transition: .3s ease;
}
35. 继承 box-sizing
让 box-sizing 继承 html：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。
36. 表格单元格等宽
表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：
.calendar {
table-layout: fixed;
}
37. 用 Flexbox 摆脱外边距的各种 hack
当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了：
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
现在，列表分隔符就会在均匀间隔的位置出现。
38. 使用属性选择器用于空链接
当a元素没有文本值，但 href 属性有链接的时候显示链接：
a[href^="http"]:empty::before {
content: attr(href);
}
相当方便。
39. 检测鼠标双击
HTML：
CSS：
.test3 span {
position: relative;
}
.test3 span a {
position: relative;
z-index: 2;
}
.test3 span a:hover, .test3 span a:active {
z-index: 4;
}
.test3 span input {
background: transparent;
border: 0;
cursor: pointer;
position: absolute;
top: -1px;
left: 0;
width: 101%;
/* Hacky */ height: 301%;
/* Hacky */ z-index: 3;
}
.test3 span input:focus {
background: transparent;
border: 0;
z-index: 1;
}
40. CSS 写出三角形
/* create an arrow that points up */div.arrow-up {
width:0px;
height:0px;
border-left:5px solid transparent;
/* left arrow slant */ border-right:5px solid transparent;
/* right arrow slant */ border-bottom:5px solid #2f2f2f;
/* bottom, add background color here */font-size:0px;
line-height:0px;
}
/* create an arrow that points down */div.arrow-down {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
}
/* create an arrow that points left */div.arrow-left {
width:0px;
height:0px;
border-bottom:5px solid transparent;
/* left arrow slant */ border-top:5px solid transparent;
/* right arrow slant */ border-right:5px solid #2f2f2f;
/* bottom, add background color here */ font-size:0px;
line-height:0px;
}
/* create an arrow that points right */div.arrow-right {
width:0px;
height:0px;
border-bottom:5px solid transparent;
/* left arrow slant */ border-top:5px solid transparent;
/* right arrow slant */ border-left:5px solid #2f2f2f;
/* bottom, add background color here */ font-size:0px;
line-height:0px;
}
41. CSS3 calc() 的使用
calc() 用法类似于函数，能够给元素设置动态的值：
/* basic calc */.simpleBlock {
width: calc(100% - 100px);
}
/* calc in calc */.complexBlock {
width: calc(100% - 50% / 3);
padding: 5px calc(3% - 2px);
margin-left: calc(10% + 10px);
}
42. 文本渐变
文本渐变效果很流行，使用 CSS3 能够很简单就实现：
h2[data-text] {
position: relative;
}
h2[data-text]::after {
content: attr(data-text);
z-index: 10;
color: #e3e3e3;
position: absolute;
top: 0;
left: 0;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
43. 禁用鼠标事件
CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。
.disabled {
pointer-events: none;
}
44. 模糊文本
简单但很漂亮的文本模糊效果，简单又好看！
.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
45.简单的方法调整图片大小
.content img {
height:auto;
width:500px;
}
46.CSS阴影
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
47.CSS首字放大
p:first-letter {
display: block;
float: left;
margin: 5px 5px 0 0;
color: red;
font-size: 1.4em;
background: #ddd;
font-family: Helvetica;
}
48.用CSS翻转图像
#content img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
49.移除被点链接的点框
a {
outline: none}
或者a {
outline: 0}
50.元素透明
.element {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
51.使用CSS显示链接之后的URL
a:after{
content:" (" attr(href) ") ";
}
这会在链接锚点后显示URL。你也可以用字体或其他样式定义它。
52.为手持设备定制特殊样式
53.用图片充当列表标志
ul {
list-style: none}
ul li {
background-image: url("path-to-your-image");
background-repeat: none;
background-position: 0 0.5em;
}
54.禁止自动换行
h1 {
white-space:nowrap;
}
55.获得焦点的表单元素
input:focus {
border: 2px solid green;
}
56.user-select 禁止用户选中文本
div {
user-select: none;
/* Standard syntax */}
57.清除手机tap事件后element 时候出现的一个高亮
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
58.增强用户体验，使用伪元素实现增大点击热区
.btn::befoer{
content:"";
position:absolute;
top:-10px;
right:-10px;
bottom:-10px;
left:-10px;
}
59.伪元素实现换行，替代换行标签
inline-element ::after{
content:"A";
white-space: pre;
}
60.will-change提高页面滚动、动画等渲染性能
/* 关键字值 */will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;
/* 示例 */will-change: opacity;
/* 示例 */will-change: left, top;
/* 两个示例 */will-change的使用也要谨慎，遵循最小化影响原则，不要这样直接写在默认状态中，因为will-change会一直挂着：.will-change {
will-change: transform;
transition: transform 0.3s;
}
.will-change:hover {
transform: scale(1.5);
}
可以让父元素hover的时候，声明will-change，这样，移出的时候就会自动remove，触发的范围基本上是有效元素范围。.will-change-parent:hover .will-change {
will-change: transform;
}
.will-change {
transition: transform 0.3s;
}
.will-change:hover {
transform: scale(1.5);
}
61.box-sizing 让元素的宽度、高度包含border和padding
{
box-sizing: border-box;
}
62.calc() function, 计算属性值
div {
width: calc(100% - 100px);
}
例子就是让宽度为100%减去100px的值
63.css实现不换行、自动换行、强制换行
//不换行white-space:nowrap;
//自动换行word-wrap: break-word;
word-break: normal;
//强制换行word-break:break-all;
64.perspective 透视
这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。.div-box {
perspective: 400px;
}
65.设置图像透明度的两种方式
opcity:0.6；background:rgba(0,0,0,.6)；
66.position定位属性
position属性指定一个元素(静态的、相对的、绝对或固定)的定位方法的类型。position的属性值：absolute：生成绝对定位的元素；fixed：生成绝对定位的元素，相对于浏览器窗口进行定位；relative：生成相对定位的元素，相对于其正常位置经行定位。z-index：指定一个元素的堆叠顺序。
67.cursor属性
cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。CSS提供的cursor值：pointer ：小手指；help：箭头加问号；wait：转圈圈；move：移动光标；crosshair：十字光标。通过pointer属性我们可以伪造超链接：pointer
68.隐藏没有静音、自动播放的影片
video[autoplay]:not([muted]) {
display: none;
}
69.Font-Size 基准
/* 假设浏览器的默认的大小是 16px ， 首先将其设置为10px (font-size:10/16) */body {
font-size:10/16;
}
/* 然后就可以用em做统一字体单位了 2.4em = 24px */h1 {
font-size: 2.4 em}
70.透明容器
.element {
filter:alpha(opacity=50);
/* for ie */-moz-opacity:0.5;
/* for ff */-khtml-opacity: 0.5;
/* for webkit as chrome */opacity: 0.5;
/* for opera */}
使用css3 的 2D变形中的 skew() 倾斜属性，让伪元素倾斜而不是li倾斜，是为了让li的文本正常显示。
.keith li {
list-style: none;
position: relative;
display: inline-block;
padding: 10px 15px;
color: #fff;
cursor: pointer;
}
.keith li::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border-radius: 5px;
z-index: -1;
background: #2175BC;
transform: skewX(-25deg);
}
.keith li:hover::after {
background: #39a3f5;
}
72、梯形导航条
使用css3 3D 变形中的 perspective()、rotateX()、transform-origin。
perspective(): 用于设置用户和元素3D空间Z平面之间的距离，值越小，用户与3D空间Z平面距离越近，视觉效果会明显；反之，值越大，用户与3D空间Z平面距离越远，视觉效果越小。
rotateX(): 3D空间上X轴的旋转
tansform-origin: 指定元素的旋转中心点位置，可以控制梯形倾斜。值为bottom，不倾斜；值为left，左倾斜；值为right，右倾斜。
.keith li {
list-style: none;
position: relative;
display: inline-block;
padding: 20px 15px 5px 15px;
margin-left: -10px;
color: #fff;
cursor: pointer;
}
.keith li::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
background: #2175BC;
border: 1px solid #fff;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
transform: perspective(0.5em) rotateX(5deg);
transform-origin: bottom;
}
.keith li:hover::after {
background: #39a3f5;
}
以上就是我收集的一些CSS小技巧，希望能帮助到你，如果你感觉有用，也请你分享给身边的小伙伴。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 非常实用的CSS小技巧
本文地址： https://pptw.com/jishu/668167.html
