css inline-block 绝对定位会展示宽度

作者: 心淡然如水 | 来源:发表于2021-02-03 09:10 被阅读0次

css inline-block 绝对定位会展示宽度
CSS实现三栏网页宽度自适应
css实现三栏布局，两边固定，中间自适应
初级前端css面试题整理
瀑布流布局
CSS定位
CSS垂直居中
CSS之宽度与高度
css 定位浮动
用四种方法实现轮播图

代码试例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    .div1{background: red;}
    .div2{background: yellow;}

    .way1>.div1{float:left;width: 200px;height:100px;}
    .way1>.div2{margin-left: 200px;height: 100px;}

    .way2{display: flex;}
    .way2>.div1{width: 200px;height: 100px;}
    .way2>.div2{flex: 1;height: 100px;}

    .way3{position: relative;}
    .way3>.div1{width: 200px;height:100px;display: inline-block;}
    .way3>.div2{height: 100px;position:absolute;left: 200px;right:0;display: inline-block;}
  .span12 {width: 1000px;}
</style>
<script>
</script>
<body>
    <!-- 两栏式布局，一方固定，一方自适应 -->
    <!-- 方法1 浮动布局和margin-left,利用了块级元素占满一行的特性-->
    <h1>方法2</h1>
    <div class="way1">
        <div class="div1">
      <span class="span12">fasd</span>
    </div>
        <div class="div2"></div>
    </div>

    <!-- 方法2 flex布局-->
    <h1>方法2</h1>
    <div class="way2">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>

    <!-- 方法3 display+相对定位绝对定位方法-->
    <h1>方法3</h1>
    <div class="way3">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>      
</body>
</html>

参见CSS2.1规范的9.7
https://www.w3.org/TR/2009/CR-CSS2-20090908/visuren.html#dis-pos-flo

> #### 9.7 Relationships between 'display', 'position', and 'float'
> 
> The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows:
> 
> If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.
> Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
> Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below.
> Otherwise, if the element is the root element, 'display' is set according to the table below.
> Otherwise, the remaining 'display' property values apply as specified.
> 
> | Specified value | Computed value |
> | --- | --- |
> | inline-table | table |
> | inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block | block |
> | others | same as specified |

==>

display,position和float属性都能影响元素的显示及其位置，它们之间会相互影响:

如果display属性被显式的设置为none，那么position和float属性无论设置什么值或是否设置，都不起作用，页面上将将看不到元素
如上面条件1不满足，但position属性设置为absolute和fixed，元素将被绝对定位，那么float属性将被设置为none，无论其被显式的设置为什么值。display属性值将被重新计算，计算规则如下表所示，元素的位置将由相对于元素包含块的top，left，bottom，left值决定
如上面条件2不满足，但position属性设置为非absoulte、fixed，为relative、static或没有设置，那么看float属性的设置，如果float值为非none值，为left，right等，那么元素将被浮动，float不会被重新计算，top，left等值能起作用（如果设置过得话），display属性将被重新计算，计算规则如下表所示
如上面条件3不满足，（display属性没有设置，position属性保持默认，float属性也没设置）但是这个元素为一个根元素（一般为body），那么display属性将被重新计算，计算规则如下表所示
其它情况下，display属性保持指定值不变

position/float/display关系表

N/A	position:absolut,fixed	position:relative,satic	float:none	float:left,right...
position:absolut,fixed	N/A	N/A	元素不显示	等同float为none
position:relative,satic	N/A	N/A	元素不显示	按下表所示计算
float:none	按下表所示计算	保持不变	N/A	N/A
float:left,right....	等同float为none	按下表所示计算	N/A	N/A

display计算规则

Specified value	Computed value
inline-table	table
inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
others	same as specified