css浮动布局自适应,CSS 几种常用自适应布局

通过阅读和实践,我对几种常用的布局样式有了一定的了解,也稍微总结了一下原理,若有不对请大家纠错。谢谢

我理解的【两列布局】左边固定和右边自适应,或者右边固定左边自适应的原理是:

1.设置固定区域的宽度

2.设置自适应的区域的宽度为100%

3.设置他们向左或者向右浮动。

4.固定区域设置它的 外边距为负数 使 自适应区域能够和固定区域同在一行。

5.虽然自适应区域与固定区域同一行 但是它宽度其实是父级的宽度,所有自适应区域需要设置一个子区域,并且也需要让子区域中的内容能够正确显示在可视范围内。

【三列布局】 两边固定 中间自适应

1.我们可以把中间和右边看成一个 右边固定,左边自适应的布局。

2.设置左边区域的宽度和浮动

3.因为左边的区域就应该是文档流中的区域,但是我们设置了浮动,导致左边区域已经脱离了文档流,所有我们应该使用 position:relative 使左边区域还依旧显示在文档流的位置中。

4.给自适应区加一个子区域,并设置子区域的显示区域。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值