摘要：解析四种常用方法以及原理浮动浮动内嵌定位。浮动元素高度为，浮动盒子层级比块级水平盒子高，比水平盒子低。中间元素用，防止内容跑到左右两块定位元素下面被遮盖。我在左边我在中间，自动占据剩余空间我在右边原理布局，子元素默认水平排列。
解析四种常用方法以及原理：浮动、浮动内嵌 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 自适应部分一定要放第一个位子，使...
阅读 1890·2021-11-24 09:39
阅读 2533·2021-10-14 09:43
阅读 3317·2021-10-08 10:10
阅读 2264·2021-09-22 15:54
阅读 2338·2019-08-29 17:20
阅读 1572·2019-08-28 18:14
阅读 2373·2019-08-26 13:28
阅读 1111·2019-08-26 12:16
