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:默认值,元素按照在文档流中出现的 ...
随机推荐
- SAS学习笔记1
数据采样 简单随机抽样,从sashelp数据集中air数据文件中选取30个数 数据探索 数字特征的探索:均值.频数.最大值.最小值.众数.中位数.方差.标准差 数字分布的探索:是否服从正态分布 连续型 ...
- PHP 使用 pdo 操作oracle数据库 报错
## SELECT UNID,NAME,NAME_XML WHERE UNID>=10 AND UNID<=15 ## 在10到15这5条数据中不为空数据php: symbol looku ...
- Gradle 翻译 build dependencies 依赖 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- @PropertySouce注解 读取 properties文件
https://www.cnblogs.com/whx7762/p/7885735.html 1.@ProtertySource @PropertySouce是spring3.1开始引入的基于java ...
- C# vb .net实现透视阴影特效滤镜
在.net中,如何简单快捷地实现Photoshop滤镜组中的透视阴影特效效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 ...
- 【Java基础】- Java学习路线图
Java的学习路线图,整理以备自己学习和温习. 1.Java基础 具体内容: 1. 编程基础(开发环境配置.基础语法.基本数据类型.流程控制.常用工具类) 2. 面向对象(继承.封装.多态.抽象类.接 ...
- 学习笔记之Vim
Vim (text editor) - Wikipedia https://en.wikipedia.org/wiki/Vim_(text_editor) Vim (/vɪm/;[4] a contr ...
- react学习记录（三）——状态、属性、生命周期
react的状态state React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM) class Clock extends React.Compon ...
- 82.使用vue后怎么针对搜索引擎做SEO优化？
什么是SEO 搜索引擎优化(Search engine optimization,简称SEO),指为了提升网页在搜索引擎自然搜索结果中(非商业性推广结果)的收录数量以及排序位置而做的优化行为,是为了从 ...
- DB2数据库中DB2字符串类型
DB2字符串是DB2数据库中的基础知识,下面就为您分类介绍DB2字符串,供您参考,如果您对DB2字符串方面刚兴趣的话,不妨一看. DB2字符串是字节序列.DB2字符串包括 CHAR(n) 类型的定长字 ...