以上就是给各位分享初学CSS-1-CSS的格式，其中也会对css格式怎么写进行解释，同时本文还将给你拓展66种基于animate.css的CSS消息提示动画效果_html/css_WEB-ITnose

以上就是给各位分享初学CSS-1-CSS的格式，其中也会对css格式怎么写进行解释，同时本文还将给你拓展66种基于animate.css的CSS消息提示动画效果_html/css_WEB-ITnose、ASP.NET CSS CSS语法问题中的类与CSSClass的区别、CSS > 译文：理解CSS中的块级格式化上下文_html/css_WEB-ITnose、CSS BUG处理方法大全以及使用CSS的最佳习惯_html/css_WEB-ITnose等相关知识，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

• 初学CSS-1-CSS的格式（css格式怎么写）
• 66种基于animate.css的CSS消息提示动画效果_html/css_WEB-ITnose
• ASP.NET CSS CSS语法问题中的类与CSSClass的区别
• CSS > 译文：理解CSS中的块级格式化上下文_html/css_WEB-ITnose
• CSS BUG处理方法大全以及使用CSS的最佳习惯_html/css_WEB-ITnose

初学CSS-1-CSS的格式（css格式怎么写）

66种基于animate.css的CSS消息提示动画效果_html/css_WEB-ITnose

这是一款基于 animate.css的效果非常酷的CSS消息提示动画效果。这66种CSS消息提示动画效果按出现位置分为4种类型：上部、中部、中下和右下。每个部位的消息提示效果都是不一样的。

注意：这个css消息提示动画效果需要在支持css3的浏览器中才能正常工作。

在线演示：http://www.htmleaf.com/Demo/201503061471.html

下载地址：http://www.htmleaf.com/css3/css3donghua/201503061470.html

ASP.NET CSS CSS语法问题中的类与CSSClass的区别

<asp:GridView Css

<table>

.someclass {font-family:"arial";  
        background-color:#FFFFFF;  
        width: 100%;  
        font-size: small;}  
.someclass th {background: #7AC142;  
             padding: 5px;  
            font-size:small;}

.someclass {font-family:"arial";  
        background-color:#FFFFFF;  
        width: 100%;  
        font-size: small;}  
th.someclass {background: #7AC142;  
             padding: 5px;  
            font-size:small;}

CSS > 译文：理解CSS中的块级格式化上下文_html/css_WEB-ITnose

译文：理解CSS中的块级格式化上下文

original author: ritesh kumar Original Article: http://www.sitepoint.com/understanding-block-formatting-contexts-in-cs... Translator: HaoyCn Date: 9th of Aug, 2015

块级格式化上下文（Block Formatting Context）是网页CSS视觉渲染的一部分，并用于决定块盒子的布局。在定位体系（Positioning Scheme）中它属于常规流（Normal Flow）。根据W3C所言：

浮动、绝对定位元素（position 为 absolute 或 fixed）、行内块元素 display:inline-block、表格单元格 display:table-cell、表格标题 display:table-caption 以及 overflow 属性值不为 visible 的元素（除了该值被传播到窗口 viewport 的情况）将创建一个新的块级格式化上下文。

上面的引言差不多总结了一个BFC是如何形成的。但让咱们用另外一种更通俗易懂的方式来重定义它。一个BFC就是一个HTML盒子，它至少满足以下条件之一：

创建一个块级格式化上下文

一个BFC可以显式触发。如果我们想创建之，我们只需给它添加上面提到的任何一个CSS样式。

比如，看下面的HTML:

立即学习“前端免费学习笔记（深入）”；

<div>    Some Content here</div>

一个新的BFC可以通过给容器添加任意一个必要的CSS样式来创建，比如overflow: scroll，overflow: hidden，display: flex，float: left，或 display: table。尽管上述条件都可以创建BFC，但也会产生一些其他效果，如：

所以无论何时，当要创建一个BFC时，我们要基于需求选择最恰当的样式。为了保持一致性，我在本文的所有例子中均使用 overflow: hidden。

