块级元素 和行内元素的区别

块级元素会独占一行，默认情况下，其宽度自动填满其父元素宽度，行内元素不会独占一行，

相邻的行内元素会排列在同一行里，

直到一行排不下，才会换行，其宽度随元素的内容而变化

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>简单实例</title>
    </head>
    <style type="text/css">
        p{background: red;}
        div{background: yellow;}
        span{background: blue;}
        strong{background: green;}
    </style>
    <body>
        <p>块级元素 p</p><div>块级元素 div</div><span>行内元素 span</span><strong>
            行内元素 strong</strong>
        
    </body>
</html>
复制代码

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

块级元素设置宽度，仍然是独占一行的

行内元素--水平方向的padding-left  margin-left都会产生了边距效果---但是竖直方向的--padding-top bottom 却不会

---块级元素和行内元素的css相关属性是display

  块级元素---display:block,行内元素---display:inline

  我们可以通过修改display属性来切换块级元素和行内元素

 

posted @   小白咚  阅读(209)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手