CSS块元素、行内元素、行内块元素的转换
一、块元素转行内元素：display:inline
二、行内元素转块元素：display:block
div{
display: inline;
/*无效
width: 500px;
height: 500px;
*/
background-color: red;
}
p{
display: inline-block;
}
span{
display: block;
width: 400px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div>块内元素转行内元素</div>
<span>行内元素转块元素</span>
三、块和行内元素转行内块元素：display:inline-block
<style type="text/css">
div,a,span,strong{
display: inline-block;
width: 200px;
height: 200px;
background-color: yellow;
text-align: center;
vertical-align: top;
}
</style>
</head>
<body>
<div>块元素转行内块元素</div>
<a href="#">a行内元素转行内块元素</a>
<span>span行内元素转行内块元素</span>
<strong>strong行内元素转行内块元素</strong>
CSS块元素、行内元素、行内块元素的转换的更多相关文章
- CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性
样式表书写位置 内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...
- css盒子模型的深入理解，在块级、行内元素的区别和特性
css盒子模型用于处理元素的内容.内边距.边框和外边距的方式简称.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的 ...
- 04. H5标签有哪些？行内元素有哪些？块级元素有哪些？空(void)元素有哪些？行内元素和块级元素有什么区别？你工作中常用标签有什么？
4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...
- CSS 一些基础知识(优先级、行内元素的一些属性、font-size单位) 怎样不加载图片
CSS大小写不敏感 选择器优先级如下所示: 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择 ...
- 1 background（复合属性）与font（复合属性） 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径
1 background(复合属性)与font(复合属性): background: 颜色 图片的链接 是否平铺 背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...
- line-height系列（二）——对行内元素（文字、图片、兄弟元素）、块级元素设置line-height后的表现
>原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...
- * CSS 视觉格式化（基本框、包含块、盒模型、水平格式化、垂直格式化、行布局、em框、内容区、行间距、行内框、行框）
前言 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的 ...
- 行内元素(inline标签)设置了行高为什么不生效，还是表现为父盒子的行高？行内元素行高问题终极解释
最近在看张鑫旭大佬的<css世界>,读到5.2.4 内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证 ...
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- 内联(行级)元素不能设置margin-top
内联(行级)元素 不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-righ ...
随机推荐
- SAS学习笔记1
数据采样 简单随机抽样,从sashelp数据集中air数据文件中选取30个数 数据探索 数字特征的探索:均值.频数.最大值.最小值.众数.中位数.方差.标准差 数字分布的探索:是否服从正态分布 连续型 ...
- vuex的Store简单使用过程
介绍 Store的代码结构一般由State.Getters.Mutation.Actions这四种组成,也可以理解Store是一个容器,Store里面的状态与单纯的全局变量是不一样的,无法直接改变st ...
- Hive学习笔记（二）—— 安装配置
Hive安装配置及基本操作 1. Hive安装及配置 (1). 上传文件到Hadoop102节点,解压到/opt/moudle (2). 修改/opt/module/hive/conf目录下的hive ...
- Implicit super constructor Array() is undefined for default constructor. Must define an explicit constructor
因为你的父类已经创建了一个带参的构造函数并且父类中没有无参的构造函数,此时编译器不会为你调用默认的构造函数, 所以子类在继承父类的时候需要在自己的构造函数中显式的调用父类的构造函数,这样才能确保子类在 ...
- idea下java项目的打包与使用
一. 打包 (1)打开项目结构,选择Artifacts --> + --> JAR --> From modules with dependencies ... 有main方法就添加 ...
- kafka汇总
Kafka 1. kafka概念 kafka是一个高吞吐亮的.分布式.基于发布/订阅(也就是一对多)的消息系统,最初由Linkedln公司开发的,使用Scala语言编写的,目前是Apache的开源项目 ...
- Oracle大表改为分区表及表空间切换方案
Oracle大表改为分区表及表空间切换方案 一. 背景 由于之前数据库表和索引放在一个表空间导致表空间数据文件增长太快,文件数量即将达到Oracle表空间的限制,需要对表(没有分 ...
- 记.net core 项目在linux系统下启动失败的一个教训
最近准备用.net core开发一个项目.使用的是Coldairarrow的框架.做了一部分之后,准备部署到服务器上测试一下.然后就遇到了这个问题. 项目路径: /home/www/webapi/ 启 ...
- 在DoNetMVC中使用控制反转和依赖注入【DI】
本次是在MVC5中使用Autofac 第一步:程序包管理器控制台 Install-Package Autofac.MVC5 引入nuget包 这样成功之后,会在引用中出现两个DLL,分别是Autofa ...
- js设置页面全屏
html代码 <!-- 全屏按钮 --> <img id="alarm-fullscreen-toggler" src="/public/index/i ...