search

haizlin / fe-interview

前端面试每日 3+1，以面试题来驱动学习，提倡每日学习与思考，每天进步一点！每天早上5点纯手工发布面试题（死磕自己，愉悦大家），6000+道前端面试题全面覆盖，HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……
http://www.h-camel.com
MIT License
25.39k stars 3.25k forks source link

[css] 第57天 inline、block、inline-block这三个属性值有什么区别？ #237

Open haizhilin2013 opened 5 years ago

haizhilin2013 commented 5 years ago

第57天 inline、block、inline-block这三个属性值有什么区别？

xiangshuo1992 commented 5 years ago

CSS显示模块分为内部显示类型和外部显示类型，内部显示类型是定义子元素如何参与内部布局，外部显示类型定义了父元素如何参与外部整个文档流的布局，所以 inline-> inline-inline block-> block-block inline-block-> inline-block

他们的区别是分两块的，也就是内外部显示类型，参与文档布局的内外区别。

MY729 commented 5 years ago

inline： 行内元素，元素不独占一行，不可以修改宽高 block： 块级元素，元素独占一行，可以修改宽高 inline-block： 行内块级元素，元素不独占一行，并且可以修改宽高

LeiDeMing commented 4 years ago

每个元素都两个盒子，外在盒子和内在盒子。外在盒子负责元素是可以一行显示，还是只能换行显示；内在盒子负责宽高、内容呈现什么的。 外在盒子-内在盒子 from 《css世界》

mengfei2611 commented 4 years ago

inline： 行内元素，元素独占一行，不可以修改宽高 block： 块级元素，元素不独占一行，可以修改宽高 inline-block： 行内块级元素，元素不独占一行，并且可以修改宽高

smile-2008 commented 3 years ago

inline： 行内元素，元素不独占一行，不可以修改宽高 block： 块级元素，元素独占一行，可以修改宽高 inline-block： 行内块级元素，元素不独占一行，并且可以修改宽高