复习css布局模型

css布局模型

浏览器从服务器读取数据,保持页面元素的原始顺序,是一个顺序,然后按照文档流的顺序进行解析;
css布局模型有:流动模型flow、浮动模型float、层模型layer;


流动模型:

流动模型基于标准文档流进行布局,除了绝对定位、固定定位之外、浮动之外,任何元素都将默认为流动布局模式;

  • 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。
  • 在内联模型下,内联元素都会在所处的元素内从左到右水平分布显示;

    这里写图片描述



浮动模型:

任何浮动元素都会自动被设为block元素显示,在水平方向,停靠在包含元素的边缘,浮动元素不会脱离文档流,始终位于包含元素内部;(但是绝对定位是能够脱离文档流)

这里写图片描述

浮动塌陷:
当父元素,只包含浮动元素时候,高度塌陷为0

这里写图片描述



层模型:

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值