CSS样式表2 深入理解盒子模型

CSS样式表第六章2深入理解盒子模型（上）什么是“模型”——本质特征的抽象布局的“模型”3深入理解盒子模型什么是“模型”——本质特征的抽象布局的“模型”contentpadding-toppadding-bottompadding-leftpadding-rightmargin-topborder-bottommargin-rightmargin-leftborder-rightborder-topborder-leftmargin-bottomwidthheight4深入理解盒子模型div{border-width:6px;border-color:#000000;margin:20px;padding:5px;background-color:#FFFFCC;}5深入理解盒子模型属性值的简写形式•方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。6深入理解盒子模型属性值的简写形式border-color:redgreenborder-width:1px2px3px;border-style:dotteddashedsoliddouble;7深入理解盒子模型内边距（padding）#outerBox{width:128px;height:128px;padding:20px20px10px;/*上左右下*/padding-left:10px;border:10pxgraydashed;}8深入理解盒子模型外边距（margin）#outerBox{width:128px;height:128px;padding:20px20px10px;/*上左右下*/padding-left:10px;border:10pxgraydashed;}body{border:1pxblacksolid;background:#cc0;}9深入理解盒子模型（下）HTML与DOMhtmlheadbodytitleh1pullipliulolullilililililililili10深入理解盒子模型（下）标准文档流11深入理解盒子模型（下）div标记与span标记div：块级元素（block）span：行内元素（inline）12深入理解盒子模型（下）盒子在标准流中的定位原则实验1——行内元素之间的水平marginspan.left{margin-right:30px;background-color:#a9d6ff;}span.right{margin-left:40px;background-color:#eeb0b0;}span2span1margin-rightmargin-left13深入理解盒子模型（下）盒子在标准流中的定位原则实验2——块级元素之间的竖直marginbodydivstyle=margin-bottom:50px;块元素1/divdivstyle=margin-top:30px;块元素2/div/body块元素1块元素2块元素1块元素2margin-bottom:50pxmargin-top:30pxmargin-bottom:50px14深入理解盒子模型（下）盒子在标准流中的定位原则实验3——嵌套盒子之间的margin15深入理解盒子模型（下）bodyulli第1个列表的第1个目内容/liliclass=withborder第1个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。/li/ululli第2个列表的第1个项目内容/liliclass=withborder第2个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。/li/ul/bodyCSS中的几何题ul{background:#ddd;margin:15px15px15px15px;padding:5px5px5px5px;}li{color:black;background:#aaamargin:20px20px20px20px;padding:10px0px10px10px;list-style:none}li.withborder{border-style:dashed;border-width:5px;border-color:black;margin-top:20px；}16深入理解盒子模型（下）CSS中的几何题