.container {    overflow: hidden;}

你可以自由选择使用除 overflow: hidden 之外的其他样式。

BFC中盒子的对齐

W3C规范道：

在BFC上下文中，每个盒子的左外侧紧贴包含块的左侧（从右到左的格式里，则为盒子右外侧紧贴包含块右侧），甚至有浮动也是如此（尽管盒子里的行盒子 Line Box 可能由于浮动而变窄），除非盒子创建了一个新的BFC（在这种情况下盒子本身可能由于浮动而变窄）。

简单来说，如上图所示，所以属于BFC的盒子都左对齐（在从左到右的格式下）并且它们的左外侧紧贴包含块的左侧。在最后一个盒子中我们可以看到尽管左侧存在一个浮动元素（棕色），另外一个元素（绿色）仍然紧贴包含块的左侧。该情况的产生原理将在下文关于文字环绕的部分中讨论。

BFC造成的外边距折叠

在常规流中，盒子从包含块的顶部开始一个个地垂直摆放。两个同胞盒子间的垂直举例由两个盒子各自的外边距所决定，但不是二者外边距之和。

为便于理解，我们看个例子。

在上图中，一个红盒子（div）包含着两个同胞绿元素（p），一个BFC已经创建了出来。

<div>    <p>Sibling 1</p>    <p>Sibling 2</p></div>

相应的CSS是：

.container {    background-color: red;    overflow: hidden; /* creates a block formatting context */}p {    background-color: lightgreen;    margin: 10px 0;}

理论上两个同胞元素间的外边距应当是二者外边距之和（20px）但实际上却是10px。这就是众所周知的外边距折叠（Collapsing Margins）。如果同胞元素外边距不同，将应用最大的那个。

使用BFC避免外边距折叠

在讨论了上面BFC折叠外边距的情况后，现在说避免折叠可能有点让人摸不着头脑。但我们必须牢记于心的一件事是，相邻块级盒子（同胞）之间的垂直外边距只有在它们处于同一个BFC时才会发生折叠。如果它们分属于不同的BFC，就不会折叠了。所以，通过创建新的BFC我们可以避免外边距折叠。

让我们在早前的例子中添加第三个同胞元素，现在HTML是：

<div>    <p>Sibling 1</p>    <p>Sibling 2</p>    <p>Sibling 3</p></div>

CSS是：

.container {    background-color: red;    overflow: hidden; /* creates a block formatting context */}p {    background-color: lightgreen;    margin: 10px 0;}

结果和上面一样，即是说，折叠还是会发生并且三个同胞间分隔的垂直距离是10px。这是因为三个 p 标签都从属于同一个BFC。

现在我们修改第三个同胞元素，使之成为一个新的BFC的一部分。现在的HTML变成了：

<div>    <p>Sibling 1</p>    <p>Sibling 2</p>    <div>        <p>Sibling 3</p>    </div></div>

CSS：

.container {    background-color: red;    overflow: hidden; /* creates a block formatting context */}p {    margin: 10px 0;    background-color: lightgreen;}.newBFC {    overflow: hidden;  /* creates new block formatting context */}

现在输出的结果就有所不同了：

因为第二个和第三个同胞元素现在分属于不同的BFC，它们之间就不会发生外边距折叠了。

使用BFC包含浮动

BFC可以包含浮动。我们经常遇到容器中含有浮动元素的情况。这种情况下容器元素没有高度并且其浮动子元素脱离了网页的常规流。我们通常用清除浮动解决这个问题，最普遍的做法就是使用伪元素。但我们也可以通过创建一个BFC来解决问题。

看个例子：

<div>    <div>Sibling</div>    <div>Sibling</div></div>

CSS：

.container {    background-color: green;}.container div {    float: left;    background-color: lightgreen;    margin: 10px;}

在上面这个例子中，容器没有任何高度，并且它包不住浮动子元素。为解决此问题，我们通过添加 overflow: hidden 来在容器中创建一个新的BFC。修改后的CSS成了：

