CSS行内块元素(内联元素)
一、典型代表
- 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>
- 如果两个span一列排列,则之间会有2px的边框,变细可以使用负的margin值(具体可以参考另一篇文章：鼠标经过提高层级的一个demo)
<body>
<span></span><span></span>
</body>
CSS行内块元素(内联元素)的更多相关文章
- css行级块级区别总结摘录
一.块级元素:block element 每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外).两个块级元素连续编辑时,会在页面自动换行显示.块级元素一 ...
- 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位
块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...
- 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素
盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...
- CSS 块元素、内联元素、内联块元素三者的区别与转换
三种元素 块元素 内联元素 内联块元素 元素之间的转换 三种元素 元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素. 了解这三种元素的特性,才能熟练的进行页面布局. 块元素 块元素, ...
- 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位
前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...
- css - 行高
css - 行高 line-height行高 取值:px | em | rem | 百分比 | 纯数字 | normal | inherit 设置给:块.行内.行内块 应用给:文本 继承:块.行内.被 ...
- css中块级元素、内联元素（行内元素、内嵌元素）
Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...
- CSS中的块级元素、内联元素（行内元素）
Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...
- css position, display, float 内联元素、块级元素
position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...
随机推荐
- C#直接调用.mdf文件
一般情况下,.mdf文件都是作为MSSQL的数据库文件,只有在安装了Microsoft SQL Server才能实现调用. 事实上,除此之外,也可以直接调用.mdf文件,而无需安装Microsoft ...
- Java调用Http/Https接口(3)--Commons-HttpClient调用Http/Https接口
Commons-HttpClient原来是Apache Commons项目下的一个组件,现已被HttpComponents项目下的HttpClient组件所取代:作为调用Http接口的一种选择,本文介 ...
- 你需要知道的 5 个 Linux 新手会犯的失误
Linux 爱好者们分享了他们犯下的一些最大错误. 终身学习是明智的 —— 它可以让你的思维敏捷,让你在就业市场上更具竞争力.但是有些技能比其他技能更难学,尤其是那些小菜鸟错误,当你尝试修复它们时可能 ...
- nodeJS微信JSDK 配置
nodeJS微信JSDK 配置 一.微信公众平台申请一个测试公众号 二.配置nodeJS 使用express框架搭建服务器 微信生成签名步骤: 1.获取token 2.通过token,获取jsapi_ ...
- node.js数据库操作
node 中使用mysql const http = require('http'); const mysql = require('mysql'); const url = require('url ...
- 处理vue-quill-editor回显数据的时候没有空格问题
这是我要实现的效果 这是我回显后的情况(可以看见空格都没有了) 处理后 处理方法 添加一个class="ql-editor" <quill-editor class=&qu ...
- kubeadm部署高可用K8S集群（v1.14.2）
1. 简介 测试环境Kubernetes 1.14.2版本高可用搭建文档,搭建方式为kubeadm 2. 服务器版本和架构信息 系统版本:CentOS Linux release 7.6.1810 ( ...
- java中的参数传递
Java中只有传值调用(值传递),没有传址调用(址传递或者引用传递).所以在java方法中改变参数的值是不会改变原变量的值的,但为什么改变引用变量的属性值却可以呢?请看下面的解答. java中的数据类 ...
- Linux命令——jobs、bg、fg、nohup
参考:Bash基础——工作管理(Job control) jobs -l :除了列出 job number 与命令串之外,同时列出 PID 的号码: -r :仅列出正在背景 run 的工作:-s :仅 ...
- 【HICP Gauss】数据库 数据库管理(数据库对象 表空间 索引 序列 分区 视图)-8
什么是数据库对象 数据库对象包括 表 索引 分区 视图 序列 同义词 数据库支持对象存储过程 自定义函数 触发器 表空间 高级包 表 数据库中的数据结构 存储数据以及描述数据间的关系 表由行和列组成 ...