Head First HTML与CSS
第十章 div与span
CSS——掌控页面的表现
什么是div元素
可以使用<div>元素包围多个逻辑上相关的元素，以此建立一个逻辑分区。譬如一些元素用于描述猫，一些元素用于描述狗，这就是两个不同的逻辑分区。<div>元素就相当于一个容器，可以把一堆相关的元素放在一起。另外对<div>指定样式和定位时，它们还相当于图形容器。
如何使用div元素
<div>元素内嵌一些元素后，我们可以通过给<div>元素提供一个id属性，来唯一标示这个逻辑分区，例如<div id="cats">。<div>中的元素就像其他子元素一样，也会从<div>继承一些属性。
接下来就可以利用CSS中的id选择器，对<div>中包含的一组元素指定样式。例如边框、区域宽度。
例如：
#elixirs{
border-width:thin;
border-style:solid;
border-color:#007e7e;
}
<div>元素之间也可以相互嵌套，例如<div id="pets">中嵌套着<div id="dogs">和<div id="cats">。
处理<div>分区的宽度
可以使用width属性指定某个元素的宽度。
#elixirs{
border-width:thin;
border-style:solid;
border-color:#007e7e;
width:200px;
}
width属性允许我们指定元素内容区的宽度，即使调整浏览器窗口的宽度，这也不会改变。
不论调整浏览器窗口宽度到多宽或多窄，其他段落都会自行调整大小，而elixirs<div>的宽度永远是200像素。
注意：width只指定内容区的宽度。整个盒子的宽度是内容区加上内边距、边框和外边距的宽度。
盒子宽度和高度要点
1.一个块元素的默认宽度为“auto”，这说明它会延伸占满可用的空间。（考虑到内边距、边框和外边距之后）。如果没有外边距、内边距和边框，内容区的宽度就是盒子的宽度。
2.指定宽度可以为具体大小 （像素），也可以指定一个百分数，此时宽度为元素所在容器宽度的一个百分比（容器可以是<body><div>等）。
3.一般不用指定元素的高度，默认为“auto”。如果同时指定元素的高度不够大，可能使得内容底部“溢出”到其他元素中。
网友评论