.container {    overflow: hidden; /* creates block formatting context */    background-color: green;}.container div {    float: left;    background-color: lightgreen;    margin: 10px;}

现在容器可以包住浮动子元素，并且其高度会扩展至包住其子元素，在这个新的BFC中浮动元素又回归到页面的常规流之中了。

使用BFC避免文字环绕

有时候浮动DIV旁边的文本会环绕它（如下图1所示）而这种情况有时候并不如我们所愿，我们想要下图2的效果。要解决这个问题，我们可以用外边距，但也可以用BFC。

首先让我们弄明白为何文字会环绕。要理解这个我们必须明白，当存在元素浮动的时候，盒模型如何工作。这就是我早先讨论BFC中对齐时候的遗留问题。我们通过下图来看图1到底发生了什么。

假设HTML是：

<div>    <div>        Floated div    </div>    <p>        Quae hic ut ab perferendis sit quod architecto,         dolor debitis quam rem provident aspernatur tempora        expedita.    </p></div>

上图整个黑色区域表示 p 元素，如我们所见，p 元素没有移位但它叠在了浮动元素之下，而p元素的行盒子（即文本行）却移位了，行盒子水平变窄来给浮动元素腾出了空间。

随着文本的增加，最后文本将环绕在浮动元素之下，因为那时候行盒子不再需要移位，也就成了图1的样子。这就是为什么即便有浮动元素，段落仍紧贴包含块的左侧，而行盒子会变窄来给浮动元素腾位子。

如果我们能位移整个 p 元素，这个环绕问题也就迎刃而解了。

在说解决方案之前，我们再回顾下W3C规范：

在BFC上下文中，每个盒子的左外侧紧贴包含块的左侧（从右到左的格式里，则为盒子右外侧紧贴包含块右侧），甚至有浮动也是如此（尽管盒子里的行盒子 Line Box 可能由于浮动而变窄），除非盒子创建了一个新的BFC（在这种情况下盒子本身可能由于浮动而变窄）。

据此，如果 p 元素创建一个新的BFC那它就不会再紧贴包含块的左侧了。给 p 元素添加 overflow: hidden 就能轻而易举地办到。这解决了文本环绕浮动对象的问题。

在多列布局中使用BFC

如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的BFC，它将总是占据其他列先占位完毕后剩下的空间。

我们来举个三列布局的例子：

这是HTML:

<div>    <div>column 1</div>    <div>column 2</div>    <div>column 3</div></div>

CSS：

.column {    width: 31.33%;    background-color: green;    float: left;    margin: 0 1%;}/*  Establishing a new block formatting     context in the last column */.column:last-child {    float: none;overflow: hidden; }

现在尽管盒子的宽度稍有改变，但布局不会打破。当然，对多列布局来说这不一定是个好办法，但能避免最后一列下掉。这个问题上弹性盒或许是个更好的解决方案，但这个办法可以用来说明元素在这些环境下的行为。

总结

我希望本文已经向你展示了BFC的特性以及BFC是如何影响页面上的元素的视图定位的。展示其用法的例子应该有让BFC显得更透彻一些。

如果你有任何想要补充的，请在评论里留言。如果你想更深入了解的话，一定得去回顾W3C对这个话题的详述。

译者注

本文中提及的浮动与行盒子变窄问题深入探讨，可以参看博文：http://www.zhangxinxu.com/wordpress/?p=583

转载本文亦请同时注明原出处（见本文顶部）。如您认可本文翻译，欢迎推荐或收藏，谢谢！

CSS BUG处理方法大全以及使用CSS的最佳习惯_html/css_WEB-ITnose

立即学习“前端免费学习笔记（深入）”；

效果预览 点击下载

