《网页设计》课件-10 CSS盒模型_第1页
《网页设计》课件-10 CSS盒模型_第2页
《网页设计》课件-10 CSS盒模型_第3页
《网页设计》课件-10 CSS盒模型_第4页
《网页设计》课件-10 CSS盒模型_第5页
已阅读5页，还剩29页未读， 继续免费阅读

下载本文档

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

文档简介

CSS盒模型重难点分析APARTONE重点：1、CSS盒模型2、边框3、内边距4、外边距难点：1、盒子模型2、盒模型的属性课程讲解BPARTTWO什么是盒子模型在页面布局中，到处都有盒子的存在什么是盒子模型每个HTML元素都可以看作一个装了东西的盒子盒子本身具有宽度（width）和高度（height）盒子里面的内容到盒子边框之间的距离即内边距（padding）盒子本身有边框（border）盒子边框外和其他盒子之间，还有外边距（margin）标准盒子模型盒模型的概念CSS将所有的网页元素都看做是一个矩形框元素的内容内边距（padding）边框（border）外边距（margin）组成。marginborderpadding内容外边距——marginmargin-top上外边距宽度margin-top:5px;margin-right右外边距宽度margin-right:5pxmargin-bottom下外边距宽度margin-bottom:5pxmargin-left左外边距宽度margin-left:5pxmargin四个外边距宽为同一宽度margin:5px;上、下外边距宽度左、右外边距宽度margin:5px5px;上外边距宽度左、右外边距宽度下外边距宽度margin:5px5px5px;上、右、下、左外边距宽度：margin:5px5px5px

5px;外边距应用——网页居中margin:0pxauto;p{ background:#F00; width:200px; height:100px;

margin:0pxauto;}<p>这是一个段落</p>特别强调：居中的元素要设置width属性。否则，元素撑满左右两边，居中就没有意义。外边距应用示例-body的外边距body{

margin:0;}网页标签<h1>…<h6>、<p>、、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<body>等都有margin，实际网页制作时通常使用并集选择器设置这些可能产生外边框的标签的margin为0这就是body的外边距内边距——paddingpadding-top上内边距宽度padding-top:5px;padding-right右内边距宽度padding-right:5pxpadding-bottom下内边距宽度padding-bottom:5pxpadding-left左内边距宽度padding-left:5pxpadding四个内边距宽为同一宽度padding:5px;上、下内边距宽度左、右内边距宽度padding:5px5px;上内边距宽度左、右内边距宽度下内边距宽度padding:5px5px5px;上、右、下、左内边距宽度：padding:5px5px5px

