1:html中常见的有3种布局方式:

   1:文档流布局(电脑默认的布局方式)

   2:浮动布局

   3:定位

文档流布局

电脑默认的从页面左上角到右下角的布局方式,各种元素属性都遵循其各自特点,

比如:行元素a标签,在这种布局方式中仍然遵循其元素特点,可以和其他行元素共

存一行,设置宽高没有意义,由内容撑开宽高.

浮动布局

常见的第二种布局方式,常用的赋值有left和right,浮动的元素脱离电脑默认的文档流.

浮动的特点:

1:脱离文档流 不占据原来的位置

2:被浮动的块元素可以共存一行!!

3:被浮动的元素有浮动的边界(其父元素的宽)

浮动的不良影响:浮动的元素会对后面的元素产生影响

1:当子标签设置为float时,父标签的高度不会被撑开(他俩在两层),所以需要设置父标签的高度

2:让浮动元素整体水平居中,可以考虑加一个父级标签,然后让父级标签水平居中

解决办法

当有浮动元素时,其父标签写overflow:hidden

其后写的标签写clear:both

(同一级的标签的布局方式最好一样)

定位

定位,界面布局的第三种常用布局方式.定位分为相对定位,绝对定位和固定定位.

1:相对定位(relative)

     (1) 原来的文档流中的位置依然占据

     (2)当元素需要微调(调整位置变化不大时),才会用相对定位

     (3)一般不用于重叠效果

     (4)不脱离文档流,不改变元素的行块属性

    (5)相对于原来文档流中的位置进行定位

    (6)一般通常用于辅助绝对定位的元素!!!

2:绝对定位(absolute)

      (1) 脱离文档流(既不是行也不是块)

      (2) 不占据原来的文档流中的位置

      (3) 脱离的元素:可以设置宽高,可以和其他元素共存一行,内容撑开宽高

      (4) 如果不进行设置,绝对定位的位置相对于页面左上角进行偏移

      (5) 绝对定位的位置是一级一级的查找父级元素,直到找到relative的父级,开始进行定位

      (6) 绝对定位通常用于界面中的重叠效果!!

3:固定定位(fixed)

      (1)脱离文档流格式

      (2)脱离文档流的元素非块非行,可以设置宽高,内容撑开宽高,共存一行

      (3)相对于!!浏览器窗口!!进行定位

      (4)通常用于固定导航或者广告!