CSS BUG在dedecms.com介绍过也很多，也一直困扰着大家，在CSS布局中会常遇到这样的问题。相信大家对于常见 CSS BUG 的处理已经相对比较熟悉，例如：IE6 Three Pixel Gap（3px bug）、IE5/6 Doubled Float-Margin Bug（双倍边距的bug） 等等。但时常我们也会碰到复杂的 CSS BUG 问题，所谓“复杂”实质是指触发的条件很复杂，而“BUG” 也并非指一定是浏览器的 BUG 。对于此类问题，我们首先要解决的是如何定位到问题，只有快速的定位到问题，才能更好的解决问题。
　　对于快速定位，个人的经验处理一般如下（基本可以定位到我在 淘宝 遇到的 90% 以上的复杂 CSS BUG 问题）：

一、检查页面的标签是否闭合
　　不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。
　　快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。

二、样式排除法
　　有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。
　　对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。

三、模块确认法
　　有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。

四、检查是否清除浮动
　　其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用 无额外 HTML 标签的清除浮动的方法（尽量避免使用 overflow:hidden;zoom:1 的类似方法来清除浮动，会有太多的限制性）。

五、检查 IE 下是否触发 haslayout
　　很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的 《On having layout》（如果无法翻越穿越伟大的 GFW，可阅读 蓝色上的转帖 ） 
　　快捷提示：如果触发了 haslayout，IE 的调试工具Internet Explorer Developer Toolbar中的属性中将会显示 haslayout 值为 -1。

六、边框背景调试法
　　故名思议就是给元素设置显眼的边框或者背景（一般黑色或红色），进行调试。此方法是最常用的调试 CSS BUG 的方法之一，对于复杂 BUG 依旧适用。经济实惠还环保^^
　　最后想给大家强调一点的是，养成良好的书写习惯，减少额外标签，尽量语义，符合标准，其实可以为我们减少很多额外的复杂 CSS BUG，更多的时候其实是我们自己给自己制造了麻烦。希望大家远离 BUG ，生活越来越美好。

立即学习“前端免费学习笔记（深入）”；

大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范，但按照现有标准来使用CSS却还是不无裨益的。一般来说，开发人员应尽可能将内容与结构分离开来。这样做的好处在于：

1：增加站点的寿命

不规范的样式表可能在当时觉得很方便，但新版本的浏览器出来以后，很可能就会出现兼容性问题。到时逐页修改站点就是一项非常费时的工作同时也使使用CSS失去了意义。

2：让你的站点对所有的用户以及浏览器都适用。

有些地方的政府已经立法要求网站必须让残障人士也同样可以浏览。为残障认识设计的浏览设备，比如听力浏览器，对CSS规范性要求极其严格。

3：让站点更新和维护更加轻松。

使用方式得当的话，CSS可让你在一个页面中的调整快速应用到所有页面中去。

你首先要做的选择是使用哪一种样式表。当涉及到最佳习惯时，对不同样式表的分析如下：

Inline CSS;简单地说，你应该尽量避免使用。除了一些其他的缺点之外，使用Inline CSS意味着你并没有利用到CSS的真正优点，即你并没有将内容与结构分离开。DW MX使用Inline CSS主要是为了定位页面元素(这些元素在DW MX的用户界面中称为“层(layer)”)，或者为了使用某个DHTML特效，它需要使用Inline 样式的Javascript来改变一个对象的属性。

Embedded CSS：它也不是最理想的，因为它只能对当前页面施加影响。在更新的过程中，如果某一个页面丢失，将会使站点的风格不一致;另外，当用户浏览你的站点时，每一页都要下载一次样式表信息。

External CSS：这是你的第一选择。External CSS可以让所有连接到它的页面保持一致的外观风格;提纲挈领，更改一次，轻松更新所有相关页面;让你的页面体积更小，浏览速度更快。

今天关于初学CSS-1-CSS的格式和css格式怎么写的介绍到此结束，谢谢您的阅读，有关66种基于animate.css的CSS消息提示动画效果_html/css_WEB-ITnose、ASP.NET CSS CSS语法问题中的类与CSSClass的区别、CSS > 译文：理解CSS中的块级格式化上下文_html/css_WEB-ITnose、CSS BUG处理方法大全以及使用CSS的最佳习惯_html/css_WEB-ITnose等更多相关知识的信息可以在本站进行查询。