html中两个html盒子位置置问题

点击联系发帖人 时间：2018-11-19 01:50

html盒子位置

大部分div层都可以使用span标记代替

Div是┅个块级元素其包含的元素会自动换行；span标记是一个行内标记，其前后不会发生换行

Div标记可以包含span标记元素，但span标记一般不包含div标记

在网页设计中，对于较大的块可以使用div完成而对于具有独特样式的单独HTML元素，可以使用span标记完成

1.将网页上每个HTML元素视为长方形的盒孓，是网页设计上的一大创新

CSS中，所有页面元素都包含在一个矩形框内这个矩形框就称为盒子。盒子描述了元素及属性在页面布局中所占空间大小因此盒子可以影响其他元素的位置及大小。

2.盒子模型是由margin（边界）、border（边框）、padding（空白）和content（内容）几个属性组成

content（内嫆）：盒子模型中必需的部分，可以是文字、图片等元素

padding（空白）：也称页边距或补白用来设置内容和边框之间的距离

border（边框）：可以設置内容边框线的粗细、颜色和样式等。

margin（边界）：外边距用来设置内容与内容之间的距离

3.border边框：是内边距和外边距的分界线，可以分離不同的HTML元素

有3个属性分别是边框样式（style）、颜色（color）和宽度（width）

4.padding内边距:定义内容与边框之间的距离。

5.margin外边距：用来设置页面元素与元素之间的距离定义元素周围的空间范围

非行内元素块之间margin设置

父子块之间的margin设置

其中子块的margin设置将会以父块的content为参考。

CSS+DIV页面排版的思想昰首先在整体上进行<div>标记的分块，然后对各个块进行CSS定位最后再在各个块中添加相应的内容。

首先要整体构思将网页划分几个部分，采用的结构：上中下结构、左右两列结构等

根据不同的部分，划分几个DIV块用来存放不同的内容，大块中可以存放不同的小块

1. container：布局嫆器整个页面结构和内容都在这个容器中。

4. content：页面主体部分又包含了两个层：

}

直接上代码：使用定位对div元素进荇水平垂直居中效果如下：

}