CSS行内元素和块元素的区别及display属性

1.行内元素和块元素的区别

内联元素(行内元素)

<span>、<a>、<img/>、<strong>、<em>、<i>

块级元素 

<h1>…<h6>、<p>、<div>、列表

内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

块元素会独占一行，其宽度自动填满其父元素宽度

行内元素不会独占一行，相邻的行内元素会排列在同一行里直到一行排不下，才会换行，其宽度随元素的内容而变化

块级元素可以设置 width, height属性，行内元素设置width, height无效

块级元素可以设置margin 和 padding

2.display属性

2.1隐藏元素

div{

       width: 200px;

       height: 100px;

       background: red;

设置元素不会被显示：display:none;

        }

2.2块级元素与行内元素的转变

div{

        width: 200px;

        height: 200px;

        background:yellow; 

        display: inline;

        }

把块元素转成了行内元素 display: inline; 元素会被显示为内联元素

span{

        width: 200px;

        height: 200px;

        background:yellow; 

        display: block;

        } 把行内元素转成块元素 元素会被显示为块级元素

2.3怎么才能让两个div在同一行显示

设置inline-block   行内块元素

• 行内块元素具有块元素的一切特性 比如可以设置宽高 具有margin和padding
• 唯一不同的特性就是：不会独占一行 两个都是inline-block可以并列排
• 🔺 两个div之间会产生空隙 原因是标签之间的空白区域引起的

解决方法一：把两个div靠在一起写 保证没有空格

解决方法二：给他们的父级标签加上样式font-size:0;