网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发 > css

内联元素(inline)和块级元素(block)有什么区别?

2021/9/5 12:36:29

什么是内联元素? 内联元素(html规范中的概念)英文:inline element,其中文叫法有多种,如:内联元素、内嵌元素、行内元素、直进式元素等。基本上没有统一的翻译。另外提到内联元素,通常会涉及到的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界…

        什么是内联元素?

        内联元素html规范中的概念)英文:inline element,其中文叫法有多种,如:内联元素、内嵌元素、行内元素、直进式元素等。基本上没有统一的翻译。另外提到内联元素,通常会涉及到的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。

        HTML中都包含哪些内联元素(inline)?

        a – 锚点 

        abbr – 缩写 

        b – 粗体(不推荐) 

        big – 大字体 

        br – 换行 

        cite – 引用 

        code – 计算机代码(在引用源码的时候需要) 

        em – 强调 

        font – 字体设定(不推荐) 

        i – 斜体 

        img – 图片 

        input – 输入框 

        kbd – 定义键盘文本 

        label – 表格标签 

        q – 短引用 

        span – 常用内联容器,定义文本内区块 

        strong – 粗体强调 

        textarea – 多行文本输入框 

         什么是块级元素?

        HTML(超文本标记语言)中元素大多数都是“块级”元素或行内元素 (en-US)。块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。

        HTML中都包含哪些块级元素(block)?

        address – 地址 

        blockquote – 块引用 

        dir – 目录列表 

        div – 常用块级容易,也是CSS layout的主要标签 

        dl – 定义列表 

        fieldset – form控制组 

        form – 交互表单 

        h1 – h6 标题 

        hr – 水平分隔线 

        menu – 菜单列表 

        ol – 有序表单 

        p – 段落 

        pre – 格式化文本 

        table – 表格 

        ul – 无序列表 

        li – 定义列表项目

        内联元素与块级元素的区别

        1、内联元素(inline)不会独占一行,相邻的内联元素会排在同一行。其宽度随内容的变化而变化。 块级元素会独占一行,默认情况下宽度自动填满其父元素宽度 。

        2、内联元素不可以设置宽高 ;块级元素可以设置宽高 。

        3、内联元素可以设置margin,padding,但只在水平方向有效。块级元素可以设置margin,padding。

          通过以上内容我们知道了内联元素(inline)和块级元素(block)有什么区别,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

  • css实现多种促销banner样式

    电商节双十一、双十二经常需要搞促销,今天我们就来介绍几款通过css实现的促销banner样式,如下图所示:<html><head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https…

    2022/11/24 12:06:35
  • css实现漂亮的苹果风格组件效果

    苹果IOS系统的界面很漂亮,今天我们就用css实现漂亮的类似苹果风格的组件效果。如下图所示:<html><head> <meta charset="UTF-8"><style data-styles="">ion-icon{visibility:hidden}.hydrated{visibility:inherit}</st…

    2022/11/24 10:36:42
  • css实现图片和背景同时滑动的酷炫效果

    我们曾经介绍过很多种图片滑动的效果,今天我们使用css实现一个图片和背景同时滑动的酷炫效果,如下图所示:<html><head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href…

    2022/11/22 21:57:11
  • css实现酷炫Flash文字跳动动画效果

    Flash虽然已被淘汰了,但它所实现的一些效果还是非常棒的,今天我们就用css实现一个酷炫的Flash文字跳动的经典动画效果,如下图所示:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <link rel="apple-touch-icon…

    2022/11/22 21:39:50
  • 设置英文首字母大写的css属性是什么?

    设置CSS text-transform 的属性为capitalize就可以实现英文首字母大写。 定义和用法  text-transform 属性控制文本的大小写。 属性值 值 描 述 none 默认。定义带有小写字…

    2021/7/14 20:35:17
  • 只让页面显示横滚动条,不显示竖滚动条如何实现?

    只让页面显示横滚动条,不显示竖滚动条的方法其实很简单,主要用到body的两个css属性 overflow和 overflow-y,如下所示:body { overflow:scroll; overflow-y:hidden;}

    2021/2/28 21:45:25
  • 网页的滚动条样式可以修改吗?如何修改?

    网页的滚动条样式可以修改的,主要是使用css来控制那如何修改呢?如下代码:<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="hei…

    2021/2/28 21:15:24
  • css如何实现6张图片均匀排列在一行?

    css部分如下:img{width:120px; height:80px;float:left;margin-right:16px;}.img3{margin-right:0;}html部分如下:<img src="images/001.jpg" /><img src="images/002.jpg" /><img src="images/003.jpg" /><img src=…

    2021/2/28 21:10:01