Skip to content

{ Category Archives } CSS

内联元素和块状元素,盒子模型

块元素(block element)

address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易,也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
isindex – input prompt
menu – 菜单列表
noframes – frames可选内容, (对于不支持frame的浏览器显示此区块内容)
noscript – 可选脚本内容 (对于不支持script的浏览器显示此内容)
ol – 排序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表

内联元素(inline element)

a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
bdo – bidi override
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
dfn – 定义字段
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
s – 中划线(不推荐)
samp – 定义范例计算机代码
select – 项目选择
small – 小字体文本
span – 常用内联容器,定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线
var – 定义变量

注:内联样式权重高于外部样式。

综上所述,用实例总结一下权重分配:

<style>
span.fColor{ color:black;}
.fColor{ color:yellow;}
.fColor{ color:red !important;}
</style>
<p class="fColor" style="color:blue; color:green !important;">
<strong>颜色测试</strong>
</p>

以上实例中很明显,显示颜色为green,因为这句包含两个权重高的方面color:green !important; 第一,它属于内联样式,就内联本身就排除了blue、green之外的颜色,剩下的两个再看important权限,所以最终显示颜色是green。

CSS选择器执行权重分配如下:

 style="color:green !important;"
 style="color:blue;"
 .fColor{ color:red !important;}
 span.fColor{ color:black;}
 .fColor{ color:yellow;}

盒子模型:
W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域:内容(content)、边框距(padding)、边界(border)和边距(margin)。对于初学者,经常会搞不清楚 margin,background-color,background- image,padding,content,border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图,希望便于你的理解和记忆。

每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充 (padding) ,盒子本身有边框 (border) ,而盒子边框外和其他盒子之间,还有边界 (margin) 。

盒模型的实际宽度

关于盒模型,还有以下几点需要注意:
A. 对于块级元素 (display:block) ,未浮动的垂直相邻元素的上边界和下边界会被压缩,例如:有上下2个元素,上元素的下边界为5px,下面元素的上边界为20px,则实际2个元素的间距为20px (2个边界值中较大的值) 。如图所示:

B. 块级元素 (display: block)
每个块级元素都从一个新行开始,而且其后的元素也需另起一行开始,标题、段落、表格、层、body等都是块级元素。块级元素只能作为其他块级元素的子元素,而且需要一定的条件。

C. 内联元素,例如<a>、<span>等,定义上下边界不会影响到行高 (line-height) ,内联元素距离上一行元素的距离由行高决定,而不是填充或边界。

