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:默认值,元素按照在文档流中出现的 ...
随机推荐
- DS DI ES SI等等
DS is called data segment register. It points to the segment of the data used by the running program ...
- .net 生成非托管代码
最近在一个老外的程序中看到一段代码,其中使用了System.Runtime.InteropServices.MarshalAs方法进行托管代码与非托管代码之间封装数据,感觉很新颖.特意记录下来,供大家 ...
- Golang_小程序学golang
1 前置条件 Golang基本情况自行baidu/google 1.1 环境与工具 IDE:liteide (windows ).mingw-w64 (gcc) DB:SQL Server 2008 ...
- C# vb .net实现淡色效果滤镜
在.net中,如何简单快捷地实现Photoshop滤镜组中的淡色效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步 ...
- 【面试突击】-RabbitMQ常见面试题（二）
问题一:RabbitMQ 中的 broker 是指什么?cluster 又是指什么? 答:broker 是指一个或多个 erlang node 的逻辑分组,且 node 上运行着 RabbitMQ 应 ...
- vector-空间增长
使用 vector 的时候,一般是从一个空 vector 开始,根据需要逐步填充数据. 这里的关键惭怍是 push_back(),它将一个新元素添加到 vector 中,该元素成为 vector 的最 ...
- jetbrains全家桶激活
56ZS5PQ1RF-eyJsaWNlbnNlSWQiOiI1NlpTNVBRMVJGIiwibGljZW5zZWVOYW1lIjoi5q2j54mI5o6I5p2DIC4iLCJhc3NpZ25lZ ...
- 非洲affrike单词
affrike 英文单词,含义是非洲,非洲大陆. 中文名:非洲 外文名:affrike 目录 释义 affrike noun名词 非洲,也用做africa 1.Word Origin and Hist ...
- Excel 97-2003版本内部结构与查看方法
MS-XLS内部结构:BIFF格式 https://docs.microsoft.com/en-us/openspecs/office_file_formats/ms-xls/cd03cb5f-ca0 ...
- php文字转语音
使用百度接口 https://ai.baidu.com/docs#/TTS-Online-PHP-SDK/top 使用PHP SDK开发骤如下: 1.在官方网站下载php SDK压缩包. 2.将下载的 ...