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。

相关文章

Python通过模块化开发优化代码的技巧分享

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版：拆分成模块让模块更强大：使用 __init__.py你一定会遇到的问题模www.
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
CSS Padding 和 Margin 区别全解析

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd
阅读更多...
CSS will-change 属性示例详解

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSSwill-change属性详解，感... will-change 是一个 css 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化
阅读更多...
CSS去除a标签的下划线的几种方法

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧... 在 css 中，去除a标签（超链接）的下划线主要有以下几种方法：使用text-decoration属性通用选择器设置：使用a标签选择器，将tex
阅读更多...
前端高级CSS用法示例详解

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交
阅读更多...
Python将博客内容html导出为Markdown格式

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞？二、准备如何搞？三、说搞咱就搞！抓取文章提取内容构建html转存markdown
阅读更多...
在React中引入Tailwind CSS的完整指南

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目
阅读更多...
vue使用docxtemplater导出word

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方
阅读更多...
MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL？1.2 动态SQL的优点1.3 动态S
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2