第10讲CSS盒子模型课件_第1页
第10讲CSS盒子模型课件_第2页
第10讲CSS盒子模型课件_第3页
第10讲CSS盒子模型课件_第4页
第10讲CSS盒子模型课件_第5页
已阅读5页，还剩29页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第十讲CSS盒子模型1回顾CSS中背景属性的缩写格式如何编写？CSS中如何实现图片代替文本？滑动门技术一般运用在什么地方？如何实现2初步了解盒子模型的定义掌握盒子模型的特性掌握盒子的定位了解盒子的margin叠加问题掌握盒子的浮动使用盒子模型进行页面布局本讲目标3新知识导入：CSS的盒子模型盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互。页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界间距组成。网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。

4CSS的盒子模型5CSS的盒子模型每个HTML元素都可以看作是一个装了东西的盒子盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin),如图所示默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子6contentpadding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheight7元素盒子大小的计算一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界8IEquirk模式下盒子的宽度当将文档声明DOCTYPE删除后，IE6对网页的解释会进入quirk（怪异）模式，此时盒子的宽度等于左边界＋宽度＋右边界因此当使用了盒子属性后切忌删除DOCTYPE9CSS盒子模型计算题如果盒子里面嵌套有盒子，且两个盒子都有边框，那么两个盒子边框之间的距离等于外面盒子的填充值＋里面盒子的边界值案例演示10边框border属性盒子模型的margin和padding属性比较简单，只能设置宽度值，最多分别对上、右、下、左设置宽度值。而边框border则可以设置宽度、颜色和样式。分别是border-width（宽度）、border-color（颜色）和border-style（样式）其中border-style属性可以将边框设置为实线（solid）、虚线（dashed）、点划线（dotted）、双线（double）等效果11填充padding属性填充padding属性，也称为盒子的内边距。就是盒子边框到内容之间的距离，和表格的填充属性（cellpadding）比较相似。如果填充属性为0，则盒子的边框会紧挨着内容，这样通常不美观。当对盒子设置了背景颜色或背景图像后，那么背景会覆盖padding和内容组成的范围，并且默认情况下背景图像是以padding的左上角为基准点在盒子中平铺的12盒子模型的特性边界值margin可为负，填充padding不可为负边框border默认值为0，即不显示行内元素，如a，定义上下边界不影响行高13对盒子模型的思考边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的，我们只能看到他们对元素的影响盒子模型中只能设置两类颜色，即边框颜色和背景颜色盒子模型可设置三类距离，即边界距离margin，填充距离padding和边框值border14属性值的简写形式

方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：

如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；

如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。15各种元素盒子属性的默认值大部分html元素的盒子属性(margin,padding)默认值都为0；有少数html元素的(margin,padding)浏览器默认值不为0，例如：body，p，ul，li，form标记等，因此我们有时有必要先设置它们的这些属性为0。Input元素的边框属性默认不为0，我们可以设置为0达到美化表单中输入框和按钮的目的。16盒子模型的应用1.美化表单网页中的表单控件在默认情况下背景都是灰色的，文本框边框是粗线条带立体感的，不够美观。下列代码通过CSS改变表单的边框样式、颜色和背景颜色让文本框，按钮等变得漂亮些。

17盒子的定位18盒子的三种定位形式在标准流下的定位在浮动属性下的定位在定位属性下的定位除非设置浮动属性或定位属性，否则所有盒子都是在标准流中定位。顾名思义，标准流中元素盒子的位置由元素在HTML中的位置决定。19标准流HTML元素在标准状况下的定位方式行内元素在同一行内横向排列块级元素占满整个一行，在页面中竖向排列元素不会移动到其它地方去，对于嵌套的元素盒子也是嵌套的关系20标准流下的盒子排列分析<styletype="text/css">*{border:2pxdashed#FF0066;padding:10px;margin:2px;}</style><body><div>网页的banner（块级元素）</div><ahref="#">行内元素1</a><ahref="#">行内2</a><ahref="#">行内3</a><div>这是无名块<p>这是盒子中的盒子</p></div>21行内元素的盒子行内元素的盒子永远只能在浏览器中得到一行高度的空间（行高由line-height属性决定，如果没设置该属性，则是内容的默认高度），如果给它设置上下border，margin，padding等值，导致其盒子的高度超过行高，那么它的盒子上下部分将和其他元素的盒子重叠。因此，不推荐对行内元素直接设置盒子属性，一般先设置行内元素以块级元素显示，再设置它的盒子属性。22改变行内元素的高度如图所示，当增加行内元素的边界和填充时，行内元素a占据浏览器的高度并没有增加，下面这个div块仍然在原来的位置，导致行内元素盒子的上下部分重叠，而左右部分不会受影响

23display属性通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示display:block|inline|none|list-item24block元素block元素的特点是：

总是在新行上开始；

高度，行高以及顶和底边距都可控制；

宽度缺省是它的容器的100%，除非用width设定一个宽度

<div>,<p>,<h1>,<form>,<ul>和<li>是块元素的例子。

25inline元素inline元素的特点是：和其他元素都在一行上高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。

<span>,<a>,<label>,<input>,<img>,<strong>和<em>是inline元素的例子

26列表项元素display:list-item在html中只有li元素默认是此类型，将元素设置为列表项元素后将按列表元素显示，再通过设置列表选项可使元素的左边出现小黑点。

27隐藏元素display:none;当某个元素被设置成了隐藏元素之后，浏览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据文档中的位置。像title元素默认就是此类型。比较visibility:hidden;制作下拉菜单、tab面板等有时就需要用display:none把菜单或面板隐藏起来28需要使用display属性切换的情况让一个inline元素从新行开始；让块元素和其他元素保持在一行上；控制inline元素的宽度;控制inline元素的高度（对导航条特别有用）；无须设定宽度即可为一个块元素设定与文字同宽的背景色29标准流下定位的应用－制作竖直导航菜单#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;}30盒子的margin叠加问题31盒子的margin在标准流中的计算实验1：行内元素之间的水平margin

span.left{ margin-right:30px; background-color:#a9d6ff;}span.right{ margin-left:40px; background-color:#eeb0b0;}32经常不断地学习,你就什么都知道。你知道得越多,你就越有力量StudyConstant

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论