5px;内边距应用p{ background:#F00; width:200px; height:100px; margin:0auto; padding:20px;}<p>这是一个段落</p>这就是P的外边距边框——border边框属性主要有三种：border-width：设置或检索对象边框宽度。border-style：设置或检索对象边框样式。border-color：设置或检索对象边框颜色。边框宽度——border-widthborder-top-width上边框厚度border-top-width:5px;border-right-width右边框厚度border-right-width:5px;border-bottom-width下边框厚度border-bottom-width:5px;border-left-width左边框厚度border-left-width:5px;border-width四个边框为同一厚度border-width:5px;上、下边框厚度左、右边框厚度border-width:5px5px;上边框厚度左、右边框厚度下边框厚度border-width:5px5px5px;上、右、下、左边框厚度：border-width:5px5px5px

5px;边框属性-border-colorborder-top-color上边框颜色border-top-color:#FFF;border-right-color右边框颜色border-right-color:#FFF;border-bottom-color下边框颜色border-bottom-color:#FFF;border-left-color左边框颜色border-left-color:#FFF;border-color（后面跟一个值、二个值、三个值、四个值时的意义。）四个边框为同一颜色border-color:#FFF;上、下边框颜色左、右边框颜色border-color:#FFF#000;上边框颜色左、右边框颜色下边框颜色border-color:#FFF#000#f00;上、右、下、左边框颜色border-color:#FFF#000#f00#00f;边框属性-border-styleborder-top-style上边框样式none：无轮廓。border-color与border-width将被忽略hidden：隐藏边框。（IE7及以下不支持）dotted：点状轮廓。（IE6下显示为dashed效果）dashed：虚线轮廓。solid：实线轮廓double：双线轮廓。两条单线与其间隔的和等于指定的border-width值groove：3D凹槽轮廓。ridge：3D凸槽轮廓。inset：3D凹边轮廓。outset：3D凸边轮廓。

border-right-style右边框样式border-bottom-style下边框样式border-left-style左边框样式border-style四个边框为同一样式上、下边框样式左、右边框样式上边框样式左、右边框样式下边框样式上、右、下、左边框样式：同时设置边框所有属性同时设置边框的宽度、样式、颜色属性border:#00FF004pxdouble;border-top:#00FF004pxdouble;（属性设置没有顺序）同时设置边框所有属性#one{border:dotted#FF000010px;width:200px;height:200px;}<h2id=“one">

这是一个h2标题</h2>盒子模型示例p{

background:#F00;

width:200px;

height:100px;

margin:20px;

border:blue10pxsolid;

padding:30px;}<p>这是一个段落</p>HTML标准文档流HTML标准文档流：将窗体自上而下分成一行一行，并在每行中从左到右依次排放元素。它是窗体上可显示元素在排列时所占用的位置。标准文档流组成块级元素（blocklevel）<h1>…<h6>、<p>、<div>、<ul>、<ol>…内联元素（inline行内元素）<span>、<a>、<img/>、<strong>、一段文字(匿名内联元素)...div的盒子模型#box{

background:#F00;

width:200px;

height:100px;

margin:20px;

border:blue10pxsolid;

padding:30px;}<divid="box">这是一个div</div>display属性Display属性：控制元素的显示和隐藏块级元素与行级元素的转变值说明block块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符inline内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符none设置元素不会被显示inline-block指定对象为内联块元素(行内块元素)块级元素和内联元素的转换#div1{ background-color:#0F0; width:100px;}<h1>这是h1块级元素</h1><p>这是p块级元素</p><divid="div1">这是一个层</div>块级元素和内联元素的转换#div1{ background-color:#0F0; width:100px;}.show{ display:inline;}<h1class="show">这是h1块级元素</h1><pclass="show">这是p块级元素</p><divclass="show"id="div1">这是一个层</div>块的显示和隐藏#one{ background:red; width:200px; height:100px;}#two{ background:green; width:200px; height:100px;}<divid="one"></div><divid="two"></div>#one{ background:red; width:200px; height:100px;

display:none;}#two{ background:green; width:200px; height:100px;}display:none后，被隐藏的对象不保留物理空间，后面的对象会填充前面的空间父子块的显示和隐藏#one{ background:red; width:220px; height:120px;}#two{ background:green; width:200px; height:100px;}<divid="one"><divid="two"></div></div>#one{ background:red; width:220px; height:120px; display:none;}#two{ background:green; width:200px; height:100px; display:block;}父块被隐藏后，子块也被隐藏。块的显示和隐藏-应用示例<divid="menu"><ul><li><ahref="">编程语言

<div><ol><li>java</li><li>C</li><li>C++</li></ol></div></a></li>......</ul></div>a{ color:#333; text-decoration:none;}#menuadiv{ display:none;}#menua:hoverdiv{ display:block;}inline-block如果希望元素具有宽度高度等块元素特性，又具有同行特性，这个时候我们可以使用inline-block。inline-block：指定对象为内联块元素实际上，浏览器中就有默认的天生inline-block元素，既拥有内在尺寸，可设置高宽，而且也不会自动换行。<input>、<img>、<button>、<textarea>、<label>。

表格的显示和隐藏.one{ visibility:hidden;}<table><tr><td>张三</td><td>

人人文库> 全部分类> 教育资料 > 课设设计

温馨提示

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

最新文档

评论

0/150

提交评论