标签：none 行内 元素 宽高 学习 HTML inline 第五天 block
元素类型
元素类型分类：
-根据css显示 元素类型可分为 块级元素/块状/块元素、行内元素/内联元素、可变元素（从行内元素中扩展出的行内元素）
块元素：
-常见的块元素：div、ul、li、p、h、ol...
- 块元素可以直接设置宽高大小。
- 块元素无论宽高大小是多少都会独占一行
- 块元素默认上下排列
作用：
-块元素可以嵌套其他类型或者行内元素（作为盒子实现页面布局）
行内元素：
常见行内元素：a、span、i、em、b、strong.....
特点：
- 行内元素不可以直接设置宽高大小，它的宽高大小是由内容决定的
- 行内元素默认在一行内逐个显示，除非宽度不够。
- 常见的bug:设置margin-top/bottom没有效果，但是它的计算方式依然遵循盒模型的计算方式
可变元素（表示根据上下文关系改变当前元素的类型）
行内块元素的特点：
常见：input、img
-可以直接设置宽高大小
-可以在一行内逐个显示
-所有的行内块元素都是以基线对齐（基线是一条虚拟线，每个标签的基线位置不一致），解决方法：设置vertical-align:top\bottom\middle
元素的转变：
属性：display
属性值：block\inline\inline-block\list-item\none
-block （块） 将其他元素转换为块元素
-inline （行内） 将其他元素转换为行内元素
-inline-block （行内块元素） 将其转换为行内块元素
-list-item （列表元素） 将其他元素转为列表
-none:
- list-style: 清除列表的默认样式
- text-decoration 清除a标签的默认下划线
- background/border
- outline：none 清除表单输入框的自带边框
- display：none 隐藏 把结构删除 不占位置，display:block 显示
重点：当元素浮动后就会转变为行内块元素，具有块元素的特点
置换元素：有初始的宽高大小，并且可以通过修改属性的属性值 显示不同的样子。
常见的有：img、input、
非置换元素：相反。
标签：none,行内,元素,宽高,学习,HTML,inline,第五天,block 来源： https://blog.csdn.net/weixin_58418115/article/details/121507660
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。