Skip to content

{ Tag 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

    Also 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 相关资源
    Also tagged

    CSS Zen Garden

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

    Also 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);
    
    Also 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
    
    Also 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下可以解决的方法
    之后,看到了这篇文章,讲述的很是全面
    于是,转载了过来

    Also tagged ,

    仿select 下拉列表

    CSS 代码

    body{ font-size: 12px;}
    .c_dropdown{float:left;text-align:left;}
    .button_style{
        width: 125px;
        border:1px solid #43d227;
        padding:0 15px 0 0;
        height:26px;
        color:#146a00;
        line-height:24px;
        text-align:left;
        cursor:pointer
    }
    
    *.button_style{_line-height:20px;}
    
    .c_dropdown ul{
        display:block;
        position:absolute;
        left:0;
        z-index:9999;
        border:1px solid #43d227;
        margin:0;
        padding:0;
        height:auto;
        width:140px;
        background:#fff;
        text-align:left;
        list-style:none;
        top:-1px;
    }
    .c_dropdown ul li {
        overflow:hidden;
        margin:1px 0;
        display:block;
        height:28px;
        margin:0;
        color:#666;
        line-height:28px;
        text-decoration:none;
        text-indent:3px;
        border-bottom:1px solid #e7e7e7;
    }
    *.c_dropdown ul li {*line-height:26px;*overflow:hidden}
    .c_dropdown ul li a:hover{color:#fff;background:#666}
    .c_dropdown .c_dropdown_current a{color:#146a00}
    .active {color: #FF0000;}
    

    JS 代码

    var checkdown_list;
    var show_dropdown = false;
    $(function() {
      $("#dropdown").click(function(event) {
        if (show_dropdown) {
          hide();
        } else {
          show();
          event.stopPropagation();
        }
      }).focus(function() {
        checkdown_list = true;
      });
    
        $('#dropdown_list li').click(function(event){
           checkdown_list = true;
           event.stopPropagation();
        });
    });
    
    function show(obj) {
        if (null != checkdown_list) {
            hide();
        }
        show_dropdown = true;
        $("#dropdown_list").show();
        $(document).bind("click", hide);
        $('#dropdown').trigger('focus');
    }
    
    function hide(obj) {
        if (checkdown_list != null &amp;&amp; show_dropdown) {
            $("#dropdown_list").hide();
            $('#dropdown').toggleClass('active');
            $(document).unbind("click", hide);
            checkdown_list = null;
            show_dropdown = false;
        }
    }
    

    HTML 代码

    <div class="c_dropdown">
    <div id="dropdown" class="button_style"><span id="selected_bifg_id_10">未分组</span></div>
    <div style="position: relative; height: 0px; z-index: 9999;">
    <ul id="dropdown_list" class="checkList" style="display:none;">
    	<li><span><input id="multi_friend_1" name="fs_checkbox" type="checkbox" />朋友</span></li>
    	<li>
          <span><input id="multi_friend_2" name="fs_checkbox" type="checkbox" />同学</span></li>
    	<li><span><input type="text" value="新建分组" /></span></li>
    </ul>
    </div>
    </div>
    

    demo: 仿select 下拉列表demo

    Also 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" />");
    
    Also tagged

    CSS 浮动清理

    在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理:<div style=”clear:both;”></div>。
    例如:
    <div style=”background:#666;”> <!– float container –>
    <div style=”float:left; width:30%; height:40px;background:#EEE; “>Some Content</div>
    </div>
    此时预览此代码,我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动,而脱离了文档流,导致父元素的height为零。
    若将代码修改为:
    <div style=”background:#666;”> <!– float container –>
    <div style=”float:left; width:30%; height:40px;background:#EEE; “>Some Content</div>
    <div style=”clear:both”></div>
    </div>
    注意,多了一段清理浮动的代码。这是一种好的CSS代码习惯,但是这种方法增加了无用的元素。这里有一种更好的方法,将HTML代码修改为:
    <div class=”clearfix” style=”background:#666;”> <!– float container –>
    <div style=”float:left; width:30%; height:40px;background:#EEE; “>Some Content</div>
    </div>
    定义CSS类,进行“浮动清理”的控制:
    .clearfix:after {
    content: “.”;
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
    } /* 这是对Firefox进行的处理,因为Firefox支持生成元素,而IE所有版本都不支持生成元素 */
    .clearfix {
    display: inline-block;
    } /* 这是对 Mac 上的IE浏览器进行的处理 */
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;} /* 这是对 win 上的IE浏览器进行的处理 */
    .clearfix {display: block;} /* 这是对display: inline-block;进行的修改,重置为区块元素*/
    /* End hide from IE-mac */

    Also tagged