全文引自这里，很棒的一篇文章what由于不同厂商的浏览器或某浏览器的不同版本（IE6~IE11，Firefox/Safari/Opera/Chrome等），对css的支持、解析不一样。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同的版本写特定的css样式，把这个针对不同浏览器/不同版本写相应的css code的过程叫做css hack。how由于不同的浏览器和浏览器的各版本对css的支持及解析结果不一样，以及css优先级对浏览器展现效果的影响，我们可以...
left</a>-2 list-paddingleft-2">第一次电话面试，面试哥哥问我你都知道哪些去除浮动的办法？我是这样回答的“有两种方法，一种是在需要去除浮动的元素上使用“clear：both”；另一种是在浮动元素的父元素使用"overflow:hidden"。说实话当时说第二种方法时，我并没有实践过，只是看过，然后含含糊糊的说了。第二次面试，也问到了这个问题，但是由于第一次电面的教训，我回去就看了看书，《css设计指南》里面有专门的一章讲去除浮动...
CSS3新增的:not()伪类选择符，匹配不含有选择符的元素。假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线，案例如下：<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>使用:not() 最后一行li不添加边框</title> <style type="text/css">/* 使字体在所有设备上都达到最佳的显示 */ html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegi...
教程开始： 首先要知道，p是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图： 可以看出，即使p1的宽度很小，页面中一行可以容下p1和p2，p2也不会排在p1后边，因为p元素是独占一行的。 注意，以上这些理论，是指标准流中的p。 小菜认为，无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个p元素”。 显然标准流已经无法满足需求，这就要用到浮动。 ...
CSS 定位机制CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box）...
本篇文章主要介绍了深入理解css中vertical-align属性 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧一、为什么要写这篇文章今天看到一个问题：两个p 都设置 display：inline-block，正常显示；但是在第二个p中加一个块级元素或者内联元素，显示就变了个样，为什么？<meta charset="utf-8"/> <style> p{width: 100px;height: 100px;border:1px solid red;display: inline-block; } .align{ /* ...
本文讲解怎么用css实现http://www.gxlcms.com/css/css-rwd-images.html" target="_blank">图片放大镜效果？以下就是图片放大镜效果CSS实例详解效果如图(例子中偷偷链了张天猫的图片，希望没啥事 -。-)：实现过程教简单，但我们还是从css开始分析，过程如下（图片已正方形为例）：css：/* 图片容器 */.imgBox{width: 200px; /* 各位大老爷们看着办 */height: 200px; /* 各位大老爷们看着办 */position: relative; /* 必需 */}/* 图片...
CSS半透明边框的实现实例详解（图）1.半透明边框问题:如果我们要为一个容器设置红色背景和一道黑色半透明边框，我们可能会这样写:border: 20px solid rgba(0,0,0,0.5); background: red; 但是效果却是这样的（图1-1.png）；我们的半透明颜色怎么没有实现半透明边框？图1-1.png解决方案：我们可以通过background-clip属性来调整上面的默认行为，把它是值设为padding-box,然后就出现了我们想要的效果（图1-2.png）；border: 20px sol...
在Dreamweaver4的CSS样式里包含了W3C规范定义的所有CSS1的属性，Dreamweaver4把这些属性分为Type（类型）、Background（背景）、Block（块）、Box（盒子）、Border（边框）、 List（列表）、Positioning（定位）、Extensions（扩展）八个部分，如下图，下面我们分别详细讲解。1. Type（类型）Type面板主要是对文字的字体，大小，颜色，效果等基本样式进行设置。设置时，我们只对要改变的属性进行设置，没有必要改变的属性就空着。注...
语法：writing-mode : lr-tb | tb-rl/* 关键字值 */ writing-mode: horizontal-tb; /* 默认值 */ writing-mode: vertical-rl; writing-mode: vertical-lr; /* 全局值-关键字inherit IE8+，initial和unset IE13才支持 */ writing-mode: inherit; writing-mode: initial; writing-mode: unset;lr-tb : 默认值。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。 所有的字形都是竖直向上的。这种布...
一、块元素与内联元素之间的转换关于块级元素与内联元素之间的转换我们可以使用css解决，使用CSS以后块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素加上display:block这样的属性，让它也有每次都从新行开始的属性，即成为块元素同样我们可以把块元素加上display:inline这样的属性，让它也在一行上排列。二、display：inline与display：blockdisplay：inline：显示为内嵌，使快元素转换为内联元素同时...
还记得之前分享过一款CSS3图片悬停放大特效，效果非常不错。今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果，只不过之前那个是图片，这次是色块，其实掌握了其CSS原理，任何网页元素都可以实现这种突出放大的CSS3动画特效。效果图如下：实现的代码。html代码： <p class="container"><ul class="evenflow sample_1"><li class="evenflow_scale"><a href="#" target="_blank"><img src="img/1.png"></a></li><li class="even...
css3 http://www.gxlcms.com/html5/html5-4-mip-animate.html" target="_blank">动画 在CSS3中可以通过animation创建复杂的动画序列，像transition属性一样用来控制CSS的属性实现动画效果。 animation实现动画效果主要由两个部分组成。通过类似Flash动画中的关键帧来声明一个动画。在animation属性中调用关键帧声明的动画，从而实现一个更为复杂的动画效果。声明关键帧 在CSS3中，把@keyframes称为关键帧。 @keyframes...
CSS（Cascading Style Sheet）层叠样式表中的层叠意味着样式会从文档结构中的一个层次传递到另一个层次，其作用是让浏览器来决定在诸多源中，为某个标签应用来自哪个源的样式属性。层叠是一种强大的机制。理解层叠有助于以最经济和最容易维护的方式来编写CSS，也有助于根据你的意愿创建出最理想的文档外观。样式的来源首先，应该有一个隐藏在浏览器中的浏览器样式表（默认样式表），因为每个标签无需编写什么就会带有样式。比如，h...
本文主要介绍了CSS中px em rem区别与使用。具有很好的参考价值。下面跟着小编一起来看下吧最近在学习字体时遇到字体大小的设置，font-size单位可以是px或em或rem，那么这几种单位都有什么区别呢，该如何使用呢？px是像素图像的基本采样单位，相对于显示器屏幕分辨率而已的，什么是一个像素呢，你把一张图一直放大，会看到一个个小的方格子，一个方格子就是一个像素。浏览器默认的字体大小是16px。px的特点是：字体大小写死固定了，...