子元素随父元素宽度而变大

Question

为什么子元素会随父元素被撑大而改变自身宽度；

<div class="parent">
    <div class="info">
        <span class="name">大哥</span>
        <span class="time">2015年12月04日 15:48:02</span>
    </div>
    <div class="msg">1</div>
</div>

.parent{
   position：relative;
}
.msg{
   //没有设置宽度
    margin-left：100px；
}

Answer 1

<div>标签是块级元素，独占一行，宽度默认是父元素的100%，所以当父元素的宽度变化时，其子元素<div>的宽度也会随之变化。
禁止随父元素宽度变化，解决方法：自定义宽度，且单位不能用百分号%。

Answer 2

.msg{
//没有设置宽度

margin-left：100px；

}
不写宽度和写width:100%是一回事
除非是行内置换元素：img、select、input、textarea、object，这些浏览器会有默认宽高

Answer 3

给msg的宽度设定为：width:fit-content; 对块内内容进行一个自适应，但是不能再对其设定固定的宽度。

Answer 4

http://www.layui.com/demo/lay...
这个链接希望对你有帮助，上面有源码可以看哈