第11章CSS控制元素的大小1

第五章

CSS定位与div布局主要内容：div标记与span标记盒子模型盒子的浮动与定位重点：盒子的浮动与定位5.1定义divdiv标记<div>是一个区块容器标记，即<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格、图片，章节、摘要和备注等各种HTML元素。页面中的各元素由<div>标识出来，由CSS来完成样式的控制。5.1.2插入div<divid=“iname”>内容</div><divclass=“cname”>内容</div>id在当前页面引用一次，class可以反复使用

<div>与<span>标记span标记<span>也是容器标记，在<span>与</span>中间的各种HTML元素，也是独立的对象。区别P73：<div>块级元素，一个元素占有一行，<span>是行级元素，几个元素可共一行通常情况下，对于页面中大的区块使用div标记，而span标记仅仅用于需要单独设置样式风格的小元素，例如一个单词、一副图片和一个超链接。5.1.3<div>的嵌套使用P74<divid="header">此处显示id"header"的内容</div><divid="nav">此处显示id"nav"的内容</div><divid="maincontent">

<divid="main">此处显示id"main"的内容</div>

<divid="side">此处显示id"side"的内容</div></div><divid="footer">此处显示id"footer"的内容</div>5.2可视化（盒子）模型盒子模型是CSS控制页面时一个很重要的概念。只有很好的掌握了盒子模型以及其中每个元素的用法，才能真正的控制页面中各元素的位置。

5.2.1盒子模型的概念盒子模型的概念所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大。换句话说，可以通过调整盒子的边框、距离等参数，来调节盒子的位置。一个盒子模型由四部分组成:content（内容）padding（内边距）border（边框）margin（外边距）元素宽度的计算：左边界+左边框+左补白+宽度+右补白+右边框+右边界5.2.1盒子模型的概念在盒模型中，元素宽度的计算：左边界+左边框+左补白+宽度+右补白+右边框+右边界元素高度的计算：上边界+上边框+上补白+高度+下补白+下边框+下边界注意：在CSS布局中，要随时注意计算元素占有的空间，以便合理布局元素。1.元素内容content的大小1）宽度属性width有三种属性值：auto、长度值、百分比width：auto|length|percent;

演示1：使用宽度属性的实例2）高度属性height有三种属性值：auto、长度值、百分比height：auto|length|percent;

演示2：使用高度属性的实例2.元素的补白（内边距padding）

在CSS中，补白属性包括4个单侧补白属性和1个综合属性。1）顶部补白属性padding-topPadding-top：length|percent|auto;演示6：顶部补白属性2）右侧补白属性padding-right3）底部补白属性padding-bottom4）左侧补白属性padding-left5）综合补白属性paddingPadding：padding-toppadding-rightpadding-bottompadding-left;演示7：综合补白属性3.元素的边框border边框属性中可以分为以下几个属性：边框样式（border-style），有四个方向边框颜色（border-color），有四个方向边框宽度（border-width），有四个方向边框综合（border），有以上三个项目，表示四边一样1）边框样式同样分为上、下、左、右四个子属性。Border-top-style：None：没有边框Hidden：隐藏边框Dotted：点线边框Dashed：虚线边框Solid：实线边框Double：双线边框Groove：3D凹槽边框Ridge：菱形边框Inset：3d凹边Outset：3d凸边演示8：边框样式。练习：按照演示，设置DIV的四周边框。2）边框颜色属性分为上、下、左、右四个子属性。顶部边框样式border-top-colorborder-top-color：#color|colorname;演示9：边框颜色。其他边框样式是类似的。练习：按照演示，设置DIV的四周边框的颜色。3）边框的宽度属性同样分为上、下、左、右四个子属性。顶部边框样式border-top-widthborder-top-width：medium|thin|thick|length;演示10：边框宽度。其他边框样式是类似的。练习：按照演示，设置DIV的四周边框的宽度。属性值的简写形式使用不带top等词的属性描述时，可以简写具体含义如下： 如果给出1个属性值，表示四边一样如果给出2个属性值，前者--上下，后者--左右；如果给出3个属性值，前--上边框，中--左右，后--下边框；如果给出4个属性值，表示上、右、下、左边框的属性，即顺时针排序。

border-width：2px；用综合描述某一属性的上、右、下、左要按照顺时针排序用边框综合Border来描述，表示四边一样，对宽度，类型，颜色是没有顺序要求。如：Border：2pxsolid#666表示所有边框的宽度，类型，颜色

另外值得注意的是，在特定情况下给元素设置background-color背景色时，IE作用的区域为content+padding，firefox则是content+padding+border。这点在border为粗虚线时特别明显。4.元素的外边距

margin是指元素与元素之间的距离，即块与块之间的距离。示例1---行内元素之间的水平margin当两个行内元素紧邻时，它们之间的距离为第一个元素的margin-right与第二个元素的margin-left之和。margin示例2---块级元素之间的竖直margin若是产生换行效果的块级元素，两个块级元素之间的距离不再是margin-bottom与margin-top的和，而是两者中的较大者。margin示例3---嵌套盒子之间的margin当一个<div>块包含在另一个<div>块中时，便形成了父子关系。如果父块的高度没有设定，其高度将自然形成，以能容纳子div的最小高度来显示。margin示例3---总结

父元素的高度=子元素的高度+子元素边框厚度+子元素的margin+父元素的padding子div边框与父div边框之间的距离

=

子div的margin+父div的paddingmargin示例4---嵌套盒子之间的margin当设定了父元素的高度height时，如果此时子元素的高度超过了该height值，IE和firefox显示结果完全不同。margin示例4---总结

如果子元素的高度+子元素边框厚度+子元素的margin+父元素的padding

>父元素的高度IE会自动扩大父元素，保持子元素的空间以及父元素的padding火狐则是保证父元素的高度，子元素超出父元素的范围4margin示例5---margin设置为负数当将margin设为负数时，会使得被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。4margin示例6---margin设置为负数当块之间是父子关系时，通过设置子块的margin参数为负数，可以使得子块从父块中“分离”出来。margin-left：0px；margin-left：-60px；父div子div父div子divCSS几何题—练习CSS几何题ul{background:#ddd;margin:15px;padding:5px;width:300px;}li{color:black;background:#aaa;margin:20px;padding:10px;list-style:none}li.Withborder{border-style:dashed;border-color:black;margin-top:20px;}<ul><li>1-1项目<