盒子模型与定位课件.ppt

《盒子模型与定位课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS盒子模型与定位信息工程学院2010.10知识回顾1什么是CSSCSS（CascadingStyleSheets）：层叠样式表，一种定义样式的语言，用于描述如何格式化和显示网页中的信息。2CSS基本语法CSS规则：选择器{属性1：属性值1;...;属性n：属性值n;}CSS选择器：基本选择器（标签、类和ID）复合选择器（交集、并集、后代、伪类等等）3CSS引入方法行内样式、内部（内嵌）样式、外部样式想一想？页面的构成元素都有什么？h1、h2、p、a、img、span、div、input等等等等。这些元素在页面上都是怎么放置的呢？像a、span、img和input

2、这样的元素是行内元素，放置的时候可以在一行，而div、p、h1和h2会独占一行放置。CSS的盒子模型盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。CSS的盒子模型CSS的盒子模型每个HTML元素都可以看作是一个装了东西的盒子盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin)

3、,如图所示默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子margin：边距，四个方向为margin-top，margin-right，margin-bottom，margin-leftborder：边框，四个方向为border-top，border-right，border-bottom，border-leftpadding：填充，四个方向为padding-top，padding-right，padding-bottom，padding-leftcontent：主体内容元素盒子大小的计算一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填

4、充＋右边框＋右边界例如下面的样式#MyBox{margin:10px;padding:5px;border:dotted;border-width:3px;border-color:#0F0;width:70px;//内容的宽度}这个区域的宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距=10px+3px+5px+70px+5px+3px+10px=106pxCSS盒子模型计算题如果盒子里面嵌套有盒子，那么：两个盒子边框之间的距离=外面盒子的填充值(padding)＋里面盒子的边距值(margin)#box1

5、{background-color:#ddd;margin:15px;padding:5px;}#box2{color:black;background-color:#aaa;margin:20px;padding:10px0px10px10px;width:100px;}body{border:1pxdotted#FF0000}这是里面的盒子