做国外营销型网站设计,东莞市有几个区,wordpress表白墙,美仑-专门做服装的网站一、理解多个盒子模型之间的相互关系 现在大部分的网页都是很复杂的#xff0c;原因是一个“给人用的”网页中是可能存在着大量的盒子#xff0c;并且它们以各种关系相互影响着。 html与DOM的关系 详情了解“DOM” #xff1a;http://baike.baidu.com/link?urlSeSj8sRDE-JZ… 一、理解多个盒子模型之间的相互关系 现在大部分的网页都是很复杂的原因是一个“给人用的”网页中是可能存在着大量的盒子并且它们以各种关系相互影响着。 html与DOM的关系 详情了解“DOM” http://baike.baidu.com/link?urlSeSj8sRDE-JZnTdkIQgh-P2nEMvoYdvis19aXaGJrMVCQCV_r3mA1kJ7vaCam4wpPLAsQ9T3WyhRfbP4Bdi6yrZolr5_bf7sLtTeFOWDMBu DOM 是 Document Object Model文档对象模型的缩写。“一个网页的所有元素组织在一起就构成一颗DOM树。” HTML DOM 节点树 HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树 htmlheadtitleDOM树与盒子模型的关系/title/headbodyh1DOM树/h1
a href****DOM树结构关系/a/body/html 上图是把一个html文档的内容组织起来形成了严格的层次结构。 上面所有的节点彼此间都存在关系。 除文档节点之外的每个节点都有父节点。举例head 和 body 的父节点是 html 节点文本节点 DOM树结构关系 的父节点是 a 节点。大部分元素节点都有子节点。 比方说head 节点有一个子节点title 节点。title 节点也有一个子节点文本节点 DOM树与盒子模型的关系。 当节点分享同一个父节点时它们就是同辈同级节点。比方说h1 和 a是同辈因为它们的父节点均是 body 节点。 节点也可以拥有后代后代指某个节点的所有子节点或者这些子节点的子节点以此类推。比方说所有的文本节点都是 html节点的后代而第一个文本节点是 head 节点的后代。 节点也可以拥有先辈。先辈是某个节点的父节点或者父节点的父节点以此类推。比方说所有的文本节点都可把 html 节点作为先辈节点。 标准文档流Normal Document Stream,简称标准流。 标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时各种元素的排列规则。 HTML文档中的元素可以分为两大类行内元素和块级元素。 1、行内元素不占据单独的空间依附于块级元素行内元素没有自己的区域。它同样是DOM树中的一个节点在这一点上行内元素和块级元素是没有区别的。 比如span与/span、strong与/strong标记 2、块级元素 总是以块的形式表现出来并且跟同级的兄弟块依次竖直排列左右自动伸展直到包含它的元素的边界在水平方向不能并排。比如div与/div标记 3、标准流就是css规定的默认的块级元素和行内元素的排列方式在用css排版的页面中经常使用到span和div标记利用这俩个标记加上css对其样式的控制可以很方便地实现各种效果。 span标记与div标记都是视作为容器标记而被广泛应用在html语言中。 span标记与div标记的区别在于: div是一个块级元素可以包含段落、标题、表格乃至诸如章节、摘要和备注等div包围的元素会自动换行。 而span是一个行内元素在SPAN 的前后是不会换行的它没有结构的意义纯粹是应用样式当其他行内元素都不合适时可以使用SPAN。 代码
!doctype html
html headmeta http-equivContent-Type contenttext/html; charsetUTF-8 /titlediv与span的区别/title/headbodypdiv标记自动换行/pdiv 第一章/divdiv 第二章/divdiv 第三章/divpspan标记同一行/pspan 第四章/spanspan 第五章/spanspan 第六章/spanhr/pdiv标记自动换行/pdiv img srcapple.jpg/divdiv img srcapple.jpg/divdiv img srcapple.jpg/divpspan标记同一行/pspan img srcapple.jpg/spanspan img srcapple.jpg/spanspan img srcapple.jpg/span/body 效果图 4、盒子在标准流中的定位原则若想精确地控制盒子的位置那么必须深入了解margin元素margin元素是用于调整不同盒子之间的位置关系。 1、行内元素之间的水平margin当两个行内元素紧邻时他们之间的距离是第一个行内元素的margin-right加上第二个行内元素的margin-left。 代码 !doctype html
htmlheadmeta http-equivContent-Type contenttext/html; charsetUTF-8 /title两个行内元素的margin/titlestyle typetext/cssspan{background-color:red;text-align:center;font-family:Arial,宋体 ;font-size:18px;padding:14px;}span.left{margin-right:25px;background-color:green;}span.right{margin-left:35px;background-color:yellow;}
/style/headbodyspan classleft行内元素1/spanspan classright行内元素2/span/body
/html 效果图 2、块级元素之间的竖直margin两个元素的之间的距离不是margin-bottom加margin-top的总和而是两者中的较大者。代码 !doctype html
html langenheadmeta http-equivContent-Type contenttext/html; charsetUTF-8 /title两个块级元素之间的竖直margin/titlestyle typetext/cssdiv{background-color:red;text-align:left;font-family:Arial,sans-serif ;font-size:12px;padding:10px;}/style/headbodydiv stylemargin-bottom:40px;第一个块级元素/divdiv stylemargin-top:20px;第二个块元素/div/body
/html 效果图 3、嵌套盒子之间的margin 当一个div块包含在另一个div块中时便形成了典型的父子关系。其中儿子块的margin将以父块的内容为参考。 在标准流中一个块级元素的盒子水平方向的宽度会自动延伸直至上一级盒子的限制位置。 案例 !doctype html
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8 /
title父子块的margin/title
style typetext/css
div.father{background-color:red;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;padding:20px;border:1px solid green;}
div.son{background-color:gray;margin-top:30px;padding:15px;border:1px dashed #000000;
}
/style
/head
body
div classfather
div classson子div/div
/div
/body
/html 效果图 以上第二节所介绍的是标准流中的盒子排列方式。以上内容部分来自http//www.artech.cn。 转载于:https://www.cnblogs.com/KTV123/p/5516677.html
