网页布局基础

2022-06-08 分类：网站建设

网页布局参照三个方面：

1、标准文档流

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

2、float

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

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

对文档流，文本流的理解

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

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

3、position

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

　　两种情况：

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

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

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

Note：对于未设置width的元素

　　　　　默认 100%

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

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容