CSS盒子模型与浮动讲解

CSS盒子模型与定位主讲教师：李勤实数字媒体技术系主要内容123知识回顾CSS盒子模型4CSS网页布局与定位总结知识回顾1什么是CSS？CSS（CascadingStyleSheets）：层叠样式表，一种定义样式的语言，用于描述如何格式化和显示网页中的信息。真正的表现与内容完全分离，代码可读性强，样式可重复应用2CSS基本语法CSS规则：选择器{属性1：属性值1;...;属性n：属性值n;}CSS选择器：基本选择器（标签、类和ID）复合选择器（交集、并集、后代、伪类等等）CSS的盒子模型为什么叫盒子？一切皆为盒子0CSS的盒子模型盒子模型是CSS的基石之一，它指定元素如何显示以及盒子之间的关系。页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。Web标准的核心—内容与表现分离。CSS的盒子模型CSS的盒子模型每个HTML元素都可以看作是一个装了东西的盒子盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin),如图所示默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子contentpadding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheightCSS的盒子模型•尺寸计算：盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸一个div的边框为3px，内边距为2px，右外边距为10px，往它的内部插入一张宽度为120px的图片，该div的宽度是多少？div宽度=2xborder+2xpadding+margin+图片宽度=140px盒子模型尺寸#MyBox{margin:10px;padding:2px;border:dotted;border-width:3px;border-color:#0F0;width:120px;//内容的宽度}对盒子模型的思考边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的，我们只能看到他们对元素的影响盒子模型中只能设置两类颜色，即边框颜色和背景颜色盒子模型可设置三类距离，即外边界距离margin，内填充距离padding和边框值border•CSS中，存在3种的定位机制：标准文档流（Normalflow）浮动（Floats）绝对定位（Absolutepositioning）CSS中的定位机制•特点从上到下，从左到右，输出文档内容由块级元素和行级元素组成标准文档流块元素从左到右撑满页面，独占一行；触碰到页面边缘时，会自动换行总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非用width设定宽度；div,p,h1,form,ul和li是块元素的例子。行级元素(inline)和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变；span,a,label,input,img,strong和em是inline元素的例子；块级元素和行级元素都是盒子模型；标准流下的盒子排列分析styletype=text/css*{border:2pxdashed#FF0066;padding:10px;margin:2px;}body{border:2pxsolidblue;}a{border:2pxdottedblue;}/stylehtmlbodydiv网页的banner（块级元素）/divahref=#行内元素1/aahref=#行内2/aahref=#行内3/adiv这是无名块p这是盒子中的盒子/p/div/body/html标准流下定位的应用#nava{font-size:14px;color:#333333;text-decoration:none;background-color:#CCCCCC;display:block;width:140px;padding:6px10px4px;border:1pxsolid#000000;margin:2px;}#nava:hover{color:#FFFFFF;background-color:#666666;}•3个属性值left—左浮动right—右浮动none—不浮动•特点：•浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。•由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。浮动（float属性）元素浮动Float属性•常见问题父元素高度无法自动扩展元素上移，填满浮动元素右侧（或中间）的间隙浮动元素对相邻元素的影响，会导致页面布局混乱浮动导致问题•清除浮动的常用方法clear属性—常用clear:both;同时设置width:100%(或固定宽度)+overflow:hidden;对受到浮动影响的元素来设置清除浮动；清除浮动清除浮动•浮动布局是网页布局最常见的方式之一横向两列布局横向三列布局布局实例：横向两列布局小结1．Css盒子模型2．标准文档流布局-垂直N列3.浮动方式布局-水平N列作业