块元素(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 promptmenu - 菜单列表noframes - frames可选内容， (对于不支持frame的浏览器显示此区块内容)noscript - 可选脚本内容 (对于不支持script的浏览器显示此内容) ol - 排序表单p - 段落pre - 格式化文本table - 表格ul - 非排序列表内联元素(inline element)
a - 锚点abbr - 缩写acronym - 首字b - 粗体(不推荐)bdo - bidi overridebig - 大字体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 - 定义变量注：内联样式权重高于外部样式。
综上所述，用实例总结一下权重分配：
[css]
<style>
span.fColor{ color:black;}
.fColor{ color:yellow;}
.fColor{ color:red !important;}
</style>
[/css]
[css]
<p class="fColor" style="color:blue; color:green !important;">
<strong>颜色测试</strong>
</p>
[/css]
以上实例中很明显，显示颜色为green，因为这句包含两个权重高的方面
color:green !important; 第一，它属于内联样式，就内联本身就排除了blue、green之外的颜色，剩下的两个再看important权限，所以最终显示颜色是green。CSS选择器执行权重分配如下：
[text]
style="color:green !important;"
style="color:blue;"
.fColor{ color:red !important;}
span.fColor{ color:black;}
.fColor{ color:yellow;}
[/text]
盒子模型：
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等都为内联元素。内联元素可以为任何其他元素的子元素。
没有评论 :
发表评论