CSS盒子模型

1.

标记

    div是英文division的缩写,意为“分割、区域”。

标记简单而言就是一个区块容器标记,可以将网页分割为独立的、不同的部分,以实现网页的规划和布局。
之间相当于一个“盒子”,可以设置外边距、内边距、宽和高,同时内部可以容纳段落、标题、表格、图像等各种网页元素,也就是说大多数HTML标记都可以 嵌套在
标记中,
中还可以嵌套多层

    

标记非常强大,通过与id、class等属性配合设置CSS样式,可以替代大多数的块级文本标记。





div标记



用div标记设置的标题文本

div标记中嵌套的p标记中的文本

CSS盒子模型_第1张图片

注意:

(1)

标记最大的意义在于和浮动属性float配合,实现网页的布局,这就是常说的DIV+CSS网页布局。

(2)

可以替代块级元素如

等,但是它们在语义上有一定的区别,例如

的不同在于

具有特殊的含义,语义较重,代表着标题,而
是一个通用的块级元素,主要用于布局。

2.盒子的宽与高

    网页是由多个盒子排列而成的,每个盒子都有固定的大小,在CSS中使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同单位的数值或相对于父元素的百分比,实际工作中最常用的是像素值。





盒子模型的宽度与高度



盒子模型的宽度与高度

CSS盒子模型_第2张图片

    大多数浏览器都采用W3C规范,符合CSS规范的盒子模型的总宽度和总高度的计算原则是:

 

  • 盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边框之和
  • 盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边框之和

注意:

    宽度属性width和高度属性height仅适用于块级元素,对行内元素无效(标记和除外)。

 

你可能感兴趣的:(HTML+CSS)