文档章节

【第三篇】 display最重要的三种属性

 带劲的小伙
发布于 2016/05/28 15:01
字数 290
阅读 5
收藏 0

三种display的异同

三种常见display属性最重要的区别

  独占一行 支持宽高 上下margin
block   Y Y Y
inline-block N Y Y
inline N N N

 

除此之外,内容区域的大小还有一些特点

block不指定宽度时,宽度将占满父级元素;不指定高度时,高度由内容撑开。

inline-block不指定宽度和高度时,都由内容撑开

inline不能指定宽高,只能由内容撑开

常用标签的默认display属性

block:<div>, <p>, <h1>, <form>, <ul> 和 <li>

inline:<span>, <a>, <label>, <input>, <img>, <strong> 和<em>

元素转换

当我们想改变这些默认属性时,我们就可以用display来进行元素之间的转换.

例如,将块元素div和内联元素span进行并排显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div,span{
				height: 100px;
				color: white;
				background: red;
                display:inline-block;
			}
		</style>
	</head>
	<body>
		<div>div1</div>
		<div>div2</div>
		<span>span1</span>
		<span>span2</span>
	</body>
</html>

代码生成的效果图:

 

© 著作权归作者所有

粉丝 1
博文 5
码字总数 2323
作品 0
朝阳
私信 提问
Shell学习之路和我发布过的Shell脚本博文

Shell学习之路 目录 Shell学习之路【第一篇】:别名,管道,用户配置文件,变量,read Shell学习之路【第二篇】:条件测试,运算符,选择结构,for循环结构 Shell学习之路【第三篇】:While循环,C-...

yht_1990
2016/07/19
0
0
python教程目录

一、 ●Python开发【第一篇】Python环境安装与升级   ●Python开发【第二篇】第一句Python代码   ●Python开发【第三篇】python编码与代码注释  ●Python开发【第四篇】import、rawinpu...

MrXiong2017
2017/02/21
0
0
python学习日志目录

一、 ●Python开发【第一篇】Python版本选择与安装,并编写第一句代码   ●Python开发【第二篇】Python编写代码规范与基础   ●Python开发【第三篇】python编码与代码注释  ●Python开发...

MrXiong2017
2017/12/09
0
0
VMware vSphere学习之路

VMware VSphere学习之路 目录 VMware vSphere学习之路【第一篇】:VMware ESXI5.5实验环境介绍 VMware vSphere学习之路【第二篇】:VMware ESXI5.5安装 VMware vSphere学习之路【第三篇】:v...

yht_1990
2016/09/26
0
0
css(表现层)Cascading Style Sheets层叠样式表

HTML:===> 结构层 css:===> 表现层 js:===> 行为层 css的常用三种类型选择器: 1、基本选择器: id class 标签 * 逗号选择器(,) 2、包含选择器: 子代选择器(>) 后代选择器(空格) ...

AAA年华
2017/12/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.4K
15
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
41
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部