D. 内联元素 (display:inline)
内联元素不需要在新行内显示,而且也不强迫其后的元素换行,如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。

  

  • 浮动元素 (无论左或者右浮动) 边界不压缩,且若浮动元素不声明宽度,则其宽度趋向于0,即压缩到其内容能承受的最小宽度。
  • 如果盒中没有内容,则即使定义了宽度和高度都为100%,实际上只占0%,因此不会被显示,此点在采取层布局的时候需特别注意。
  • 边界值可为负,其显示效果各浏览器可能不相同。
  • 填充值不可为负。
  • 边框默认的样式 (border-style) 为不显示 (none) 。
  • 补充:
    1. http://hi.baidu.com/sonan/blog/item/229b5f4ee0b3e501b2de05a7.html
    2. http://www.birdol.com/article/566.html
    3. http://www.w3.org/TR/CSS2/box.html

    Tagged

    CSS Sprites技术

    1 关于CSS Sprite

    CSS Sprites技术不新鲜, 早在2004年 CSS Zen Garden 的园主 Dave Shea就在ALA发表对该技术的详细阐述. 原先只在CSS玩家之间作为一种制作方法流传, 后来出来个14 Rules for Faster-Loading Web Sites, 技术人员之间竞相传阅, 其中第一条规则Make Fewer HTTP Requests就提到CSS Sprites. 于是这个就火了起来, 甚至出现了在线生成工具. 近来很多blog都提到CSS Sprites, 最著名的例子莫过于 http://www.google.co.kr/下方的那几个动画. 最新发布的YUI中, 也是使用到CSS Sprites, 几乎都有的CSS装饰图都被一个40×2000的图包办. 社交大站Facebook最近也使用了一个22×1150的图片承担了所有icon. 一时间, CSS Sprites无处不在.

    CSS Sprites是一种网页图片应用处理方式. 它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去, 这样一来, 当访问该页面时, 载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 对于当前网络流行的速度而言, 不高于200KB的单张图片的所需载入时间基本是差不多的, 所以无需顾忌这个问题.

    按照yahoo的rules for high performance web sites的原则, 应当较少Client与Server端间的HTTP Request次数. 通过CSS Sprites方法将多张图片组装成单独的一张图片, 可以有效减少HTTP请求 的次数.
    当整幅图片载入完成后, 就可以使用CSS方法通过设置背景位置的方式完成所需图片的准确调用.

    2 CSS Sprite的使用

    有几篇关于CSS Sprites的文章

    3 CSS Sprite的例子

    [原文:http://blog.rexsong.com/?p=746#comments]
    A. 图片限制(Image Slicing)
    典型如文本编辑器, 小图标特别多, 打开时一张张跑出来, 给用户的感觉很不好. 如果能用一张图解决, 则不会有这个问题, 比如百度空间、163博客、Gmail都是这么做的.

    Image Slicing’s Kiss of Death
    http://www.alistapart.com/articles/sprites
    B. 单图转滚(Single-image Rollovers)
    触发切换图片的需求, 传统方案得重新请求新图片, 因为网络问题经常造成停留或等待. 如果能把多种状态合并成一张图, 就能完美解决, 然后再使用背景图技术模拟动态效果.

    ColorScheme Ratings
    http://demo.rexsong.com/200608/colorscheme_ratings/
    C. 延长背景(Extend Background Image)
    如果图片的某边可以背景平铺无限延长, 则不需要每个角、每条边单独搞出来, 图片能少一个就少一个. 其实, 这个理论还可以扩展到四角容器里, 好处是能大大简化HTML Structure.

    Extend Background Image
    http://demo.rexsong.com/200705/extend_background_image/
    D. 综合案例
    Google Korea (1和2技巧
    http://demo.rexsong.com/200705/google_korea/


    E. CSS Menus (2和3技巧)
    http://demo.rexsong.com/200705/css_background_menus/

    4 CSS Sprites的问题

    由于IE6存在的background的flicker问题IE6/Win, background image on <a>, cache=‘check every visit’: flicker!, 有人针对此问题提出了解决方案Fast Rollovers Without Preload
    关于IE6的flicker问题, fivesevensix.com上有一篇很不错的研究文章Minimize Flickering CSS Background Images in IE6
    另外:brunildo.orgCSS tests and experiments是关于css各种功能不错的参考手册和测试工具.

    5 相关资源
    Tagged

    CSS Zen Garden

    CSS Zen Garden
    CSS设计者们休憩领地~

    Tagged

    固定位置CSS

    TOP:

    .toolbar{
        position:fixed;
        z-index:50;
        top:0px;
        left:0;
        width:100%;
        _top:expression(offsetParent.scrollTop);
        _position:absolute;
    }
    

    BOTTOM:

    #bottombar {
        position:fixed;
        bottom:0;
        z-index:50;
        _position: absolute;
        _bottom: auto;
        _clear: both;
    	_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) - 6: document.body.scrollTop+(document.body.clientHeight-this.clientHeight) - 6);
    
    Tagged

    网页中的CSS滤镜使用详解

    语法: STYLE="filter:filtername(fparameter1, fparameter2...)"

    • Filtername 滤镜的名称
    • fparameter1, fparameter2… 滤镜的参数

    滤镜说明

    • alpha 设置透明层次
    • blur 创建高速度移动效果, 即模糊效果
    • chroma 制作专用颜色透明
    • DropShadow 创建对象的固定影子
    • FlipH 创建水平镜像图片
    • FlipV 创建垂直镜像图片
    • glow 加光辉在附近对象的边外
    • gray 把图片灰度化
    • invert 反色
    • light 创建光源在对象上
    • mask 创建透明掩膜在对象上
    • shadow 创建偏移固定影子
    • wave 波纹效果
    • Xray 使对象变得像被x光照射一样
    滤镜 Alpha

    STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY=finishY)"
    说明:

    • Opacity 起始取值为0~100, 0 为透明, 100 为原图.
    • FinishOpacity 目标值.
    • Style 1 或 2 或 3
    • StartX 任意值
    • StartY 任意值
    filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
    
    滤镜 blur

    STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
    说明:

    • Add 一般为1, 或0.
    • Direction 角度, 0~315度, 步长为45度.
    • Strength 效果增长的数值, 一般5即可.
    filter:Blur(Add="1",Direction="45",Strength="5")
    
    滤镜 Chroma

    STYLE="filter:Chroma(Color = color)"
    说明:

    • color #rrggbb格式, 任意.
    filter:Chroma(Color="#FFFFFF")
    
    滤镜 DropShadow

    STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
    说明:

    • Color #rrggbb格式, 任意.
    • Offx X轴偏离值.
    • Offy Y轴偏离值.
    • Positive 1或0.
    filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
    
    滤镜 FlipH

    STYLE="filter:FlipH"

    filter:FlipH
    
    滤镜 FlipV

    STYLE="filter:FlipV"

    filter:FlipV
    
    滤镜 glow

    STYLE="filter:Glow(Color=color, Strength=strength)"
    说明:

    • Color 发光颜色.
    • Strength 强度(0-100)
    filter:Glow(Color="#6699CC",Strength="5")
    
    滤镜 gray

    STYLE="filter:Gray"

    filter:Gray
    
    滤镜 invert

    STYLE="filter:Invert"

    filter:Invert
    
    滤镜 mask

    STYLE="filter:Mask(Color=color)"

    filter:Mask (Color="#FFFFE0")
    
    滤镜 shadow

    filter:Shadow(Color=color, Direction=direction)
    说明:

    • Color #rrggbb格式.
    • Direction 角度, 0-315度, 步长为45度.
    filter:Shadow (Color="#6699CC", Direction="135")
    
    滤镜 wave

    filter: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength)
    说明:

    • Add 一般为1, 或0.
    • Freq 变形值.
    • LightStrength 变形百分比.
    • Phase 角度变形百分比.
    • Strength 变形强度.
    filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
    
    滤镜 Xray

    STYLE="filter:Xray"

    filter:Xray
    
    Tagged

    IE与FireFox的js和css 区别

    firefox 不能对 innerText 支持
    firefox 支持 innerHTML 但却不支持 innerText ,它支持 textContent 来实现 innerText,不过默认把多余的空格也保留了。如果不用 textContent,如果字符串里面不包含 HTML 代码也可以用 innerHTML 代替。

    禁止选取网页内容
    在 IE 中一般用 JS:obj.onselectstart = function(){return false;}
    firefox 用 CSS: -moz-user-select:none

    滤镜的支持(例:透明滤镜)
    IE:filter:alpha(opacity=10);
    firefox 3.0:-moz-opacity:.10;

    捕获事件
    IE:obj.setCapture()obj.releaseCapture()
    Firefox:document.addEventListener("mousemove",mousemovefunction,true);, document.removeEventListener("mousemove",mousemovefunction,true);

    获取鼠标位置
    IE:event.clientX, event.clientY
    firefox:需要事件函数传递事件对象 obj.onmousemove=function(ev){ X= ev.pageX;Y=ev.pageY;}

    DIV 等元素的边界问题
    比如:设置一个div的CSS: {width:100px;height:100px;border:#000000 1px solid;}
    IE中:div的宽度(包括边框宽度):100px,div的高度(包括边框宽度):100px;
    firefox:div的宽度(包括边框宽度):102px,div的高度(包括边框宽度):102px;

    判断浏览器类型
    var isIE=document.all ? true : false; 如果支持 document.all 语法那么 isIE=true,否则 isIE=false

    在不同浏览器下的CSS处理
    一般可以用!important来优先使用css语句(仅firefox支持)
    eg: {border-width:0px!important;border-width:1px;}, 在 firefox 下这个元素是没有边框的,在 IE 下边框宽度是 1px。

    document.formName.item(“itemName”) 问题
    IE下,可以使用 document.formName.item("itemName")document.formName.elements["elementName"]
    Firefox下,只能使用 document.formName.elements["elementName"]

    集合类对象问题
    IE下,可以使用 () 或 [] 获取集合类对象;
    Firefox下,只能使用 [] 获取集合类对象。

    自定义属性问题
    IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute() 获取自定义属性;
    Firefox下,只能使用 getAttribute() 获取自定义属性。

    eval(“idName”)问题
    IE下,可以使用 eval(“idName”) 或 getElementById(“idName”) 来取得 id 为 idName 的HTML对象;
    Firefox下,只能使用 getElementById(“idName”) 来取得 id 为 idName 的HTML对象。

    变量名与某 HTML 对象 ID 相同的问题
    IE下,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用,
    Firefox下则不能;Firefox下,可以使用与 HTML 对象 ID 相同的变量名,IE下则不能。

    const 问题
    Firefox 下,可以使用 const 关键字或 var 关键字来定义常量;
    IE下,只能使用 var 关键字来定义常量。

    input.type 属性问题
    IE下 input.type 属性为只读;
    Firefox 下 input.type 属性为读写。

    window.event 问题
    window.event 只能在 IE 下运行,而不能在 Firefox 下运行,这是因为 Firefox 的 event 只能在事件发生的现场使用。

    event.x 与 event.y 问题
    IE下,event 对象有 x、y 属性,但是没有 pageX、pageY 属性;
    Firefox下,event 对象有pageX、pageY属性,但是没有x、y属性。
    兼容处理:var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;

    event.srcElement 问题
    问题说明:IE下,event 对象有 srcElement 属性,但是没有 target 属性;Firefox 下,even对象有 target 属性,但是没有 srcElement 属性。
    兼容处理:srcObj = event.srcElement ? event.srcElement : event.target;

    模态和非模态窗口问题
    IE下,可以通过 showModalDialogshowModelessDialog 打开模态和非模态窗口;Firefox下则不能。
    兼容处理:直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用 window.opener来访问父窗口。如果需要父窗口控制子窗口的话,使用 var subWindow = window.open(pageURL,name,parameters); 来获得新开的窗口对象。

    frame 和 iframe 问题
    以下面的 frame 为例:<frame src="xxx.html" id="frameId" name="frameName" />
    1 访问frame对象
    IE:使用 window.frameId 或者 window.frameName 来访问这个frame对象;
    Firefox:使用window.frameName来访问这个frame对象;
    兼容处理:统一使用 window.document.getElementById(“frameId”) 来访问这个 frame 对象;
    2 切换 frame 内容
    在 IE 和 Firefox 中都可以使用 window.document.getElementById(“frameId”).src = “xxx.html” 或 window.frameName.location = “xxx.html” 来切换 frame 的内容;
    如果需要将 frame 中的参数传回父窗口,可以在 frame 中使用 parent 关键字来访问父窗口。

    事件委托方法
    问题说明:IE下,使用 document.body.onload = inject; 其中 function inject()在这之前已被实现;在Firefox下,使用 document.body.onload = inject();
    兼容处理:统一使用 document.body.onload=new Function("inject()");或者 document.body.onload = function() { /* 这里是代码 */}
    [Function和function的区别]

    访问的父元素的区别
    在 IE 下,使用 obj.parentElementobj.parentNode 访问 obj 的父结点;
    firefox 下,使用 obj.parentNode 访问 obj 的父结点。

    对象宽高赋值问题
    FireFox 中类似 obj.style.height = imgObj.height 的语句无效。
    兼容处理:统一使用 obj.style.height = imgObj.height + “px";

    CSS圆角问题
    IE:IE7 以下版本不支持圆角。
    FF:-moz-border-radius:4px;,或者 -moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;

    Tagged

    CSS中的透明度属性

    Firefox3.5已不支持私有属性-moz-opacity了,在Mozilla 1.7 (Firefox 0.9)之前FF都是使用这个私有属性的,Firefox 0.9-Firefox3同时支持-moz-opacity和opacity这两个属性,Firefox升级到3.5之后,一些网站原来有的透明没有了,呵呵。

    除了IE之外,目前主流浏览器, Opera 9.0及更高版本,Safari 1.2(WebKit 125) 及更高版本,chrome等等都支持opacity这个设置透明度的属性,opacity的属性值是0 < number <1的数值,默认值是1。

    例如50%透明的类:.example { opacity: 0.5;}

    IE的透明度的属性从IE4-IE8使用filter: alpha(opacity=number),这里的number是0-100之间的整数数值,IE8中我们也可以用-ms-filter: "alpha(opacity=number)"。IE中还支持 progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)这种写法,但是不建议使用。

    所以我们可以这样写透明度类:

    .example { /* make the box translucent (80% opaque) */
       opacity: 0.8;                    /* Firefox, Safari(WebKit), Opera */
       -ms-filter: “alpha(opacity=80)”; /* IE 8 */
       filter: alpha(opacity=80);       /* IE 4-7 */
       zoom: 1;/* set “zoom”, “width” or “height” to trigger “hasLayout” in IE 7 and lower */
    }
    

    这些可以参照:https://developer.mozilla.org/En/CSS:-moz-opacity

    当然我们还会用js来设置元素的透明度,例如:

    var el=document.getElementById("mybox");
    el.style.opacity=50/100; //这里写出50/100主要是为了和ie的写法统一,便于一参数形式传入
    el.style.filter='Alpha(Opacity=50)';
    

    这里要说的是,Firefox3.5在css上已不支持私有属性-moz-opacity了,但是js中的el.style.MozOpacity=val/100;还是被Firefox3.5支持的,但是我不建议使用,因为这是ff的私有的,其他浏览器不支持。

    前两天,开发中显示图片时,需要条件将图片灰度显示
    找了好久,就是没找到FF下可以解决的方法
    之后,看到了这篇文章,讲述的很是全面
    于是,转载了过来

    Tagged , ,

    overflow:hidden

    很久以来
    一直都对于overflow的用法很是模糊
    也曾多次看过手册
    却总是不太明白
    昨日真真切切的感受了一回~
    原来overflow 为hidden时是不显示超过对象尺寸的内容
    ….

    Tagged

    pre 设置自动换行

    pre {
     white-space: pre-wrap;       /* css-3 */
     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
     white-space: -pre-wrap;      /* Opera 4-6 */
     white-space: -o-pre-wrap;    /* Opera 7 */
     word-wrap: break-word;       /* Internet Explorer 5.5+ */
    }
    
    Tagged , ,

    清除浮动

    <ul>
      <li>
        <p>test1</p>
        <p>test2</p>
      </li>
      <li>
        <p>test1</p>
        <p>test2</p>
      </li>
      <li>
        <p>test1</p>
        <p>test2</p>
      </li>
        ...
      <br clear="all" />
    </ul>
    

    ao
    又是该死的 IE 问题
    用 AJAX 返回的数据生成的用 UI/LI 结构的表格形式的代码
    总是无法清除浮动
    调试了N久后
    才想到把页面最后生成的代码 alert出来
    仔细一看才知道
    本是在后面清楚浮动<br clear="all" />的却跑到前面去了
    原来用 $("ul li:last").after(tmp) 增加的 HTML code 是加到 br 之后的~
    为了通用
    只能是判断浏览器
    IE的话需再加上如下

    $("ul li:last").append("<br clear="all" />");
    
    Tagged