CSS初探9

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”。如果同时指定元素的高度不够大,可能使得内容底部“溢出”到其他元素中。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,827评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,812评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,346评论 0 11
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,064评论 1 4
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,102评论 0 1