CSS日常公用样式与一些解决方案
tailwindcss 导致样式冲突解决方法
tailwindcss 导致样式冲突解决方法
当使用tailwindcss作为CSS框架时，有时可能会遇到样式冲突的问题。
这种冲突可能是由于不同的类名导致的，导致样式定义之间产生
了混淆。
解决这个问题的方法有几种：
1. 修改类名：可以通过修改类名来避免样式冲突。
将与其他样式发
生冲突的类名更改为独一无二的名称，以确保样式不会相互干扰。
这
样可以避免样式冲突的问题，但可能需要在项目的各个地方进行修改。
2. 使用更具体的选择器：在CSS中，选择器的优先级决定了哪个样式将被应用。
当存在样式冲突时，可以使用更具体的选择器来覆盖冲
突的样式。
这可以通过添加更多的父级或使用ID选择器来实现。
3. 使用命名空间：使用样式命名空间是一种将特定样式限制在特定
区域的方法。
可以为每个组件或模块定义一个命名空间，并在其中编
写样式。
这样，即使存在相同的类名，它们也只会应用于其特定的命
名空间，避免了样式冲突。
4. 使用@apply指令：tailwindcss提供了@apply指令，可以将一组
样式规则封装为一个类，并在需要的地方重复使用。
通过使用@apply，可以避免直接使用原始的tailwindcss类名，从而减少样式冲突的可能性。
解决tailwindcss导致的样式冲突的方法包括修改类名、使用更具体
的选择器、使用命名空间和使用@apply指令。
选择合适的解决方法取
决于具体情况和项目需求，但无论哪种方法，都需要确保样式定义之
间不会相互干扰，以保证正确的样式显示。
CSS样式冲突解决方法
CSS样式冲突解决方法CSS（层叠样式表）是一种用于网页设计的标记语言，它通过选择器和属性来控制网页的样式。
然而，在复杂的网页结构中，往往会出现CSS样式冲突的问题。
本文将探讨一些常见的CSS样式冲突解决方法。
首先，避免使用全局选择器。
全局选择器将选择整个网页中的所有元素，这将导致潜在的样式冲突。
相反，应使用更具体的选择器来限定样式的作用范围。
例如，可以使用类选择器或ID选择器，只将样式应用于特定的元素或元素组。
其次，使用父子选择器来限定样式的作用范围。
当某个元素只在特定的父元素内使用时，可以使用父子选择器来确保样式只应用于该特定的父元素下的子元素。
这样可以避免其他地方的样式干扰。
另外，使用!important规则可以覆盖其他样式。
虽然!important应谨慎使用，因为它可能导致其他样式被忽略，但在某些特定情况下，它是解决样式冲突的有效方法。
通过将!important添加到样式规则中，可以确保该样式始终生效。
解决CSS样式冲突的另一种方法是使用特定性。
CSS中，特定性用于确定样式应用的优先级。
在样式冲突时，具有更高特定性的样式将覆盖其他样式。
特定性可以通过选择器的组合来确定，例如使用类选择器、ID选择器和元素选择器等。
提高特定性的方法之一是使用更具体的选择器。
例如，通过使用特定的类名或ID来选择元素，可以增加特定性，从而解决样式冲突。
此外，调整CSS样式表的顺序也可以解决样式冲突。
当多个样式规则具有相同的特定性时，最后一条规则将覆盖前面的规则。
因此，通过调整样式表中的规则顺序，可以控制样式的优先级，并解决样式冲突。
最后，使用命名空间来解决样式冲突也是一种有效的方法。
命名空间可以将样式分组，并确保不同组之间的样式不会冲突。
通过为不同组的元素添加相应的命名空间，可以将相应的样式应用于相应的元素，避免样式冲突。
在实际应用中，可以将这些解决方法结合使用，以实现更高效的样式控制和解决样式冲突。
同时，良好的代码结构和规范化的CSS命名规则也是避免或解决样式冲突的重要因素。
CSS帮助手册
CSS帮助手册2篇CSS帮助手册（上）CSS（层叠样式表）是一种用于描述网页中元素的样式和布局的标记语言。
它通过为HTML元素添加样式，实现了网页的美化和个性化。
本篇文章将为大家介绍CSS的基本语法、选择器和常用样式属性。
一、CSS基本语法CSS的语法由选择器和声明块组成。
选择器用于选择需要添加样式的HTML元素，而声明块则包含了一系列样式属性和值。
1. 选择器选择器是CSS中最重要的部分，它用于指定需要应用样式的HTML元素。
常见的选择器有：- 元素选择器：通过HTML元素的标签名选择元素，如`p`表示所有`<p>`元素。
- 类选择器：通过HTML元素的`class`属性选择元素，如`.red`表示所有`class`为red的元素。
- ID选择器：通过HTML元素的`id`属性选择元素，如`#header`表示`id`为header的元素。
- 属性选择器：通过HTML元素的属性选择元素，如`[type="text"]`表示所有`type`属性为text的元素。
- 伪类选择器：通过HTML元素的特殊状态选择元素，如`:hover`表示鼠标悬停时的元素。
2. 声明块声明块由一对花括号`{}`包裹，每个声明由属性和值构成。
属性用于指定需要修改的样式，值用于指定属性的具体取值。
例如，下面的CSS代码将为所有`<p>`元素设置红色字体:```cssp {color: red;}```二、常用的CSS样式属性CSS提供了众多样式属性，可以用来修改HTML元素的外观和布局。
以下是常用的样式属性及其作用：1. 字体样式- `color`：用于设置文本颜色，值可以是颜色名称或RGB值。
- `font-size`：用于设置字体大小，值可以是像素、百分比或者其他单位。
- `font-family`：用于设置字体样式，值可以是字体名称或者字体族名称。
2. 边框样式- `border`：用于设置边框样式，属性值由边框宽度、边框样式和边框颜色组成。
精通css高级web标准解决方案
引言随着 Web 技术的快速发展和不断演进，网页设计和开发变得越来越复杂。
CSS （层叠样式表）是前端开发中的重要组成部分，它决定了网页的外观和样式。
在本文中，我们将深入研究 CSS 的高级用法和 Web 标准解决方案，帮助读者精通 CSS 的使用。
目录1.CSS 布局：弹性盒子和网格布局2.响应式设计和媒体查询3.CSS 动画和过渡效果4.CSS 高级选择器和伪类5.利用 CSS 绘制图形和图标6.使用 CSS 模块化和预处理器7.Web 标准解决方案的最佳实践1. CSS 布局：弹性盒子和网格布局CSS 布局是网页设计的基础，传统的盒模型和浮动布局已经不再适用于复杂的页面结构。
使用弹性盒子（Flexbox）和网格布局（Grid Layout）可以更灵活地控制元素的排列和尺寸。
我们将深入研究这两种布局方式的语法和用法，并通过实例演示其灵活性和效果。
2. 响应式设计和媒体查询在移动设备的普及和多种屏幕尺寸的存在下，响应式设计已成为现代网页设计的必备技能。
通过使用媒体查询（Media Queries），我们可以根据设备的屏幕尺寸和特性，动态地调整元素的样式和布局。
本章将介绍响应式设计的原理和常用的媒体查询技巧，帮助读者制作适应不同设备的网页。
3. CSS 动画和过渡效果CSS 提供了丰富的动画和过渡效果的功能，通过使用关键帧动画（Keyframe Animation）、过渡（Transition）和变换（Transform），我们可以为网页添加生动和吸引人的效果。
本章将深入探讨这些特性的使用方法和参数调整，帮助读者制作出令人印象深刻的动画效果。
4. CSS 高级选择器和伪类CSS 的选择器是控制元素样式的重要手段，通过组合选择器和伪类，可以更精确地选择页面中的元素，并对其应用样式。
本章将介绍一些常见的高级选择器和伪类的使用方法，包括子选择器、相邻选择器、属性选择器和伪元素等，帮助读者在复杂的页面结构中准确地选择元素。
css class样式公用方法
（原创实用版3篇）编制人员:_______________审核人员:_______________审批人员:_______________编制单位:_______________编制时间:____年___月___日序言下面是本店铺为大家精心编写的3篇《css class样式公用方法》，供大家借鉴与参考。
下载后，可根据实际需要进行调整和使用，希望能够帮助到大家，谢射!（3篇）《css class样式公用方法》篇1CSS class 样式是 CSS 中常用的一种样式管理方法，它可以将一组样式定义成一个 class，然后通过在 HTML 元素上添加这个 class 来应用这个样式。
这样做的好处是可以将样式和 HTML 代码分离，使得样式的管理和修改更加方便。
下面是一些 CSS class 样式的公用方法：1. 定义 class 样式：在 CSS 样式表中定义一个 class 样式，例如：```css.my-style {font-size: 16px;line-height: 1.5;color: #333;}```2. 在 HTML 元素上应用 class 样式：在 HTML 元素的 class 属性中添加定义的 class 样式，例如：```html<p class="my-style">这是一个段落。
</p>```3. 修改 class 样式：修改 CSS 样式表中的 class 样式定义，可以全局修改所有应用了这个 class 样式的元素的样式，例如：```css.my-style {font-size: 18px;line-height: 1.6;color: #666;}```4. 继承 class 样式：可以通过在子元素上应用父元素的 class 样式来继承样式，例如：```html<div class="parent-style"><p class="child-style">这是一个段落。
CSS命名空间避免样式冲突和提高代码可重用性
CSS命名空间避免样式冲突和提高代码可重用性在开发网页应用或者网站时，我们经常使用CSS样式表来为页面添加样式。
但是，当一个项目变得复杂，涉及到多个开发人员或团队的时候，CSS样式冲突和代码可重用性可能会成为一个挑战。
为了解决这个问题，我们可以使用CSS命名空间来避免样式冲突并提高代码的可重用性。
1. 什么是CSS命名空间CSS命名空间是一种将CSS样式表分隔为不同的作用域的方法。
通过为特定元素或者一组元素添加前缀，我们可以确保每个组件的样式只在其所属的命名空间中起作用。
这样可以避免样式冲突，并且提供更好的代码可维护性和可重用性。
2. 如何使用CSS命名空间2.1 使用类名命名空间我们可以使用类名来为不同的组件添加命名空间。
例如，假设我们正在开发一个网站，其中包含一个顶部导航栏和一个侧边栏。
我们可以为顶部导航栏中的元素添加以"navbar"作为前缀的类名，例如".navbar-container"和".navbar-link"。
同样，我们可以为侧边栏中的元素添加以"sidebar"作为前缀的类名，例如".sidebar-container"和".sidebar-link"。
这样，每个组件的样式会被限制在其所属的命名空间中。
2.2 使用ID命名空间除了类名，我们还可以使用ID来为特定的元素添加命名空间。
与类名类似，我们可以为不同组件的元素使用不同的ID前缀，以确保每个组件的样式不会互相冲突。
例如，我们可以使用前缀"navbar-"来定义顶部导航栏的元素ID，使用前缀"sidebar-"来定义侧边栏的元素ID。
3. 命名空间的优势和影响3.1 避免样式冲突使用CSS命名空间可以有效地避免样式冲突。
通过将样式限制在特定的命名空间中，我们可以确保每个组件的样式只会应用于其所属的元素，而不会意外地影响其他组件。
CSS常用样式属性大全
CSS常用样式属性大全1. 文本样式- `font-size`: 设置字体大小- `font-family`: 设置字体类型- `font-weight`: 设置字体粗细- `color`: 设置字体颜色- `text-decoration`: 设置文本修饰，如下划线、删除线等- `text-align`: 设置文本对齐方式- `text-transform`: 设置文本大小写转换2. 背景样式- `background-color`: 设置背景颜色- `background-image`: 设置背景图片- `background-size`: 设置背景图片大小- `background-position`: 设置背景图片位置- `background-repeat`: 设置背景图片重复方式3. 边框样式- `border`: 设置边框样式、宽度和颜色- `border-radius`: 设置边框圆角- `border-width`: 设置边框宽度- `border-color`: 设置边框颜色4. 尺寸和布局样式- `width`: 设置元素宽度- `height`: 设置元素高度- `margin`: 设置元素外边距- `padding`: 设置元素内边距- `display`: 设置元素的显示方式5. 盒模型样式- `box-sizing`: 控制盒模型的计算方式- `overflow`: 设置内容溢出时的处理方式6. 定位样式- `position`: 设置元素的定位方式- `top`: 设置元素离顶部的距离- `left`: 设置元素离左边的距离- `right`: 设置元素离右边的距离- `bottom`: 设置元素离底部的距离7. 动画样式- `transition`: 设置元素的过渡效果- `animation`: 设置关键帧动画效果以上是CSS常用的样式属性，通过调整这些属性，您可以灵活地控制网页的样式和布局。
CSS公用样式
html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; }img { border: 0 none; vertical-align: top; }ul, li { list-style-type: none; }h1, h2, h3, h4, h5, h6 { font-size: 14px; }body, input, select, button, textarea { font-size: 12px; font-family: Tahoma, Geneva, sans-serif; }button { cursor: pointer; }i, em, cite { font-style: normal; }body { background: #fff; color: #363636; line-height: 1.2; }a, a:link { color: #222; text-decoration: none; }a:visited { }a:active, a:hover { text-decoration: underline; }a:focus { outline: none; }.fixed:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }.fixed { display: block; min-height: 1%; }*html .fixed { height: 1%; }.clear { diplay: block!important; float: none!important; clear: both; overflow: hidden; width: auto!important; height: 0!important; margin: 0 auto!important; padding: 0!important; font-size: 0; line-height: 0; }.more { float: right; }.more a { font-weight: normal; font-size: 12px; }.fl, .fr { display: inline; float: left; }.fr { float: right; }注：在这里写这些注解就是为了让刚接触到CSS的朋友明白一些东西不至于绕弯路，知道这些代码都是怎么回事的就可以跳到第三条了，可能写的有些啰嗦。
css公用样式
css公用样式CSS是层叠样式表的缩写，它是一种标记语言，主要用于对HTML 或XML（包括SVG或XMPP）等文档的表现方式进行描述。
CSS不仅能够实现页面的美观和统一，还能提高页面的可读性和可维护性。
在Web 开发中，通常都会有公用的CSS样式。
公用样式指的是在多个页面中都会用到的样式。
这些样式可以被多个页面所共享，这样可以大大的提高开发效率。
下面介绍一些常用的公用样式。
1.字体样式字体样式是指字体的大小、颜色、行高等属性。
在CSS中我们可以通过font-size、color、line-height等属性来控制字体的样式。
在编写公用样式时，我们可以定义一些常用的字体样式，比如H1到H6标题字体大小的样式、常用的文字颜色等。
2.页面布局样式页面布局样式是指页面中元素的位置、大小和流程等。
在CSS中我们可以使用position、display、float等属性来控制元素的布局。
在编写公用样式时，我们可以定义一些布局样式，比如页面顶部和底部的边距、输入框的宽度和边框等。
3.背景样式背景样式是指页面中元素的背景颜色、图片等属性。
在CSS中我们可以使用background-color、background-image等属性来控制背景样式。
在编写公用样式时，我们可以定义一些背景样式，比如按钮的背景颜色、表格的背景颜色等。
4.边框样式边框样式是指页面中元素的边框颜色、宽度等属性。
在CSS中我们可以使用border-color、border-width等属性来控制边框样式。
在编写公用样式时，我们可以定义一些边框样式，比如图片的边框颜色和宽度、输入框的边框样式等。
5.链接样式在Web开发中，链接是非常常见的元素。
我们通常会在公用样式中定义a标签的样式，比如链接的颜色、字体等。
这样在网站中的所有链接都会具有相同的样式，看起来更加协调。
6.图标样式在网站中，图标的使用非常普遍。
在编写公用样式时，我们可以通过定义icon的样式，比如字体图标的字体大小、颜色等。
css常见问题及解决方法
css常见问题及解决方法CSS（层叠样式表）在网页设计中扮演着重要的角色，但在使用过程中可能会遇到一些常见问题。
以下是一些常见的问题及其解决方法：浏览器兼容性：问题：不同的浏览器可能会以不同的方式解析CSS，导致页面在不同的浏览器中显示不一致。
解决方法：使用标准化的CSS代码，利用工具如Normalize.css 来重置样式，以及使用浏览器前缀来处理特定浏览器的特性。
盒模型差异：问题：IE浏览器和其他浏览器在盒模型的宽度和高度计算上存在差异。
解决方法：使用box-sizing: border-box;来确保元素的宽度和高度包括边框和内边距。
图片边框问题：问题：在IE6及更早版本中，图片默认会有边框。
解决方法：为图片设置border: 0 none;来去除边框。
边距叠加：问题：当垂直方向上的两个相邻元素都设置了外边距时，它们的外边距会叠加成一个值。
解决方法：避免使用相邻元素的外边距，或者使用内边距代替外边距。
浮动元素问题：问题：浮动元素会导致其父级元素高度塌陷，或者与其他元素重叠。
解决方法：使用清除浮动的方法，如给父级元素添加伪元素并设置clear: both;，或者使用BFC（块级格式化上下文）来包含浮动元素。
绝对定位问题：问题：绝对定位的元素脱离了文档流，可能会导致布局混乱。
解决方法：确保绝对定位元素的父级元素设置了相对定位，以便子元素能够相对于它进行定位。
z-index层级问题：问题：z-index属性不总是按预期工作，有时元素会出现在预期之外的位置。
解决方法：确保元素的定位属性（如position: relative;或position: absolute;）被正确设置，并且理解z-index的工作原理，包括堆叠上下文的概念。
字体问题：问题：不是所有浏览器都支持所有字体，或者字体在不同的操作系统中显示不一致。
解决方法：使用Web安全字体，或者通过@font-face引入自定义字体文件。
同时，为不同的操作系统和浏览器提供备选字体方案。
前端开发中常见的兼容性问题与解决方法
前端开发中常见的兼容性问题与解决方法在前端开发中，无论是网站还是移动应用，都会遇到兼容性问题。
由于不同浏览器的内核和标准解读存在差异，导致同一个网页或应用在不同浏览器中的呈现效果会有所不同。
本文将介绍一些常见的兼容性问题，并提供相应的解决方法。
1. CSS样式兼容性问题CSS样式是页面布局和视觉呈现的关键部分，但在不同浏览器中，对CSS属性的支持程度可能会有差异。
一个常见的问题是浏览器前缀，比如-webkit-或-moz-。
解决该问题的方法是使用 CSS3 前缀自动生成器，例如 Autoprefixer，它可以自动根据浏览器最新统计数据和规则，为 CSS 添加所需的前缀。
另外，还有一些 CSS 属性在不同浏览器中的取值和解读方式也存在差异。
在设置样式时，可以使用浏览器的特定前缀属性、hack 或工具库来解决问题。
同时，建议在开发过程中尽量使用通用属性和值，避免使用仅特定浏览器支持的属性。
2. JavaScript兼容性问题JavaScript 是实现网页动态效果和交互功能的重要技术之一。
但由于不同浏览器对 JavaScript 标准的实现程度不同，可能导致网页在不同浏览器中的运行效果不一致。
以下是一些常见的 JavaScript 兼容性问题及解决方法。
一是不同浏览器对 JavaScript DOM API 的解析和操作可能会有所差异。
解决这一问题的方法是使用工具库，如 jQuery、React 等，它们提供了跨浏览器兼容的API 封装。
二是不同浏览器对 JavaScript ECMA 标准的支持程度存在差异。
解决方法之一是使用 Polyfill，即为旧版浏览器提供缺失的 ES6 或 ES7 特性支持。
可以使用工具库如 Babel 或 core-js 来自动引入所需的 Polyfill。
三是一些浏览器对 JavaScript 中的特定方法或属性可能存在兼容性问题，比如IE 对 XMLHttpRequest 的实现与标准不一致。
css样式冲突怎么解决？
css样式冲突怎么解决？⼀个⽹页有时会使⽤两种CSS，那发⽣css样式冲突要怎么解决？下⾯本篇⽂章就来给⼤家介绍⼀下发⽣css样式冲突的解决⽅法，希望对⼤家有所帮助。
css冲突怎么解决？解决⽅法有很多，如果可以对html改动的话，就给你需要细化的页⾯元素加多⼀个class或者ID就⾏了，当然这种⽅法应该不是你想要的。
那么接下来是不改变HTML的情况下，直接⽤css的⽅法来实现你想要的效果。
⽅法⼀：细化选择符假如全局是这样来定义⼀个元素的样式的：.abc {background:#000}，同时这个class为abc的元素是⾪属于某个元素的，⽐如下⾯这样的html代码结构<div><div></div></div>那么在细化css⾥⾯，只需要在.abc前⾯加多⼀个⽗元素的选择符就⾏了：.container .abc {background:#fff}这样.container .abc的优先级就⼤于了.abc，⾃然细化css⾥⾯的background设置也就不会被全局CSS覆盖了~~⽅法⼆：提升样式的优先级这种⽅法个⼈不太推荐，相对⽽⾔会简单粗暴⼀些。
同样是上⾯的例⼦，在细化CSS⾥⾯，只要在样式后⾯加⼀个!important，例如这样：.abc {background:#fff !improtant;}这个样式的优先级就会默认提升到顶级，全局样式就⽆法影响到它了。
⽅法三：改变两个样式的加载顺序这种⽅法⽐较简单，就是只要把细化css加载在全局css之后就⾏了，这样后⾯的样式就会⾃动覆盖前⾯的样式。
不过如果你的html⾥⾯这两个样式表的加载顺序是先细化后全局的话，就要稍微调整⼀下代码才⾏。
CSS布局技巧与常见问题解决方法
CSS布局技巧与常见问题解决方法CSS作为一种样式表语言，用于定义网页的外观和布局。
在网页设计中，CSS布局扮演着重要的角色。
然而，由于各种浏览器的差异和特殊需求，常常会遇到一些布局问题。
本文将介绍一些CSS布局技巧，并提供一些常见问题的解决方法，以帮助开发者更好地处理布局。
一、响应式布局响应式布局是一种根据屏幕尺寸自动调整布局的技术。
随着移动设备的普及，响应式布局越来越重要。
为了实现响应式布局，可以利用CSS中的媒体查询来设置不同的样式。
例如，通过设置@media screen and (max-width: 768px)的媒体查询，可以针对屏幕宽度小于768px的情况，设置特定的布局样式，使网页在不同屏幕尺寸下都能良好显示。
二、居中布局居中布局是CSS布局中常见的需求。
有多种方法可以实现居中布局。
一种常见的方法是使用Flexbox布局。
通过设置容器的display为flex，再设置容器内元素的justify-content和align-items为center，即可实现水平和垂直居中。
另外，利用绝对定位和margin来实现居中布局也是常用的方法。
通过将容器设置为position为relative，再将内容元素设置为position为absolute，并设置left和top为50%，同时使用负margin将内容元素平移至中心位置。
三、多列布局多列布局是一种常见的页面布局需求。
CSS提供了多种实现多列布局的方法。
其中，最常用的方法是使用CSS的column属性。
通过设置容器的column-count和column-gap，可以将容器内的内容等分为多列，并设置列与列之间的间距。
此外，利用flexbox布局也可以实现类似的效果。
通过设置容器的display为flex，并设置flex-wrap为wrap，即可实现内容按照指定的列数自动换行显示。
四、浮动元素与清除浮动浮动元素是常用的布局方式，但也会导致一些问题。
css 精简与复用相关方案
CSS 精简与复用是提高网站性能和可维护性的重要手段。
以下是一些相关的方案：
CSS 预处理器：如Sass 或Less，它们允许你使用变量、嵌套规则、混合等功能，使CSS 更易于组织和复用。
CSS in JS：一些前端框架（如React）允许你将CSS 直接写在JavaScript 文件中，这样可以更方便地复用和动态修改样式。
CSS Modules：这是一种局部作用域的CSS 方案，它允许你在每个组件中写独立的CSS，从而避免全局样式冲突，并使CSS 更易于复用。
CSS-in-JS 库：如styled-components 或emotion，它们结合了JS 的灵活性和CSS 的组织性，提供了一种全新的CSS 复用和动态样式的方法。
CSS 框架：如Bootstrap 或Tailwind CSS，它们提供了大量预定义的样式和组件，可以帮助你快速构建复杂的界面，同时避免样式的冲突和重复。
CSS 变量和CSS Houdini：CSS 变量（也称为自定义属性）和Houdini 是一组允许你更精细控制CSS 的API。
它们可以使你更方便地复用样式，同时避免硬编码的值。
使用PostCSS 和Autoprefixer：这些工具可以帮助你自动处理CSS，添加必要的浏览器前缀，并优化代码。
利用工具进行代码优化：如使用PurgeCSS 来移除未使用的CSS，或者使用Terser 来压缩JavaScript。
组件化开发：将UI 组件作为可复用的独立实体开发，可以大大提高代码的复用性。
模块化CSS：将CSS 分割成小块，每个块只关注特定的功能或组件，可以提高代码的可读性和可维护性。
以上就是一些关于CSS 精简与复用的方案。
CSS公用样式
第六行 button 这个按钮的鼠标触发属性是默认的箭头，在用户体验上不是特别好，所以我把鼠标触发的属性改成了小手。
第七行就是在写一些不是特别重要 或是装饰的标签时我就是用到这些选择器 由于他们都有文字的默认属性，所以我去掉了，在用到的时候不至于出问题。
第八行 body 写背景色 是因为有的 windows 系统外观会把浏览器背景色也改成别的色，所以为了不会问题，就加上背景白色了，然后再加上文字颜色，字体大小和字体我在前面已经写了。
第九行到第十一行 a:link 这些大家写的都差不多吧?
第十二行 点击链接时出现的虚线框消失，就是消除焦点。（描述不太专业，见谅！）
第二行里 img 图片标签的样式 大家是各有不同，目的都是一个让浏览器里默认图片是没有边框的，还有ie6里图片底部出现的空白间隔消失掉。有的爱用 display:block; border: none;
但是这样写的话，都会有这样或那样的缺点，display: block; 这样写的话 你要让图片左右居中于一个盒子内的时候 你怎么办？ margin: auto; 这样吗？但是你要让外面的盒子有一个实际的宽度，如果是换成 vertival-align: top; 或是 vertival-align: middle; 的话那么这个实际的宽度就不必写了，只用加一个 text-align: center; 图片也不用加外填充了。
还有就是有的酷友会奇怪我写的 border: 0 none; 这里要写 0 再加一个 none，这个问题我还是想说一下是因为我在写文本框 input 的时候，发现在不同的 windows 系统外观下，你光写border: none 或是 border: 0; 都不行，文本框的边框还是在的，所以就必须写 border: 0 none; 这个习惯也就留到了img 上，所以大家还是可以写成 border: none; 但是写 input 的时候，要边框没有的时候还是要写 border: 0 none;
css2种公共样式
css2种公共样式第⼀种PC端公共样式：html{max-width: 640px;margin:0 auto;}article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, figure, section, legend, textarea, p, blockquote, th, td, input, select, textarea, button { margin: 0; padding: 0 }body{font:14px/1.4 "Microsoft Yahei",Arial,Helvetica,sans-serif;color:#424242;max-width: 640px;margin: 0 auto;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;}table{border-collapse:collapse;border-spacing:0}ul,ol,dd,dt,dl{list-style-type:none;}a{color:#333;text-decoration: none;-webkit-touch-callout: none;-webkit-user-select: none;}a,input,select{-webkit-tap-highlight-color: transparent;-webkit-appearance: none;-moz-appearance: none;-webkit-border-radius: 0;} input,img{border:none;padding:0;font-size:14px;}i,em{font-style:normal;}:focus{outline: none;}/*iphone6*/@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){body{font-size:14.5px;}}/*iphone6plus*/@media(min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3){body{font-size:15.5px;}}/*原⼦类*/.clear { clear: both; }.clear:after { display: block; clear: both; visibility: hidden; height: 0; overflow: hidden; content: "."; }.fl { float: left; }.fr { float: right; }.mb10{margin-bottom: 10px;}.mt10{margin-top: 10px;}/*placeholder css*/::-moz-placeholder{ font-family: "Microsoft YaHei"}::-webkit-input-placeholder{ font-family: "Microsoft YaHei"}:-ms-input-placeholder{ font-family: "Microsoft YaHei"}第⼆种移动端公共样式：html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike,strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,tfoot, thead, tr, th, td ,textarea,input { margin:0; padding:0; }address,cite,dfn,em,var, i {font-style:normal;}body {font-size: 16px; line-height: 1.5; font-family:'Microsoft Yahei','simsun','arial','tahoma'; color: #222; background: #eee; }table { border-collapse:collapse; border-spacing:0; }h1, h2, h3, h4, h5, h6, th { font-size: 100%; font-weight: normal; }button,input,select,textarea{font-size:100%;}fieldset,img{border:0;}a { text-decoration: none; color: #666; background: none }ul, ol { list-style: none; }:focus{ outline:none;}.clearfix{ clear: both; content: ""; display: block; overflow: hidden }.clear{clear: both;}.fl{ float: left; }.fr{float: right;}。
css清除默认样式和设置公共样式
css清除默认样式和设置公共样式/*公共样式--开始*/html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {margin: 0;padding: 0;}*{box-sizing: border-box;}html, body {min-height: 100%;}body {font-family: "Microsoft YaHei";font-size:14px;color:#333;}h1, h2, h3, h4, h5, h6{font-weight:normal;}ul,ol {list-style: none;}img {border: none;vertical-align: middle;}a {text-decoration: none;color: #232323;}table {border-collapse: collapse;table-layout: fixed;}input, textarea {outline: none;border: none;}textarea {resize: none;overflow: auto;}.clearfix {zoom: 1;}.clearfix:after {content: ".";width: 0;height: 0;visibility: hidden;display: block;clear: both;overflow:hidden;}.fl {float: left}.fr {float: right}.tl {text-align: left;}.tc {text-align: center}.tr {text-align: right;}.ellipse {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.inline{display: inline-block;*display: inline;*zoom: 1;}/*公共样式--开始*/html, body, blockquote, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, a, img, label, input, legend, li, ol, p, pre, td, textarea, th, ul,table,tr { margin: 0;padding: 0;}* {box-sizing: border-box;}html, body {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;text-size-adjust: 100%;}body {-webkit-font-smoothing: antialiased;}body, button, input, select, textarea {font: 12px/1.5 "Microsoft Yahei", Arial, Helvetica, sans-serif;color: #444443;}button, input, select, textarea { font-size: 100%;}input {padding: 0 5px;}textarea {padding: 5px;}h1, h2, h3, h4, h5, h6 {font-weight: normal;}ul, ol {list-style: none;}img {border: none;vertical-align: middle;max-height: 100%;}a {text-decoration: none;color: #444443;}em {font-style: normal;}table {border-collapse: collapse;table-layout: fixed;}input, textarea, button {outline: none;}textarea {resize: none;overflow: auto;}.clearfix,.col-container{zoom: 1;}.clearfix:after,.col-container:after { content: ".";width: 0;height: 0;visibility: hidden;display: block;clear: both;overflow: hidden;}.fl {float: left}.fr {float: right!important;}.tl {text-align: left;}.tc {text-align: center}.tr {text-align: right;}.ellipse {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.inline {display: inline-block;*display: inline;*zoom: 1;}.borderRadius {border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;}/*公共样式--结束*//*bootstrap版适配*/.col-container {margin-right: auto;margin-left: auto}@media (min-width: 768px) {.col-container {width: 750px}}@media (min-width: 992px) {.col-container {width: 970px}}@media (min-width: 1200px) {.col-container {width: 1170px}}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, position: relative;min-height: 1px;}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {float: left}.col-xs-12 {width: 100%}.col-xs-11 {width: 91.66666667%}.col-xs-10 {width: 83.33333333%}.col-xs-9 {width: 75%}.col-xs-8 {width: 66.66666667%}.col-xs-7 {width: 58.33333333%}.col-xs-6 {width: 50%}.col-xs-5 {width: 41.66666667%}.col-xs-4 {width: 33.33333333%}.col-xs-3 {width: 25%}.col-xs-2 {width: 16.66666667%}.col-xs-1 {width: 8.33333333%}@media (min-width: 992px) {.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {float: left}.col-md-12 {width: 100%}.col-md-11 {width: 91.66666667%}.col-md-10 {width: 83.33333333%}.col-md-9 {width: 75%}.col-md-8 {width: 66.66666667%}.col-md-7 {width: 58.33333333%}.col-md-6 {width: 50%}.col-md-5 {width: 41.66666667%}.col-md-4 {width: 33.33333333%}.col-md-3 {width: 25%}.col-md-2 {width: 16.66666667%}.col-md-1 {width: 8.33333333%}}@media (min-width: 768px) {.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {float: left}.col-sm-12 {width: 100%}.col-sm-11 {width: 91.66666667%}.col-sm-10 {width: 83.33333333%}.col-sm-9 {width: 75%}.col-sm-8 {width: 66.66666667%}.col-sm-7 {width: 58.33333333%}.col-sm-6 {width: 50%}.col-sm-5 {width: 41.66666667%}.col-sm-4 {width: 33.33333333%}.col-sm-3 {width: 25%}.col-sm-2 {width: 16.66666667%}.col-sm-1 {width: 8.33333333%}}@media (min-width: 1200px) {.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left}.col-lg-12 {width: 100%}.col-lg-11 {width: 91.66666667%}.col-lg-10 {width: 83.33333333%}.col-lg-9 {width: 75%}.col-lg-8 {width: 66.66666667%}.col-lg-7 {width: 58.33333333%}.col-lg-6 {width: 50%}.col-lg-5 {width: 41.66666667%}.col-lg-4 {width: 33.33333333%}.col-lg-3 {width: 25%}.col-lg-2 {width: 16.66666667%}.col-lg-1 {width: 8.33333333%}}/*旋转效果*/@keyframes rotate {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}@-webkit-keyframes rotate {0%{-webkit-transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg);}}@-moz-keyframes rotate {0%{-moz-transform: rotate(0deg);}100%{-moz-transform: rotate(360deg);}}@-ms-keyframes rotate {0%{-ms-transform: rotate(0deg);}100%{-ms-transform: rotate(360deg); }}@-o-keyframes rotate {0%{-o-transform: rotate(0deg);}100%{-o-transform: rotate(360deg);}}.fade{transform: translateY(2em);-webkit-transform: translateY(2em); opacity:0;filter:Alpha(opacity=0);}.fadesin{transform: translateY(0);-webkit-transform: translateY(0); opacity: 1;transition: all 1s 0.2s;filter:Alpha(opacity=100)}View Code。
CSS公共样式
CSS公共样式global.css | reset.css（格式化样式）common.css（公共组件样式）layout.css（当前页⾯样式）清除全站所有页⾯的浏览器默认样式，保证在初始样式在所有浏览器下⼀致。
common.css（公共组件样式）⼀般⼀个⽹站所有页⾯头部、底部样式都是⼀致的，⽽且很长时间不会有⼤的改变，改变的⼤概就是产品、运营的经常需要添加、去掉某些⼊⼝的需求，要保证全站所有页⾯头部⼀次替换⽣效，只要把头⽂件，已经对应的样式⼀发，马上⽣效，很快就有响应。
⽐如翻页、表单（输⼊框、按钮）等样式也是全站统⼀的，把这些样式都放到common.css⾥⾯，如果哪天所有的按钮样式要变更，⼀次替换就成功了。
layout.css（当前页⾯样式）公共组件以外的所有样式都写到这个样式⽂件⾥⾯，并且保证⼀个页⾯⼀个独⽴样式，页⾯html和css写法要模块化，保证迅速响应项⽬频繁的迭代。
为什么要保证⼀个页⾯⼀个独⽴样式，⽽且要模块化，肯定有朋友和我有过⼀样的经历，修改⼀⾏样式代码，整个页⾯甚⾄N个页⾯都会受影响，搞了半天还不知道哪⾥出了问题，返回到修改前的版本，就没问题了。
终于找到原因了，却不能改以前的样式，更不能删除，只能增加，时间⼀长，css样式⽂件越来越⼤，最后是不堪重负，整个页⾯代码只能重写。
其实global.css和common.css也可以合并到⼀个⽂件，毕竟格式化样式也就那么⼏⼗⾏代码，⽽且格式化样式、头部、底部样式每个页⾯都会⽤到。
这样每个页⾯就只有2个样式：common.csslayout.css如果common.css⾥⾯组件太多，⽽且很多组件也不是常⽤的，也可以像下⾯这样做：heads.css（格式话样式、头部、底部）common.css（公共组件样式）layout.css（当前页⾯样式）⼀般情况下也只有2个样式，当需要⽤到组件的时候才去link组件样式，也不会有太多问题。
最后，不要把什么东西都往组件样式⾥⾯塞，有写东西宁愿每个页⾯重复拷贝也不要塞到组件样式⾥⾯去。
项目初始化CSS公共样式
项⽬初始化CSS公共样式样式初始化不再使⽤R eset CSS了，对于有富⽂本 markdown解析有差异使⽤n ormalize.css与许多CSS重置不同，保留有⽤的默认值。
规范各种元素的样式。
更正错误和常见的浏览器不⼀致问题。
通过细微的修改来提⾼可⽤性。
使⽤详细注释说明代码的作⽤。
直接下载：npm: n pm install --save normalize.css公共样式模拟了b ootstrap的⼀些class，例如：// Flex 布局.d-flex {display: flex !important;}.d-inline-flex {display: inline-flex !important;}.flex-row {flex-direction: row !important;}.flex-column {flex-direction: column !important;}.flex-row-reverse {flex-direction: row-reverse !important;}.flex-column-reverse {flex-direction: column-reverse !important;}.flex-wrap {flex-wrap: wrap !important;}.flex-nowrap {flex-wrap: nowrap !important;}.flex-wrap-reverse {flex-wrap: wrap-reverse !important;}.flex-fill {flex: 1 1 auto !important;}.flex-grow-0 {flex-grow: 0 !important;}.flex-grow-1 {flex-grow: 1 !important;}.flex-shrink-0 {flex-shrink: 0 !important;}.flex-shrink-1 {flex-shrink: 1 !important;}.justify-content-start {justify-content: flex-start !important;}.justify-content-end {.justify-content-center {justify-content: center !important;}.justify-content-between {justify-content: space-between !important;}.justify-content-around {justify-content: space-around !important;}.align-items-start {align-items: flex-start !important;}.align-items-end {align-items: flex-end !important;}.align-items-center {align-items: center !important;}.align-items-baseline {align-items: baseline !important;}.align-items-stretch {align-items: stretch !important;}.align-content-start {align-content: flex-start !important;}.align-content-end {align-content: flex-end !important;}.align-content-center {align-content: center !important;}.align-content-between {align-content: space-between !important;}.align-content-around {align-content: space-around !important;}.align-content-stretch {align-content: stretch !important;}.align-self-auto {align-self: auto !important;}.align-self-start {align-self: flex-start !important;}.align-self-end {align-self: flex-end !important;}.align-self-center {align-self: center !important;}.align-self-baseline {align-self: baseline !important;}.align-self-stretch {align-self: stretch !important;}除此之外，我也使⽤S css的控制指令和S cssScript批量⽣成了⼀些样式, 例如：// 定义内外边距，历遍1-40 取其偶数和5的倍数@for $i from 0 through 40 {@if $i % 2==0 or $i % 5==0 {.m-#{$i} {margin: $i + px !important;}.p-#{$i} {@each $short, $long in l left, t top, r right, b bottom, x (left, right), y (top, bottom){@if $short==x or $short==y {.m#{$short}-#{$i} {@each $direction in $long {margin-#{$direction}: $i + px !important;}}.p#{$short}-#{$i} {@each $direction in $long {padding-#{$direction}: $i + px !important;}}} @else {.m#{$short}-#{$i} {margin-#{$long}: $i + px !important;}.p#{$short}-#{$i} {padding-#{$long}: $i + px !important;}}}}}还有m ixin, 例如：@mixin clearfix {&:after {content: "";display: table;clear: both;}}@mixin scrollBar {&::-webkit-scrollbar-track-piece {background: #d3dce6;}&::-webkit-scrollbar {width: 6px;}&::-webkit-scrollbar-thumb {background: #99a9bf;border-radius: 20px;}}差不多就到这⾥了，最后附上最终代码i ndex.scss@import './variables.scss';@import './mixin.scss';@import './transition.scss';@import './global.scss';variables.scss// base color$blue:#324157;$light-blue:#3A71A8;$red:#C03639;$pink: #E65D6E;$green: #30B08F;$tiffany: #4AB7BD;$yellow:#FEC171;$panGreen: #30B08F;transition.scss/* fade */.fade-enter-active,.fade-leave-active {transition: opacity 0.28s;}.fade-enter,.fade-leave-active {opacity: 0;}/* fade-transform */.fade-transform-leave-active,.fade-transform-enter-active {opacity: 0;transform: translateX(-30px);}.fade-transform-leave-to {opacity: 0;transform: translateX(30px);}m ixin.scss@mixin clearfix {&:after {content: "";display: table;clear: both;}}@mixin scrollBar {&::-webkit-scrollbar-track-piece {background: #d3dce6;}&::-webkit-scrollbar {width: 6px;}&::-webkit-scrollbar-thumb {background: #99a9bf;border-radius: 20px;}}@mixin relative {position: relative;width: 100%;height: 100%;}@mixin pct($pct) {width: #{$pct};position: relative;margin: 0 auto;}@mixin triangle($width, $height, $color, $direction) { $width: $width/2;$color-border-style: $height solid $color;$transparent-border-style: $width solid transparent; height: 0;width: 0;@if $direction==up {border-bottom: $color-border-style;border-left: $transparent-border-style;border-right: $transparent-border-style;}@else if $direction==right {border-left: $color-border-style;border-top: $transparent-border-style;border-bottom: $transparent-border-style;}@else if $direction==down {border-top: $color-border-style;border-left: $transparent-border-style;border-right: $transparent-border-style;}@else if $direction==left {border-right: $color-border-style;border-top: $transparent-border-style;border-bottom: $transparent-border-style;}}c ommon.scssg lobal.scss。
css3中公用样式的引用
在CSS3中，您可以使用多种方式来引用和重用公用样式，以提高代码的可维护性和重用性。
以下是一些常见的方法：1. **使用类选择器**：最常见的方式是使用类选择器。
您可以为多个元素应用相同的类，然后在CSS中定义该类的样式。
HTML:```html<p class="common-style">这是一段文本。
</p><div class="common-style">这是一个容器。
</div>```CSS:```css.common-style {font-size: 16px;color: #333;/* 其他共享样式属性*/}```2. **使用ID选择器**：虽然类选择器更适合用于重用样式，但您也可以使用ID选择器。
但要注意，ID应该是唯一的，不应该用于多个元素。
HTML:```html<p id="common-style">这是一段文本。
</p>```CSS:```css#common-style {font-size: 16px;color: #333;/* 其他共享样式属性*/}```3. **使用属性选择器**：您还可以使用属性选择器来选择具有相同属性的元素，并为它们定义样式。
HTML:```html<a href="#" class="link">链接1</a><a href="#" class="link">链接2</a>```CSS:```cssa[class="link"] {text-decoration: none;color: blue;}```4. **使用CSS变量**：CSS3引入了自定义属性和变量，您可以使用它们来定义和重用值。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS日常公用样式与一些解决方案
做网页也四五年啦，一直想总结一些CSS的通用样式，各个浏览器的兼容问题，经常看一些国外的资料，但国外的文章比较先进，不太适合国情，国内大部分人用的还是以IE6为内核的主流浏览器，技术太先进反而会出问题，CSS3也已经开始试用，但仅限于了解还不能实用，估计国内怎么着也得三五年之后啦，不过这样也好，懒人们还是挺喜欢的，省的技术更新太快还得学东西，哈哈~~~~
言归正转，刚才看了一篇文章，觉得写的还不错，加点自己的想法及写法，整理一下，也算对这么多年的一点小小的总结。
html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; }//这些样式大家应该都明白这样是把原先的选择器自带的外填充
和内填充去掉归0，也许有人还在用“*”通配符，但是这样是有缺点的会让代码变得冗余，尤其是子父级嵌套关系越深越麻烦，建议大家要尽量减少使用，建议多使用通用样式，可能选择器还比较少，但是我日常用到的选择器就这么些，如果大家有用到 pre fieldset blockquote 等选择器可以写到里面。
img { border: 0 none; vertical-align: top; }//img 图片标签的样式，目
的都是一个让浏览器里默认图片是没有边框的，还有ie6里图片底部出现的空白间隔消失掉。
有的爱用display:block; border: none;但是这样写的话，都会有这样或那样的缺点，display: block; 这样写的话你要让图片左右居中于一个盒子内的时候你怎么办？margin: auto; 这样吗？但是你要让外面的盒子有一个实际的宽度，如果是换成vertival-align: top; 或是vertival-align: middle; 的话那么这个实际的宽度就不必写了，只用加一个text-align: center; 图片也不用加外填充了。
至于border: 0 none; 这里要写0 再加一个none，只是因为在写文本框input 的时候，发现在不同的windows 系统外观下，光写border:none 或是border:0; 都不行，文本框的边框还是在的，所以就必须写border: 0 none; 如果只用在img上还是可以写成border: none; 但是写input 的时候，要边框没有的时候还是要写border: 0 none;
ul, li { list-style-type: none; }//这个容易理解，就是去掉ul,li的默认样
式，就是前面自带的一些圆点、小方块之类的小修饰，当然可以自己自定义小图片修饰，也可以留着。
h1, h2, h3, h4, h5, h6 { font-size: 14px; }//根据要搭的页面标题字体大小来修改，或是把h1 h2 h3 h4 这些选择器分开来写各自的字体大小。
body, input, select, button, textarea { font-size: 12px; font-family: Tahoma, Geneva, sans-serif; }//搭页面的时候发现ie6里的文本框和下拉
菜单... 等的字体大小不是正常的12号字体，所以在兼容性上不是很完美，所以就写了字体的大小为12号，然后在firfox 里这些标签的字体默认又是宋体，所以又写上字体，然后body 也要写字体大小和大小，所以就在input 的前面加上了body，所以后面就不用再写了。
button { cursor: pointer; }//button 这个按钮的鼠标触发属性是默认的箭头，在用户体验上不是特别好，所以把鼠标触发的属性改成了小手。
i, em, cite { font-style: normal; }//可有可无，个人习惯，装饰的标签时
有时会用到这些选择器由于他们都有文字的默认属性，所以去掉了，在用到的时候不至于出问题。
body { background: #fff; color: #363636; line-height: 1.2; }//body
写背景色是因为有的windows 系统外观会把浏览器背景色也改成别的色，所以为了不会问题，就加上背景白色了，然后再加上文字颜色，字体大小和字体前面已经写了。
a, a:link { color: #222; text-decoration: none; }
a:visited { }
a:active, a:hover { text-decoration: underline; }//这几个没必要说了吧。
a:focus { outline: none; }//点击链接时出现的虚线框消失，就是消除焦点。
.more { float: right; }
.more a { font-weight: normal; font-size: 12px; }//搭页面的过程中，栏目或是标题栏肯定会有更多这个链接，所以加了这个样式，在后面就减少了float: right 这个属性，意义不大
.fl { display: inline; float: left; }
.fr{ display: inline; float: right; }//向左，向右浮动，只为了灵活运用
下面是.fixed 和 .clear 这两个清除浮动的样式说明
.fixed:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
.fixed { display: block; min-height: 1%; }
*html .fixed { height: 1%; }
.clear { diplay: block!important; float: none!important; clear: both; overflow: hidden; width: auto!important; height: 0!important; margin: 0 auto!important; padding: 0!important; font-size: 0; line-height: 0; }
//着重说明一下.clear里的 !important 问题
因为我们在写子级盒子浮动的时候肯定会写到float: left; margin或是padding，还有width 等等，在 .clear的属性里把尽可能会发生冲突的属性加了!important，浏览器就会把这些属性的优先级排到最前，并且ie6也是支持读取!important的，ie6浏览器只要读到相同的属性，以最后的属性为优先级，但是他是对于在同一样式内的，而不是同一样式内的属性他就不会以最后的属性为优先了。