CSS与网站布局设计4.pptVIP

第三章、CSS容器属性 主要内容学习： 1、盒模型的概念 2、盒模型的补白，边框和边界 3、盒模型的嵌套问题 4、负边界问题 5、固定大小问题 6、自适应的实现方法 第一节、盒模型的概念 导读： 本章我们主要学习网页的布局问题。CSS容器的属性是使用CSS布局时候最重要的属性，页面中各个内容的精确定位，以及常见的页面效果都依赖于CSS的容器属性来实现。 第一节、盒模型的概念 一、关于盒模型 第一节、盒模型的概念 二、盒模型补白属性 第一节、盒模型的概念 二、盒模型补白属性 第一节、盒模型的概念 三、边框属性 第一节、盒模型的概念 三、边框属性 第一节、盒模型的概念 三、边框属性 第一节、盒模型的概念 三、边框属性 第一节、盒模型的概念 三、边框属性 第一节、盒模型的概念 四、边界属性 第一节、盒模型的概念 四、边界属性 第一节、盒模型的概念 四、边界属性 第一节、盒模型的概念 五、父元素与子元素之间的距离 第一节、盒模型的概念 五、使用overflow属性固定长度和宽度 第二节、盒模型的综合练习 第二节、盒模型的综合练习 * * 当超出区域 部分后无法 自动增长。 案例见下： 1、补白属性（padding）介绍 padding : length ?参数： ?length : 　由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。 具体例子见下 注意：补白的属性值是不允许为负数的 2、单侧补白属性（padding）介绍 padding-bottom : length padding-left : length padding-right : length padding-top : length 3、单侧补白属性（padding）简写介绍 .content {padding:5px 18px 24px 54px} 按照钟面原则进行记忆 1、边框样式属性（padding）介绍 border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 参数： ?none : 　无边框。与任何指定的border-width值无关 hidden : 　隐藏边框。IE不支持 dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线 dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线 solid : 　实线边框 double : 　双线边框。两条单线与其间隔的和等于指定的border-width值 groove : 　根据border-color的值画3D凹槽 ridge : 　根据border-color的值画菱形边框 inset : 　根据border-color的值画3D凹边 outset : 　根据border-color的值画3D凸边 案例见下 2、边框宽度介绍 border-width : medium | thin | thick | length ?参数： ?medium : 　默认宽度thin : 　小于默认宽度thick : 　大于默认宽度length : 　由浮点数字和单位标识符组成的长度值。不可为负值。 3、边框颜色介绍 border-color : color ?参数： ?color : 　指定颜色。 4、边框综合介绍 在CSS中，可以使用border属性定义所有的属性 Border:border-style border-width border-color; 比如： #bor1{ border:#0000CC 10px solid; } 1、边框样式属性（padding）介绍 border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 综合案例 ——————新闻列表的制作 案例见下 5、表格边框的属性定义 border-collapse : separate | collapse  ?参数： ?separate : 　边框独立（标准