一、典型代表

  • input
  • img

二、特点：

  • 在一行上显示
  • 可以设置宽高
<style type="text/css">

        img{

            width: 300px;

           /* 顶部对齐           */

            vertical-align: top;

        }

        input{

            width: 300px;

            height: 200px;

            background-color: blue;

        }

    </style>

</head>

<body>

    <img src="../2.26/picture.jpg" alt="">

    <input type="text">

</body>
  • 补充:行内块与行内块之间的空隙：如果两个span在HTML这样放置,会出现空隙,使用浮动可以去除这种间隙.
span {/*span转换为行内块,设置300宽高和黑色边框*/

            display: inline-block;

            border: 1px solid #000;

            width: 300px;

            height: 300px;

        }
<body>

    <span></span>

    <span></span>

</body>

<body>

    <span></span><span></span>

</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. 「UER#2」信息的交换

    「UER#2」信息的交换 吉利题.. 不难发现,置换中的每一个循环是独立的,每一个循环分别对应一个独立的联通块. 根据题目的性质,每一个联通块做的事情等价于其按照编号从小到大遍历的的dfs生成树做的事 ...

  2. PTA A1016

    A1016 Phone Bills (25 分) 题目内容 A long-distance telephone company charges its customers by the followi ...

  3. 认识KNX协议

    一.简介 KNX是Konnex的缩写.1999年5月,欧洲三大总线协议EIB.BatiBus和EHSA合并成立了Konnex协会,提出了KNX协议.该协议以EIB为基础,兼顾了BatiBus和EHSA ...

  4. 实战Go内存泄露【转】

    最近解决了我们项目中的一个内存泄露问题,事实再次证明pprof是一个好工具,但掌握好工具的正确用法,才能发挥好工具的威力,不然就算你手里有屠龙刀,也成不了天下第一,本文就是带你用pprof定位内存泄露 ...

  5. python3基础之“术语表（2）”

    51.编程: 让计算机执行的指令. 52.代码: 让计算机执行的命令. 53.底层编程语言: 与高级语言相比,更接近二进制的语言. 54.高级编程语言: 读起来像英语的易于理解的语言. 55.汇编语言 ...

  6. 纽约LangeEylandt长岛LongIsland

    LangeEylandt n.长岛(美国) 纽约长岛 纽约长岛 (LongIsland)是北美洲在大西洋内的一个岛,最早追溯到十七世纪的1650年被命名为Lange Eylandt [1] ,位于北美 ...

  7. 【RAC】 RAC For W2K8R2 安装--结尾篇(十)

    [RAC] RAC For W2K8R2 安装--结尾篇(十) 一.1  BLOG文档结构图 一.2  前言部分 一.2.1  导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其 ...

  8. Mysql 库表操作初识

    Mysql 库表操作初识 终端登录mysql 这里只演示win下, cmd 终端. 至于怎么在win下, linux, mac安装, 感觉这是一个入门级的百度搜索问题, 安装都搞不定, 确实有点尴尬, ...

  9. [AWS][GUI][VNC]rhel 7 安装GUI ，配置VNC

    预计阅读时间:15分钟 预计配置时间:30分钟  (前提是已经申请AWS的EC2的rhel7 云主机并且成功运行) 目前AWS 亚马逊云免费试用一年,申请一个学习使用 痛点:没有GUI,无法搭建Jen ...

  10. 【Flask】 python学习第一章 - 6.0 WTF表单 数据库 蓝图

    WTF表单  wtf.py pip install flask-wtf  # 安装 from flask_wtf import FlaskForm from wtform import StringF ...