第10章+css盒子.ppt

第10章 css盒子 目录 10.1 盒子的概念 盒子模型（Box Model）： 是从CSS诞生之时便产生的一个概念，对网页中的大部分对象，实际呈现形式就是一个盒子形状对象（即块状对象），对于这个基础又重要的概念，只要掌握盒子模型的尺寸及占位的标准技术方法，那就可以灵活驾驭盒子模型了！ 我们在网页设计中常常听到的属性名词：内容（content）、填充（padding）、边框（border）、边界（margin），在我们日常生活中的盒子也具有这些属性 填充、边框和边界都分为上、下、左、右4个方向，既可以分别定义，也可以统一定义。 ?当使用CSS定义盒子的width（宽）和height（高）时，定义的并不是四个部分的总区域，实际是内容区域（content）的width和height。若要计算盒子所占的实际区域必须加上padding，border和margin。 实际宽度=左边界+左边框+左填充+内容宽度（width）+右填充+右边框+右边界。 实际高度=上边界+上边框+上填充+内容高度（height）+下填充+下边框+下边界。 盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。 IE盒子模型也包括内容（content）、填充（padding）、边框（border）、边界（margin）， 不同的是IE盒子模型的内容（content）的width和height包含了border和padding。 box-sizing 属性 语法 box-sizing: content-box|border-box|inherit; Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。 Firefox 支持替代的 -moz-box-sizing 属性。 值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 inherit 规定应从父元素继承 box-sizing 属性的值。 div div 标签 定义和用法 div 可定义文档中的分区或节（division/section）。 如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。 div 是一个块级元素。这意味着它自动地开始一个新行。 实际上，换行是 div 固有的唯一格式表现。可以通过 div 的 class 或 id 应用额外的样式。 不必为每一个 div 都加上类或 id，而 id 用于标识单独的唯一的元素。 例如： div{ height:100px; width:100px; } 10.2边框 border-style 属性 定义和用法 border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 只有当这个值不是 none 时边框才可能出现。 例子 1 border-style:dotted solid double dashed; 上边框是点状 右边框是实线 下边框是双线 左边框是虚线 例子 2 border-style:dotted solid double; 上边框是点状 右边框和左边框是实线 下边框是双线 例子 3 border-style:dotted solid; 上边框和下边框是点状 ， 右边框和左边框是实线 例子 4 border-style:dotted; 所有 4 个边框都是点状 border-width 属性 定义和用法 border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。 不允许指定负长度值。 实例 设置四个边框的宽度： p { border-style:solid; border-width:15px; } 定义单边宽度 可以按照 top-right-bottom-left 的顺序设置元素的各边边框： p { border-style: solid; border-width: 15px 5px 15px 5px; } 也可以通过下列属性分别设置边框各边的宽度： border-top-width border-right-width border-bottom-width border-left-width 因此，下面的