10个非常有用的CSS技巧

2024-06-20 00:38
文章标签 技巧 css frontend 非常 有用

本文主要是介绍10个非常有用的CSS技巧，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 将网页或元素居中       

center     

    
HTML：

  1. <div class="wrap">  
  2. </div><!-- end wrap -->  
CSS：
  1. .wrap { width:960px; margin:0 auto;}  

 

 

2.Sticky Footer (让页脚永远停靠在页面底部，而不是根据绝对位置)
   
stickyfooter

   

 
HTML：

  1. <div id="wrap">  
  2.   
  3. <div id="main" class="clearfix">  
  4.   
  5. </div>  
  6.   
  7. </div>  
  8.   
  9. <div id="footer">  
  10.   
  11. </div>  

CSS：

  1. * { margin:0; padding:0; }   
  2.   
  3. html, body, #wrap { height: 100%; }  
  4.   
  5. body > #wrap {height: auto; min-height: 100%;}  
  6.   
  7. #main { padding-bottom: 150px; }  /* must be same height as the footer */  
  8.   
  9. #footer {  
  10.         position: relative;  
  11.  margin-top: -150px; /* negative value of footer height */  
  12.  height: 150px;  
  13.  clear:both;}   
  14.   
  15. /* CLEAR FIX*/  
  16. .clearfix:after {content: ".";  
  17.  display: block;  
  18.  height: 0;  
  19.  clear: both;  
  20.  visibility: hidden;}  
  21. .clearfix {display: inline-block;}  
  22. /* Hides from IE-mac */  
  23. * html .clearfix { height: 1%;}  
  24. .clearfix {display: block;}  
  25. /* End hide from IE-mac */  

 

3.跨浏览器最小高度设置      
min-height

       

 CSS：

  1. .element { min-height:600px; height:auto !important; height:600px; }  

 

 

4.Box阴影(CSS3)
   
box-shadow

   

    
CSS：

  1. .box { box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666; }  

 

5.文字阴影（CSS3）

   
text-shadow

        

CSS：

  1. .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }  

 

6.跨浏览器的CSS透明度
   
opac

 

CSS：

  1. .transparent {  
  2.     
  3.   /* Modern Browsers */ opacity: 0.7;  
  4.   
  5.   /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  
  6.   
  7.   /* IE 5-7 */ filter: alpha(opacity=70);  
  8.   
  9.   /* Netscape */ -moz-opacity: 0.7;  
  10.   
  11.   /* Safari 1 */ -khtml-opacity: 0.7;  
  12.     
  13. }  

 

 

7.著名的 Meyer Reset（重置）
   
reset

 

CSS：

  1.   html, body, div, span, applet, object, iframe,  
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
  3. a, abbr, acronym, address, big, cite, code,  
  4. del, dfn, em, font, img, ins, kbd, q, s, samp,  
  5. small, strike, strong, sub, sup, tt, var,  
  6. dl, dt, dd, ol, ul, li,  
  7. fieldset, form, label, legend,  
  8. table, caption, tbody, tfoot, thead, tr, th, td {  
  9.  margin: 0;  
  10.  padding: 0;  
  11.  border: 0;  
  12.  outline: 0;  
  13.  font-weight: inherit;  
  14.  font-style: inherit;  
  15.  font-size: 100%;  
  16.  font-family: inherit;  
  17.  vertical-align: baseline;  
  18. }  
  19. /* remember to define focus styles! */  
  20. :focus {  
  21.  outline: 0;  
  22. }  
  23. body {  
  24.  line-height: 1;  
  25.  color: black;  
  26.  background: white;  
  27. }  
  28. ol, ul {  
  29.  list-style: none;  
  30. }  
  31. /* tables still need 'cellspacing="0"' in the markup */  
  32. table {  
  33.  border-collapse: separate;  
  34.  border-spacing: 0;  
  35. }  
  36. caption, th, td {  
  37.  text-align: left;  
  38.  font-weight: normal;  
  39. }  
  40. blockquote:before, blockquote:after,  
  41. q:before, q:after {  
  42.  content: "";  
  43. }  
  44. blockquote, q {  
  45.  quotes: "" "";  
  46. }  
  47.    

 

8.删除虚线轮廓      
dotted

   

CSS：

  1. a, a:active { outline: none; }  

 

9.圆角
   
rounded

         

CSS：

  1. .element {  
  2.  -moz-border-radius: 5px;  
  3.  -webkit-border-radius: 5px;  
  4.  border-radius: 5px; /* future proofing */  
  5. }  
  6. .element-top-left-corner {  
  7.  -moz-border-radius-topleft: 5px;  
  8.  -webkit-border-top-left-radius: 5px;  
  9. }  

 

10.覆盖内联的样式
import

     

 CSS:

  1. .override {  
  2.  font-size: 14px !important;  
  3. }  

这篇关于10个非常有用的CSS技巧的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1076610。

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
css实现图片旋转功能

css实现图片旋转功能

《css实现图片旋转功能》：本文主要介绍了四种CSS变换效果：图片旋转90度、水平翻转、垂直翻转，并附带了相应的代码示例，详细内容请阅读本文，希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo
阅读更多...
Pandas中多重索引技巧的实现

Pandas中多重索引技巧的实现

《Pandas中多重索引技巧的实现》Pandas中的多重索引功能强大,适用于处理多维数据,本文就来介绍一下多重索引技巧,具有一定的参考价值,感兴趣的可以了解一下... 目录1.多重索引概述2.多重索引的基本操作2.1 选择和切片多重索引2.2 交换层级与重设索引3.多重索引的高级操作3.1 多重索引的分组聚
阅读更多...
vue基于ElementUI动态设置表格高度的3种方法

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div，原理是将表格的高度设置成外层div的高度，所以外层的div需要
阅读更多...
Redis多种内存淘汰策略及配置技巧分享

Redis多种内存淘汰策略及配置技巧分享

《Redis多种内存淘汰策略及配置技巧分享》本文介绍了Redis内存满时的淘汰机制,包括内存淘汰机制的概念,Redis提供的8种淘汰策略（如noeviction、volatile-lru等）及其适用场... 目录前言一、什么是 Redis 的内存淘汰机制？二、Redis 内存淘汰策略1. pythonnoe
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2