CSS元素宽度、继承父元素宽度、cale函数计算宽度总结

1.元素不设置宽度

第一种情况，元素在文档流中

结论1：文档流中元素不设置宽度时，元素宽度继承父元素的宽度

第二种情况，元素脱离文档流(position:absolute或position:fixed或浮动float等)

结论2：脱离文档流的元素不设置宽度时，元素宽度由内容撑开

2.元素设置宽度100%时

第一种情况，元素在文档流中

结论3：文档流中元素设置宽度100%时，元素宽度为父元素的100%

第二种情况，元素脱离文档流

结论4：浮动元素宽度为父元素的100%，position绝对定位的元素宽度为offset-parent宽度的100%，fixed固定定位的元素宽度始终为body的100%

其他

    width:max-content;  设置元素宽度由子元素撑开

calc

calc是一个函数，用来计算元素的长度或者宽度

.box {
    width:90%;
    width: -moz-calc(100% - (10px + 20px) * 2);
    width: -webkit-calc(100% - (10px + 20px) * 2);
    width: calc(100% - (10px + 20px) * 2);
}

calc()的运算规则

• 使用“+”、“-”、“*” 和 “/”四则运算；
• 可以使用百分比、px、em、rem等单位；
• 可以混合使用各种单位进行计算；
• 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
• 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

浏览器的兼容性

浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，
不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。