HTML中如何实现将元素定位

定位属性控制网页所显示的整个元素的位置，它可设置元素是放置在页面的绝对位置，也可设置为相对于其他元素的位置。在本例中：position:absolute就表示采用绝对定位的方式。采用绝对定位方式就需要同时采用left,right,top,bottom等属性来进行绝对定位，而这些属性也称为元素位置属性，分别表示对象与其最近一个定位的父对像的左侧，右侧，顶部和底部的相对位置，它的值可以为auto百分数；数值+单位。在本例中left:396pxtop:66px采用的为：数值+单位，分别为与父对象的左侧相对位置396像素，顶部的相对位置为66像素。因为在采用absolute定位时，该元素就被当作一个矩形覆盖物来格式化，格式化后的矩形区域就变成了一个可以放置其他html元素的容器，这个容器也就是层元素，它可以凌驾于html 文档的布局之上，区域下面的文字图形无法环绕和透过该容器显示出来。所以z-index:1中是利用层叠顺序属性设定层的先后顺序和覆盖关系，z-index值高的层覆盖z-index值低的层，一般情况下为1，表示该层位于最下层。width和height是分别设定层的宽度和高度，在本例width:12pxheight:103px表示宽度为12像素，高度为103像素

HTML中的标签元素一般分为三大类，它们分别是：块级元素、行内元素、行内块级元素。下面总结一下这几类元素的特点及应用。

01 块级元素

特点：

① 独占一行、从上到下排列

② 可直接控制宽度、高度及盒子模型的CSS属性（width 、height、padding 等属性值）

③ 在不单独设置宽度的情况下，块级元素的宽度（width属性）继承父元素

④ 在不单独设置高度的情况下，块级元素的高度（height属性）靠自己的基因（它本身内容的高度）

块级元素从我的理解来说，就是一个大框框，用来框住其它元素不要乱跑乱窜的，只能在一定范围内活动。所以，它通常会用来进来大的结构搭建。

常用的块级元素：

02 行内元素

特点：

① 元素与元素之间会自动排列成一行，遇到空间不够自动换行

② 默认高度和宽度（width、height）属性与它们的内容有关，无内容那么它本身也就是虚无。

③ 行内元素不支持padding、margin的上下调动（它们就是紧挨着不离不弃、除非用外部手部强制拆散它们）

行内元素一般用来修饰点缀内容而用，语义化比较强，用来加强代码的可读性。

常用的行内元素：

03 行内块元素

特点：

从这个名字就可以看出来，它是一个结合体，块级元素和行内元素的结合体。它具备二者共有的一些特点，使用非常频繁。

① 元素具有块级元素的属性（width、height等属性），可以对其直接控制

② 虽然有宽和高，但是他并不会霸道地独占一行，它具有行内元素的“亲情属性”，会自动排列挨在一起。

③ 行内块元素支持padding、margin的上下调动

欢迎大佬提点指正

---