深入理解盒子模型-学习总结！！

深入理解盒子模型-学习总结！！

标准盒模型

• 由文本内容、内边距、border、margin组成
• 文本盒子：height、width划定的文本内容盒子，color、text、font、line-height对其有效
• 真实盒子：不考虑margin的真实盒子，background对其有效
• 空间盒子：包含外边距margin的盒子，只是为了方便隔开相邻盒子，纯粹为了方便排版布局！！

其他盒模型

+请大神补充坑位！！！

盒模型类型

• 基本类型：block，inline-block，inline等

  区别如下：

  • inline-block和inline盒模型，盒子之间会出现空隙，而且不易消除，大小由你的font-size属性决定

    

    解决的办法：给你的父级元素添加font-size：0，，由于字体的继承性，你必须重新为你的子元素设置字体大小想要了解更多方法，可以参考：https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-去除间距/

    

• CSS3新引入弹性盒子模型：flex

  总的来说：功能very very强大，结合float及position定位优缺点，谁用谁知道 ，参考博文链接：https://www.cnblogs.com/webbest/p/5638630.html

  ???????????