五、元素的显示模式 块元素、行内元素、行内块元素特点区别 常用标签1.块元素/块级元素block独占一行从上到下排列默认宽度撑满父元素默认高度由内容撑开可通过CSS设置宽高。常见块元素div、p、ul、li、table、h1-h6、form等2.行内元素/内联元素inline不独占一行一行中不能容纳的会在下一行继续从左到右排列默认宽度、默认高度都由内容撑开不能通过CSS设置宽高width 和 height。margin 和 padding 左右有效上下无效。常见行内元素span、a、i、label、strong、em等3.行内块元素inline-block不独占一行可以通过CSS设置宽高margin 和 padding 四个方向都有效。常见行内块元素img、input、button、select等4.如何把行内元素变为行内块元素或块元素设置元素display属性为 inline-block 或 block 。5.空元素上面的块元素、行内元素、行内块元素是从显示模式上区分的。还有一种划分方式是从结构上看即标签有没有闭合标签能不能包裹内容。例如div/div、p/p、span/span这一类标签有闭合标签中间包裹内容就不是空元素。常见空元素img、input、br、hr等。六、display属性常用值1.block块元素2.inline行内元素3.inline-block行内块元素4.none隐藏下一题详细说明5.flex弹性盒布局是现在最常用的布局方式。七、display: none; 和 visibility: hidden; 的区别两者都是 CSS 属性用于控制元素的可见性。1. display: none;元素完全从文档流中移除不仅不可见还不再占据空间页面布局会重新计算不参与任何交互子元素也全部消失。2. visibility: hidden;元素仍处于文档流中不可见但仍占据空间页面布局不会重新计算仍可交互只是不可见子元素会继承 visibility: hidden; 若设置子元素 visibility: visible; 则子元素可以单独显示。补充这里可以搜一下文档流的概念个人理解是文档流就像一群人在地上排队有的人飘到天上就是脱离文档流脱离之后排在后面的人就会往前挪补上这个人的位置。display: none就相当于队伍里彻底没有这个人了后面的人会补上但 visibility: hidden; 只是让这个人隐身实际上他还在后面的人不能往前动。写在后面打算开一个八股系列主要是想鼓励自己坚持学习。有错误的地方欢迎大家指出。