IDEA2023.1.3破解,IDEA破解,IDEA 2023.1破解,最新IDEA激活码

行内元素和块级元素

IDEA2023.1.3破解,IDEA破解,IDEA 2023.1破解,最新IDEA激活码

行内元素和块级元素

HTML可以将元素种类分为行内元素、块级元素和行内块级元素三种,在使用过程中可以通过CSSdisplay属性相互转换。

行内元素

行内元素对应的CSS样式设置为display: inline;

特点

  • 元素排在一行
  • 封闭后不会自动换行
  • 不能指定高度与宽度
  • 可以使用line-height来指定高度
  • 外边距对于水平方向有效,垂直方向无效
  • 内边距对于水平方向正常有效,垂直方向只有效果,对其他元素无任何影响

示例

<span>行内元素1</span> <!-- 排列在一行 -->
<span>行内元素2</span> <!-- 排列在一行 -->
<span>行内元素3</span> <!-- 排列在一行 -->
<style type="text/css">
    span{
        width: 1000px; /* 指定宽度无效果 */
        height: 1000px; /* 指定高度无效果 */
        color: #333;
        background: #eee;

        padding: 100px 20px; /* padding对于水平方向正常有效,垂直方向只有效果,对其他元素无任何影响 */
        margin: 100px 20px; /* margin水平方向有效,垂直方向无效 */
    }
</style>

常见行内元素

<a><span><b><big><i><small><tt><abbr><acronym><cite><code><dfn><em><kbd><strong><samp><var><bdo><br><img><iframe><map><object><q><script><sub><sup><button><input><label><select><textarea>

块级元素

块级元素对应的CSS样式设置为display: block;

特点

  • 独占一行
  • 封闭后自动换行
  • 默认宽度为100%
  • 可以指定宽度和高度
  • 内外边距对于四个方向有效

示例

<div>块级元素1</div> <!-- 独占一行 -->
<div>块级元素2</div> <!-- 自动换行 -->
<style type="text/css">
    div{
        width: 100px; /* 不指定则默认宽度100% */
        height: 100px; /* 可以指定高度 */
        color: #333;
        background: #eee;

        padding: 10px 20px; /* padding的设置在四个方向都有效 */
        margin: 10px 20px; /* margin的设置在四个方向都有效 */
    }
</style>

常见块级元素

<div><address><article><aside><audio><blockquote><canvas><dd><dl><fieldset><figcaption><figure><footer><form><h1>~<h6><header><hgroup><hr><noscript><ol><output><p><pre><section><table><tfoot><ul><video>

行内块级元素

行内块级元素对应的CSS样式设置为display: inline-block;

特点

  • 可以指定宽度和高度
  • 内外边距对于四个方向有效
  • 元素排在一行,但是会有空白缝隙

示例

<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<style type="text/css">
    input{
        width: 100px; /* 可以指定宽度 */
        height: 100px; /* 可以指定高度 */

        padding: 10px 20px; /* padding的设置在四个方向都有效 */
        margin: 100px 20px; /* margin的设置在四个方向都有效 */
    }
</style>

常见行内块级元素

<input><img><button><iframe><textarea><select>

代码示例

<!DOCTYPE html>
<html>
<head>
    <title>行内元素与块级元素</title>
    <style type="text/css">
        div{
            width: 100px; /* 不指定则默认宽度100% */
            height: 100px; /* 可以指定高度 */
            color: #333;
            background: #eee;

            padding: 10px 20px; /* padding的设置在四个方向都有效 */
            margin: 10px 20px; /* margin的设置在四个方向都有效 */
        }

        span{
            width: 1000px; /* 无法指定宽度 */
            height: 1000px; /* 无法指定高度 */
            color: #333;
            background: #eee;

            padding: 100px 20px; /* padding对于水平方向正常有效,垂直方向只有效果,对其他元素无任何影响 */
            margin: 100px 20px; /* margin水平方向有效,垂直方向无效 */
        }

        input{
            width: 100px; /* 可以指定宽度 */
            height: 100px; /* 可以指定高度 */

            padding: 10px 20px; /* padding的设置在四个方向都有效 */
            margin: 100px 20px; /* margin的设置在四个方向都有效 */
        }


    </style>
</head>
<body>

    <section>
        <div>块级元素1</div> <!-- 独占一行 -->
        <div>块级元素2</div> <!-- 自动换行 -->
    </section>


    <section >
        <span>行内元素1</span> <!-- 排列在一行 -->
        <span>行内元素2</span> <!-- 排列在一行 -->
        <span>行内元素3</span> <!-- 排列在一行 -->
    </section>

    <section >
        <input /><!-- 排列在一行 -->
        <input /><!-- 排列在一行 -->
        <input /><!-- 排列在一行 -->
    </section>


</body>
</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://developer.mozilla.org/zh-CN/docs/Web/HTML
https://blog.csdn.net/zhanglir333/article/details/79178370
https://www.jeffjade.com/2015/06/24/2015-06-24-css-block-inline/

文章永久链接:https://tech.souyunku.com/?p=39715


Warning: A non-numeric value encountered in /data/wangzhan/tech.souyunku.com.wp/wp-content/themes/dux/functions-theme.php on line 1154
赞(95) 打赏



未经允许不得转载:搜云库技术团队 » 行内元素和块级元素

IDEA2023.1.3破解,IDEA破解,IDEA 2023.1破解,最新IDEA激活码
IDEA2023.1.3破解,IDEA破解,IDEA 2023.1破解,最新IDEA激活码

评论 抢沙发

大前端WP主题 更专业 更方便

联系我们联系我们

觉得文章有用就打赏一下文章作者

微信扫一扫打赏

微信扫一扫打赏


Fatal error: Uncaught Exception: Cache directory not writable. Comet Cache needs this directory please: `/data/wangzhan/tech.souyunku.com.wp/wp-content/cache/comet-cache/cache/https/tech-souyunku-com/index.q`. Set permissions to `755` or higher; `777` might be needed in some cases. in /data/wangzhan/tech.souyunku.com.wp/wp-content/plugins/comet-cache/src/includes/traits/Ac/ObUtils.php:367 Stack trace: #0 [internal function]: WebSharks\CometCache\Classes\AdvancedCache->outputBufferCallbackHandler() #1 /data/wangzhan/tech.souyunku.com.wp/wp-includes/functions.php(5109): ob_end_flush() #2 /data/wangzhan/tech.souyunku.com.wp/wp-includes/class-wp-hook.php(303): wp_ob_end_flush_all() #3 /data/wangzhan/tech.souyunku.com.wp/wp-includes/class-wp-hook.php(327): WP_Hook->apply_filters() #4 /data/wangzhan/tech.souyunku.com.wp/wp-includes/plugin.php(470): WP_Hook->do_action() #5 /data/wangzhan/tech.souyunku.com.wp/wp-includes/load.php(1097): do_action() #6 [internal function]: shutdown_action_hook() #7 {main} thrown in /data/wangzhan/tech.souyunku.com.wp/wp-content/plugins/comet-cache/src/includes/traits/Ac/ObUtils.php on line 367