摘要:解析四种常用方法以及原理浮动浮动内嵌定位。浮动元素高度为,浮动盒子层级比块级水平盒子高,比水平盒子低。中间元素用,防止内容跑到左右两块定位元素下面被遮盖。我在左边我在中间,自动占据剩余空间我在右边原理布局,子元素默认水平排列。
解析四种常用方法以及原理:浮动、浮动内嵌 div、定位、flex。
浮动我在左边
我在右边
我排最后,但是跑到中间来了
原理:
浮动元素和非浮动元素不在同一个立体空间,如果不清浮动,位置在它下面的元素将往上浮。
浮动元素高度为0,浮动盒子层级比 block 块级水平盒子高,比 inline/inline-block 水平盒子低。
浮动内嵌 div我在中间
我在左边
我在右边
原理:
三个元素都浮动,其中主题元素沾满一行 100% ,利用负 margin 把左右两边的元素放好。
主题元素里面再套一个子元素,子元素 margin: 0 200px ,防止内容跑到左右两块浮动元素下面被遮盖。
定位我在中间,我用 margin 抵消左右两块定位元素占据空间
我在左边,我是定位元素
我在右边,我是定位元素
原理:
左右两个元素定位,可放任意位置。
中间元素用 margin: 0 200px,防止内容跑到左右两块定位元素下面被遮盖。
flex我在左边
我在中间,flex: 1 自动占据剩余空间
我在右边
原理:
flex 布局,子元素默认水平排列。
flex: 0 1 auto -> 默认,占据空间不跟随父级放大,跟随变小,自身本来宽度
flex: 1 1 auto -> auto,占据空间跟随父级放大,同时跟随变小,自身本来宽度
flex: 0 0 auto -> none,占据空间不跟随父级放大,同时也不跟随变小,自身本来宽度
flex: 1 1 1 -> auto,占据空间跟随父级放大,同时跟随变小,并且自动占满剩余空间
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/53084.html
摘要:实现基于纯实现的三栏布局需要将中间的内容放在结构的最后,否则右侧会沉在中间内容的下侧原理元素浮动后,脱离文档流,后面的元素受浮动影响,设置受影响元素的值即可两边固定宽度,中间宽度自适应。 1 float实现 基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后,否则右侧会沉在中间内容的下侧 原理:元素浮动后,脱离文档流,后面的元素受浮动影响,设置受影响元素的margi...
摘要:解析四种常用方法以及原理浮动浮动内嵌定位。浮动元素高度为,浮动盒子层级比块级水平盒子高,比水平盒子低。中间元素用,防止内容跑到左右两块定位元素下面被遮盖。我在左边我在中间,自动占据剩余空间我在右边原理布局,子元素默认水平排列。 解析四种常用方法以及原理:浮动、浮动内嵌 div、定位、flex。 浮动 .wrap {background: #eee; padding: 20px...
1、定位 我是左边,我是固定的 我是中间,我是自适应的,左边右边都position固定了,他们脱离了文档流,我终于得到机会挤进中间啦!只要我margin一下就没人会挡住我啦!我可真是个小机灵鬼(同时,我还是个自由人,我div写在开头中间结尾都可以呢) 我是右边,我也是固定的 *{ margin:0; padding: 0; } .l...
css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不够称不开整个宽度 1.1.2 左右固定部位,使用margin-left :负数,使其左右靠齐 1.1.3 中间自适应部分嵌套一个div,设置m...
摘要:三列布局,左右固定宽度右边自适应不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局自适应部分一定要放第一个位子,使用浮动,并且设置宽度为,不设置浮动元素内容不够称不开整个宽度左右固定部位,使用负数,使其左右靠齐中间自适应部分嵌套一css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使...
阅读 1793·2021-11-24 09:39
阅读 2462·2021-10-14 09:43
阅读 3300·2021-10-08 10:10
阅读 2204·2021-09-22 15:54
阅读 2320·2019-08-29 17:20
阅读 1553·2019-08-28 18:14
阅读 2357·2019-08-26 13:28
阅读 1088·2019-08-26 12:16