CSS的float浮动效果在一些情况下非常不稳定,控制不好的时候一般还是清除浮动为妙,这里我们就来总结CSS浮动所差生的内容溢出问题及清除浮动的方法抛一块问题砖（display： block）先看现象：在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，...
浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。这里谈到的浏览器，主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等。 但更多的兼容还是考虑IE6/IE7/FF之间的斗争先来谈谈CSS Hack我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack.CSS hack主要有三种：IE条件注释法、...
本文介绍谨慎使用CSS中的星号(*)通配符的总结在关于CSS3的文章中都提到了通配符的使用（如果你对CSS3中的选择符使用感兴趣可以参考我翻译的详解CSS3中的属性选择符）。 里面讲到了CSS3中多种通过符的使用方法，如星号（*）、脱字符（^）和美元符号（$）等。而由于星号(*)在CSS2.x中已经得到多数浏览器的支持，所以其使用范围最广。 我们最常见的星号（*）使用方法就是： 代码如下:* {padding:0;margin:0;font-family:…}这种方法很...
网页添加CSS样式表的四种方法总结，大家可以根据需要选择自己喜欢的方式。一、使用STYLE属性： 将STYLE属性直接加在个别的元件标签里。 <元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如： <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%> 这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。 二、使用STYLE标签： 将样式规则写在<STY...
进行css布局的同时，没有足够的基础知识是不可能的，本文为初学者带来学习CSS样式的基础总结分享，经常使用的css属性，感兴趣的朋友可以参考下，或许有所帮助一．CSS基本介绍 级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控...
CSS3中的Media Queries经常被用来制作前端的响应式设计页面,这里分享CSS3中的Media Queries的学习总结,包括IE8中的兼容问题解决,需要的朋友可以参考下一、Media Queries 支持的属性二、关键字and - 结合多个媒体查询 not - 排除某种制定的媒体类型 only - 用来定某种特定的媒体类型三、引用样式示例<link rel="stylesheet" media="all" href="style.css" /> <link rel="stylesheet" media="screen and (min-width:980px)" href=...
CSS3中的flex布局和before伪元素等特性用来实现垂直居中真的是太方便和优雅了,这里我们就来总结CSS3的新特性来总结垂直居中的实现方法分享:0.单行内容的居中只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了.middle-demo-1{ height: 4em; line-height: 4em; overflow: hidden; }优点：（1）. 同时支持块级和内联极元素（2）. 支...
下面小编就为大家带来一篇推荐css水平居中各种方法的总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧但是，有时候会发现这样写了也没出效果。原因是什么呢？ 请往下看。水平居中：分为块级元素居中和行元素居中行内元素：行内元素就是内联元素。例如<span>、<a>、<label>、<em>、<img>等。。直接构建一个具有 ”text-align:center“样式的容器，那么里面包含的行内元素就会都居中了。<p sty...
这篇文章主要介绍了CSS两列布局实现方式的总结,讨论了包括absolute + margin和float + margin方式的一些实践和问题,需要的朋友可以参考下两列布局大概是最经典的一种网页布局方式了，本博客就是采用的这种布局。两列布局中，以主列(main)是自适应宽度，子列(sidebar)是固定宽度的情形最为常见。今天就来好好探讨一下如何实现这种定宽+自适应的两列布局。1. absolute + margin 方式首先想到的是利用 absolute + margin 的方式实现。...
说到 CSS 颜色，相比大家都不会陌生，本文是我个人对 CSS 颜色体系的一个系统总结与学习，分享给大家。先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容。接下来的行文内容大概会按照这个顺序进行，内容十分基础，可选择性跳到相应内容处阅读。色彩关键字嗯，色彩关键字很好理解。它表示一个具体的颜色值，且它不区分大小写。譬如这样color:red的 red 即是一个色彩关键字。在 CSS3 之前，也就是CSS 标准 2，一共包含了 ...
border是最常用的用来制作各种各样p边框的CSS属性,这里我们整理了使用CSS的border属性构建变形边框的方法总结,最主要的还是基于三角形的一些图形变换:border基础回顾border 顾名思义就是边框的意思，在 CSS 中，你可以透过 border 的语法来对边框做许多样化的设计变化，例如设定边框的宽度、样式、颜色等等，也可以隐藏边框，原则上 CSS 对于 border 的设计不只局限于 p 区块或 span 的边框，也可以应用到其他的网页元素的边框上，...
方式一：text-indent:-9999px不多说，ext-indent负值为最常用方法，然问题有三：1.较大的负值有性能问题，例如新浪/腾讯微博提交按钮的-9999em，大概12~16万像素的宽度，相对于100个显示器宽度，在低配Android pad上，尤其含动画效果的时候，会直接卡爆；2.FireFox浏览器下虚框。其实问题不大，overflow:hidden可修复；3.不能应用在IE6/IE7伪inline-block水平元素上，否则元素会被text-indent拐走。即使有人提出：{ text-indent: 1...
css3的动画功能有以下三种:1、transition(过度属性)2、animation(动画属性)3、transform(2D/3D转换属性)下面逐一进行介绍我的理解：1、transition:<过渡属性名称> <过渡时间> <过渡模式>如-webkit-transition:color 1s;等同于:-webkit-transition-property:color;-webkit-transition-duration:1s;多个属性的过渡效果可以这样写：方法1：-webkit-transition:<属性1> <时间1> ,<属性2> <时间2> ,。。。方法2：-webkit-transition:<属...
一，background-position：（图片定位）三种写法：1）：按％比，左上角最小（0％，0%），右下角最大（100%，％100）；2）：（x,y）左上角最小（0，0），右下角最大（max，max）；3）top，center，left，right，bottom；二，background-clip:1，包含那一部分的值：border；padding；content；三，background-origin:1，从那一部分值开始：border；padding；con tent；四，背景图像是否固定或者随着页面的其余部分滚动。 1，scroll：...
针对之前遇到过的一些特殊样式的实现，我今天做个总结，目的有二：一是将这些方法记录下来，以便将来需要用到时查找使用。二为将这些大神们智慧的结晶发扬光大，让广大前端程序猿们能够少走弯路。此贴为更新帖，以后若有好的css样式技巧，小哥我会不定期更新。一、块元素水平垂直居中（特别鸣谢：鑫生活。鑫哥出品必属精品！小弟膜拜）对于一个块元素的水平垂直居中，水平居中的方式不必多说，一般用margin:auto;等方法即可实现。而...