您的位置：首页 > Web前端 > CSS

HTML与XHTML的表里关系，还有跟CSS的主与副关系

2014-05-27 19:54 267 查看

NanShan 小编在这几天的重新复习HTML的相关知识时发现，回头重新学习跟初学的想法是完全不同的，所能理解的东西也大不相同。

HTML与XHTML（the extensible hypertext markup language）均是设计网页的标准语言。XHTML是在HTML基础上结合了部分XML的强大功能，而创建的一种语言。是HTML到XML过渡的一种语言。目前XHTML与HTML相同，标签都是规定好的。在此就不详细分类XHTML与HTML。

1.元素分类：

块级元素：display:block

内联元素：display:inline

列表项元素：display:list-item

隐藏元素：display:none

2.常用元素：

布局元素：div span

文本元素：h1~h6标签，p

列表元素：ul和li；ol和li；dl、dt和dd

图像元素：img (src属性)

表格元素：table，tr，td

表单元素：form，label

a元素：href

CSS

1.盒模型

盒子的总宽度是:margin-left+border-left+padding-left+width+padding-right+border-right+margin-right

盒子总高度是:margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom

（1）外边距为负值时，会导致和其他元素重合

（2）当div块处于float状态时，IE6以下的版本可能会有水平外边距加倍的情况出现，修改时，在其div块处添加display:inline,即强制元素作为内嵌对象呈递。

（3）垂直间距的特殊性，边界重叠只发生在“块级元素”上，而且只有垂直相邻的元素才会发生重叠。垂直相邻的两个元素在相邻的外边界不相等的情况下，通常取较大的外边距参加运算。但是浮动元素垂直相邻的外边距不重叠。

（4）CSS网站布局：流动布局，浮动布局，定位布局

流动布局：网页的默认规则

浮动布局：用的最多的一种布局方式，当然也是问题出现最多的。当设置为浮动时，他就跳出了文档流。并且只在包含它的元素内进行浮动。

定位布局：可以精确地控制元素位置，而且元素之间可以进行重叠。通过position属性进行定位，通常有四种取值：static(默认)，absolute，fixed，relative

absolute（绝对定位）：通过该元素的包含块的内边框到此元素的外边距的垂直距离，即边距。跳出默认的文档流，按照自己的显示规则进行显示。如果没有设置上下左右值，设置绝对定位是没有任何效果的。

relative(相对定位)：与绝对定位相比，有更大的灵活性，它的定位参照是该元素在文档流中的原位置，而绝对定位则是以其包含块为参照物的。所以相对定位兼顾流动布局和绝对定位的优点。相对定位并没有完全跳出文档流，所以其在文档流中的原位置不会变。在文档流中还会保留其位置。

元素层叠次序：当元素发生重叠时，就出现层叠的问题，层叠通过z-index来设定。在设置position时就设定z-index，元素间根据z-index的值进行大小排序，最大的在最顶层，最小的在最底层，依次类推。在IE6及以下版本的浏览器中，如果元素不是同一个父元素，z-index设置无效。

（5）内联元素：若要定义宽、高时必须将其display设置为block，将其以块状显示。

（6）浮动元素的嵌套：当不设置父元素的大小时，父元素的大小根据子元素的大小而改变

当浮动元素嵌套到流动布局的元素中，需要添加一个子元素来使其根据子元素的大小来调整。

display, 标签, 模型, 网页, 元素

邀请

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html link word 全文检索 css

相关文章推荐

新的分享

章节导航