深入理解盒子模型-学习总结!!
深入理解盒子模型-学习总结!!
文章目录
标准盒模型
- 由文本内容、内边距、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
???????????