Java web开发 1.2 CSS技术 13.CSS盒子模型.pptVIP

trouble * * 1是margin 26是border35是padding 4是content的width 7可能是margin也可能就是空白 * * DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织(OMG)的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。 XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。 * * * * 盒子模型进阶 标准文档流：CSS所规定的块级元素和行内元素的默认排列方式。-- div：块级元素 （block） 在新行上开始，盒子模型可以设置 div,p,form,ul,ol,li, dd,dt,dl -- span：行内元素（inline） span,h1,input,a,img, strong,em,lable 盒子模型进阶 display主要属性取值: display:属性; 盒子模型进阶 style a,li{ background-color:yellow; font-size:16px; width:200px; height:40px; text-align:center; padding:15px; margin:20px; } /style 盒子在标准流中的定位原则 margin中的负值 span.left{ margin-right:30px; background-color:#a9d6ff; } span.right{ margin-left:-53px; /* 设置为负数 */ background-color:#eeb0b0; } 盒子在标准流中的定位原则 ·行内元素之间的水平margin span.left{ margin-right:30px; background-color:#a9d6ff; } span.right{ margin-left:40px; background-color:#eeb0b0; } span 2 span 1 margin-right margin-left 盒子在标准流中的定位原则 块级元素之间的竖直margin body div style=margin-bottom:50px;块元素1/div div style=margin-top:30px;块元素2/div /body 注：塌陷现象 块元素1 块元素2 块元素1 块元素2 margin-bottom:50px margin-top:30px margin-bottom:50px 盒子的浮动 float属性 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 盒子的浮动 盒子的浮动 实验1——设置第1个浮动的div .box1{ float:left} 实验2——设置第2个浮动的div 盒子的浮动 实验3——设置第3个浮动的div 盒子的浮动 实验4——改变浮动的方向 .box1{ float:left} .box2{ float:right} 盒子的浮动 实验5——再次改变浮动的方向 .box1{ float:left} .box2{ float:right} 盒子的浮动 实验6——使用clear属性清除浮动的影响 盒子的浮动 实验6——使用clear属性清除浮动的影响 盒子的浮动 style type=text/css img{float:left; clear:both; } /style img src =“image/smile.jpg img src=“image/smile.jpg 盒子的浮动 语法 clear:属性 Clear取值属性 本节目标 代码： .outter {border: 1px solid black; background: grey; padding: 10px; width: 580px; height: 220px;} div {border:8px solid