首页 > 代码库 > 网页布局基础

网页布局基础

2024-08-28 03:03:25   218人阅读

网页布局参照三个方面：

  1. 标准文档流
  2. float
  3. position

1、标准文档流

  • 块级元素
  • 层级元素

　　Note：两个元素都属于 盒子模型

2、float

  • left
  • right
  • none

　　Note：设置浮动后，脱离标准文档流；但不脱离标准文本流  ；

　　　　　当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素指的是紧邻后面的元素。消除影响方法：width:100%;overflow:hidden（包含元素有影响时）  或clear:both（后　　　　　面元素有影响时）

　　　　　对文档流，文本流的理解

　　　　　　　对设置浮动后的标签，如果是文档流里的会直接占据它的位置，文本（<p>）会在其周围显示

　　　　　与position:absolute对比：position:absolute会脱离标准文档流和标准文本流

 

3、position

  • 相对定位：相对于自身原有位置进行位移，仍处于标准文档流中。
  • 绝对定位：建立了以包含块为基准的定位，完全脱离标准文档流。随即拥有偏移属性和z-index属性

　　　　包含块：离它最近的，设置了position的祖先元素

　　　　两种情况：

　　　　　　未设置偏移量：无论是否存在已定位祖先元素，都保持在元素初始位置

　　　　　　设置偏移量：无已定位祖先元素，以<html>为偏移参照标准

　　　　　　　　　　　　有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照标准

　　Note：对于未设置width的元素

　　　　　　　默认 100%

　　　　　　　但是加上position:absolute之后，按包含元素width来算。

 

网页布局基础


联系
我们