css块元素和行内元素的特点

在CSS中，元素可以分为两种类型：块元素和行内元素。这两种元素具有不同的特点和使用场景，下面将介绍它们的具体特点。

块元素

    p{
        display:block;
    }

块元素是指在HTML中独自占据一行或多行的元素。常见的块元素有div、p、h1~h6、ul、ol等。

块元素的特点：

• 默认情况下，块元素会独占一行，宽度自适应父元素宽度，高度根据内容自动撑开。
• 块元素可以包含行内元素、块元素、以及其他元素。
• 块元素可以设置宽度、高度、内边距、外边距、边框等样式属性。
• 块元素可以通过CSS设置为不显示（display:none）或者隐藏（visibility:hidden）

行内元素

    span{
        display:inline;
    }

行内元素是指在HTML中不会独自占据一行，而是在一行内与其他元素共存的元素。常见的行内元素有a、span、img、input等。

行内元素的特点：

• 默认情况下，行内元素不会独占一行，宽度根据内容自适应。
• 行内元素不能包含块元素，只能包含其他行内元素和文本。
• 行内元素可以设置宽度、高度、内边距、外边距、边框等样式属性，但是设置宽度和高度会改变元素的类型（display）。
• 要将行内元素设置为块元素，可以使用CSS的display属性进行设置。

总之，掌握块元素和行内元素的特点和使用场景，对于前端开发者来说是非常重要的。在实际工作中，需要根据需求来选择使用合适的元素，以达到最佳的效果。