技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> 内联元素和块状元素,盒子模型

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

浏览:2998次  出处信息

    块元素(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. 内联元素,例如等,定义上下边界不会影响到行高(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

建议继续学习:

  1. IE 6与W3C盒子模型    (阅读:2164)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1