`

css块级元素和行内元素详细解析

    博客分类:
  • css
css 
阅读更多
块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别。

  常见块级元素:div  p  form ul ol li 等;

  常见的行内元素:span stronh em;

它们的区别主要有以下几点:

  1.块级元素独自占一行且宽度会占满父元素宽度,行内元素不会独占一行,相邻行内元素可以排在同一行。

  如图:

复制代码
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style type="text/css">
   
   

    </style>
</head>
<body>
        <p>块级元素一</p>
        <p>块级元素二</p>
        <span>行内元素一</span>
        <span>行内元素二</span>
   
</body>
复制代码
  2.块级元素可以设置weith和height,行内元素设置width和height无效,而且块级元素即使设置宽度也还是独占一行。

如图:

复制代码
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style type="text/css">
    p{background-color: red;height: 50px;width: 50%;}
    div{background-color: green;height: 50px;width: 40%;}
    span{background-color: gray;height: 70px;}
    strong{background-color: blue;height: 70px;}
    </style>
</head>
<body>
        <p>块级元素一</p>
        <div>块级元素二</div>
        <span>行内元素一</span>
        <strong>行内元素二</strong>
   
</body>
复制代码


  3.块级元素可以设置margin和padding属性,行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果,但是竖直方向的如padding-top和margin-bottom不会产生边距效果

复制代码
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style type="text/css">
    p{background-color: red;height: 50px;width: 50%;padding: 20px;margin: 20px;}
    div{background-color: green;height: 50px;width: 40%;;padding: 20px;margin: 20px;}
    span{background-color: gray;height: 70px;padding: 40px;margin: 20px;}
    strong{background-color: blue;height: 70px;padding: 40px;margin: 20px;}
    </style>
</head>
<body>
        <p>块级元素一</p>
        <div>块级元素二</div>
        <span>行内元素一</span>
        <strong>行内元素二</strong>
   
</body>
复制代码


  4.最后是块级元素和行内元素的相关属性:display

  其中块级元素对应display:block,行内元素对应display:inline。可以通过修改元素的display属性来切换行内元素和块级元素。

如图:

补充说明一个属性:display:inline-block;可以让元素具有块级元素和行内元素的特性:既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。是一个很实用的属性
分享到:
评论

相关推荐

    CSS文档流与块级元素(block)、内联元素(inline)

    通过本文的介绍,我们了解了文档流的基本概念以及块级元素和内联元素的区别。这些基础知识对于理解和掌握CSS布局至关重要。在实际开发中,灵活运用这些元素的不同特性可以帮助我们构建更加美观和实用的网页布局。

    CSS行内框架构

    本文将详细解析CSS中的行高(line-height)以及与其相关的概念,包括基线、底线、顶线、行距、内容区、行内框和行框,同时探讨元素如何影响行高。 1. **基线、底线、顶线** - **基线(Baseline)**:在CSS中,基线...

    div+css盒子模型标签解析.docx

    理解并熟练运用CSS盒模型以及块级元素和内联元素的概念,能帮助开发者更精确地控制网页的布局,实现复杂的设计需求。在实际开发中,经常需要根据需要调整元素的`display`属性,以达到理想的视觉效果。

    html+css笔记.docx

    HTML 和 CSS 是构建网页的基本语言,本篇笔记主要涵盖了HTML表格、字符间距、链接样式、CSS选择器、ID与类选择器的使用、以及行内元素与块级元素的转换等多个知识点。 首先,HTML表格中,`&lt;tr&gt;` 用于定义表格行,`...

    css中替换元素和不可替换元素及显示元素详细探讨

    主要分为两类:替换元素和不可替换元素,同时,根据它们在页面布局中的行为,还可以进一步分为块级元素和行内元素。 **替换元素**是指那些浏览器根据元素自身的标签和属性来确定其显示内容的元素。比如,`&lt;img&gt;`...

    css+div入门教程(很详细)

    2. 布局控制:通过CSS的display属性,可以将Div设置为块级元素或行内元素,实现流式布局、网格布局或定位布局。position属性则用于绝对定位和相对定位,使元素能在页面上的任意位置。 3. 定位与浮动:float属性可以...

    div+css盒子模型标签解析.pdf

    例如,`&lt;div&gt;`, `&lt;p&gt;`, `&lt;h1&gt;`到`&lt;h6&gt;`, `&lt;form&gt;`, `&lt;ul&gt;` 和 `&lt;li&gt;` 都是块级元素。 - 块级元素可以设置高度、行高、顶部和底部边距,宽度默认占据其容器的100%,除非明确指定宽度。 - 这些元素通常用于创建大型...

    XHTML和CSS中文版

    例如,我们可以使用`color`属性来改变文本颜色,`margin`和`padding`属性来调整元素的边距和内边距,`display`属性来决定元素的显示方式(如块级元素或行内元素)。 在"HTML和CSS网页标准指南.chm"这个文件中,可能...

    HTML&CSS学习笔记.pdf

    学习HTML需要掌握其基本标签、标签结构、块级元素和行内元素的区分、文本格式化标签以及W3C规范等知识。在开发过程中,应当选择合适的标签来构建网页内容,并注意遵守行业标准和最佳实践,以确保网页的可访问性和...

    DIV+CSS学习文档

    1. 块级元素与行内元素:`DIV`作为块级元素,可以独占一行,而行内元素如`span`则可以并排显示。通过`display`属性,可以相互转换这两种元素的类型。 2. 定位:`CSS`提供了绝对定位(`position: absolute`)、相对...

    CSS 同级元素浮动分析小结

    本文将从几个方面详细解析CSS同级元素浮动的概念、影响、以及常见的使用场景。 首先,关于CSS中浮动的基本概念,浮动是一种使得元素脱离正常的文档流,从而允许它向左或向右移动,直到它的外边缘碰到包含框或另一个...

    重要知识XHTML标签的嵌套规则.pdf

    块级元素和内联元素的主要区别在于它们在页面布局中的表现形式。块级元素如`&lt;div&gt;`, `&lt;h1&gt;`, `&lt;p&gt;`等,会自然地在垂直方向上产生新的行,而内联元素如`&lt;span&gt;`, `&lt;a&gt;`, `&lt;em&gt;`等则保持在当前行内,允许文本和其他...

    别具光芒css+div

    通过设置CSS的display属性,我们可以让DIV呈现为块级元素或行内元素,从而实现流式布局、网格布局或相对定位等不同的布局模式。同时,利用浮动(float)和清除(clear)属性,可以解决复杂的多列布局问题。 此外,...

    web前端面试题(含答案).doc

    * 块级元素可以包含行内元素和块级元素,而行内元素不能包含块级元素。 * CSS 隐藏元素的方法有三种:display:none、visibility:hidden 和 opacity:0。 * 清除浮动的方法有三种:使用带 clear 属性的空元素、使用 ...

    html和css笔记

    - **标题与内容**:`&lt;title&gt;`用于定义页面标题,`&lt;h1&gt;`至`&lt;h6&gt;`用于不同级别的标题,`&lt;p&gt;`表示段落,`&lt;div&gt;`和`&lt;span&gt;`分别代表块级元素和行内元素。 - **文本样式**:`&lt;b&gt;`、`&lt;strong&gt;`表示粗体,`&lt;i&gt;`、`&lt;em&gt;`表示...

    简约的DIV+CSS模板

    通过CSS,可以灵活地将元素转换为块级或行内元素,调整其在页面上的显示方式。 2. 层叠性:CSS的层叠性使得多个样式规则可以共同作用于一个元素,按照优先级决定最终效果,这为复杂布局提供了可能。 3. 定位机制:...

    Web前端技术试题[汇编].pdf

    2. HTML 中的元素可分为块级元素和行内元素,`&lt;p&gt;` 是块级元素。 知识点:HTML 元素、块级元素、行内元素、元素分类。 3. 在 XHTML 规范中,HTML 语句 ` ` 不符合规范,而 ` ` 符合规范。 知识点:XHTML ...

    CSS实现元素居中原理解析

    文章中提及的两种元素类型——行内元素和块级元素,它们的居中方式有着本质区别,下面详细解析这两种元素居中的原理及其方法。 首先来了解一下行内元素的居中方式。行内元素(Inline Elements),指的是那些被包含...

Global site tag (gtag.js) - Google Analytics