你的位置:首页 > 网页设计

[网页设计]块级元素

前言

  入侵前端计划的第一周即将结束,《CSS权威指南》已近尾声,真心推荐,是本好书,会带来一些新的认识,比如说盒子模型。

  如果想讨论讨论,欢迎评论,共同进步嘛,初来乍到,有何不妥,请多多指点。

 

引入问题

  据说CSS中最基础的一个重点,也就是最重点的一个基础,就是盒子模型,究竟什么是盒子模型?

 

基本概念

  本文中会提到的名词列在下面,如文章有其他不熟悉的词汇,请请求网络帮助。

    1. 正常流:正常文本从左向右、从上向下显示,称为正常流,本文一律在正常流下进行讨论,浮动和定位会让元素脱离正常流。

    2. 非替换元素:元素内容包含在文档中,如<p>、<h1>。

    3. 替换元素:用作为其他内容占位符的元素,如<img>。

    4. 块级元素:本文介绍块级元素的一些特征,从最基本的<div>、<p>元素开始。

    5. 外边距(margin):默认值为0,可以为负数。

    6. 边框(border):默认没有边框,宽度不能为负数。

    7. 内边距(padding):默认值为0,不能为负数。

    8. 宽度(width):默认值为auto,不能为负数,为内容宽度(不包括内边距)。

    9. 高度(height):默认值为auto,不能为负数,为内容高度(不包括内边距)。

 

盒子模型

  开篇第一图盗自百度百科。
      

  这就是伟大的盒子模型,有什么特性,你猜。为了方便下文的观察,CSS噼里啪啦敲些东西。
      

  其中可以设置为auto的属性有三个:margin-left、width、margin-right,于是乎,就有了以下絮絮叨叨的各种情况的讨论。
    1. 0个auto:此时会根据一个叫过分受限的原则,将margin-right自动变为auto,有如下效果。
      

    3. 2个auto:如果margin两个值是auto,此时会使两者相等,从而满足公式,此情况常用与居中,就不截图了;如果是width和margin其中之一,该margin会被置0。          

  还有一些附加点,乱七八糟的。
    1. 水平方向的外边距不会合并,垂直方向会合并的,下文详述。

    2. 各种值都可以用百分数,但是不够灵活,还是乖乖的该用啥用啥吧。    

    3. 外边距可以为负数,依旧满足公式,只不过width会比父级宽罢了。    

    4. 块级替换元素,当width设置为auto,宽度会变为内容的宽度。

 

垂直方向格式化

  也有一个公式,万能的。
       height的值默认为auto,也就是随着内容的高度变化而变化,当指定一个高度时,参考内容的高度,会出现过小或者过大的情况,这个很简单,就自行脑补一下吧。
  当然也有三个值,可以设置为auto,margin-top、margin-bottom、height,当margin设置为auto时,会被置零,当height设置为auto时,默认情况就不多说了。

外边距合并

  块级元素水平方向不会合并外边距,但是垂直方向会合并,大的吃小的的道理,效果如下。