一、典型代表

  • input
  • img

二、特点：

  • 在一行上显示
  • 可以设置宽高
  1. <style type="text/css">
  2.         img{
  3.             width: 300px;
  4.            /* 顶部对齐           */
  5.             vertical-align: top;
  6.         }
  7.         input{
  8.             width: 300px;
  9.             height: 200px;
  10.             background-color: blue;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <img src="../2.26/picture.jpg" alt="">
  16.     <input type="text">
  17. </body>
  • 补充:行内块与行内块之间的空隙：如果两个span在HTML这样放置,会出现空隙,使用浮动可以去除这种间隙.
  1. span {/*span转换为行内块,设置300宽高和黑色边框*/
  2.             display: inline-block;
  3.             border: 1px solid #000;
  4.             width: 300px;
  5.             height: 300px;
  6.         }
  1. <body>
  2.     <span></span>
  3.     <span></span>
  4. </body>

  1. <body>
  2.     <span></span><span></span>
  3. </body>

CSS行内块元素(内联元素)的更多相关文章

  1. css行级块级区别总结摘录

    一.块级元素:block element 每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外).两个块级元素连续编辑时,会在页面自动换行显示.块级元素一 ...

  2. 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位

    块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...

  3. 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素

    盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...

  4. CSS 块元素、内联元素、内联块元素三者的区别与转换

    三种元素 块元素 内联元素 内联块元素 元素之间的转换 三种元素 元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素. 了解这三种元素的特性,才能熟练的进行页面布局. 块元素 块元素, ...

  5. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...

  6. css - 行高

    css - 行高 line-height行高 取值:px | em | rem | 百分比 | 纯数字 | normal | inherit 设置给:块.行内.行内块 应用给:文本 继承:块.行内.被 ...

  7. css中块级元素、内联元素（行内元素、内嵌元素）

    Block element 块级元素    顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...

  8. CSS中的块级元素、内联元素（行内元素）

    Block element 块级元素    顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...

  9. css position, display, float 内联元素、块级元素

    position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...

随机推荐

  1. python_socket (套接字)

    socket是计算机网络通信的基本的技术之一.如今大多数基于网络的软件,如浏览器,即时通讯工具甚至是P2P下载都是基于Socket实现的. 网络上两个程序通过一个双向的通信连接实现数据的交换,这个连接 ...

  2. Git diff (---和+++具体解释)（转）

    转自:https://blog.csdn.net/lovezbs/article/details/46492933

  3. Spring中的ApplicationListener的使用详解案例

    本文链接:https://blog.csdn.net/u010963948/article/details/83507185 1.ApplicationContext Spring的核心,Contex ...

  4. 反射之关于MethodInfo的使用

    1.MethodInfo类是在System.Reflection命名空间底下,既然是在Reflection空间底下.故名思议关于反射相关的操作,其中比较重要的方法是Invoke()方法,它是加载相同程 ...

  5. 用cProfile做性能分析【转】

    原文地址: https://www.cnblogs.com/kaituorensheng/p/4453953.html

  6. 30个关于Shell脚本的经典案例（下）

    本文目录 21.从FTP服务器下载文件 22.连续输入5个100以内的数字,统计和.最小和最大 23.将结果分别赋值给变量 24.批量修改文件名 25.统计当前目录中以.html结尾的文件总大 26. ...

  7. Vue项目整体架构记要

    此文记录初次学习Vue的一些记要,可做为参考,导图有些生涩,故意不再加以修复完善,以持初心!

  8. Apache Flink 零基础入门（转）

    这是一份很好的 Apache Flink 零基础入门教程. Apache Flink 零基础入门(一&二):基础概念解析 Apache Flink 零基础入门(三):开发环境搭建和应用的配置. ...

  9. UBOOT2016.05 看门狗

    硬件平台 AM335X UBOOT  2016.05 在UBOOT中关看门狗,需要修改屏蔽这两处代码 init_sequence_r->board_init->hw_watchdog_in ...

  10. 191017 虚拟机centos修改IP

    1. 虚拟机设置 1.1 编辑-->虚拟机网络编辑器-->VMnet8-->更改设置-->DHCP设置取消打勾 -->选择NAT模式,查看网关IP 2. 本地网络设置 更 ...