css - inline\inline-block\block
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
text-align: center;
color: #fff;
line-height: 80px;
} h1 {
/* inline不能设置宽高,没有 */
/* display: inline;
height: 20px;
padding: 10%; */ /* display-inline 我们称之为行内块，可以设置宽高，拥有一切属性 */
/* display: inline-block;
height: 30px; */ /* display: block 块级元素，占满一行 */
display: block;
width: 80px;
height: 80px;
background-color: #000;
} h2 {
display: inline-block;
width: 80px;
height: 80px;
background-color: #000;
/* text-align: center; */
} h3 {
display: inline;
width: 80px;
height: 80px; background-color: #000;
}
</style>
</head> <body>
<h1>块级元素</h1>
<h2>行间块</h2>
<br>
<h3>行内(没有宽高，我能怎么办)</h3>
</body> </html>
css - inline\inline-block\block的更多相关文章
- css菜鸟学习之block，inline和inline-block概念和区别
block,inline和inline-block概念和区别 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- 当inline元素包裹block元素时会发生什么
经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...
- 大话css之display的Block未解之谜（一）
用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...
- CSS display:inline和float:left两者区别探讨
本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...
- css中inline、block、inline-block的区别
http://www.cnblogs.com/fxair/archive/2012/07/05/2577280.html display:inline就是将元素显示为块级元素. block元素的特点是 ...
- 微信小程序之循环<block></block>
(1)<block></block>标签 block常用于结合循环 <block wx:for="{{array}}" wx:key="{{ ...
- CSS的inline、block与inline-block
基本知识点 行内元素一般是内容的容器,而块级元素一般是其他容器的容器,行内元素适合显示具体内容,而块级元素适合做布局. 块级元素(block):独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默 ...
- CSS： inline、block和inline-block的区别
block 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(很霸道,一个块级元素独占一行) 2.元素的高度.宽度.行高以及顶和底边距都可设置. 3.元素宽度在不设置的情况 ...
- css盒子流动和block。inline
回忆一下盒子流动等概念! 1.盒子模型的宽度与高度,都是包括padding的值.(代码的理解如下:) 这样的结果的到就是 宽度和高度都是220了 2.流动型,在标签中存在块级元素和行内元素, 块级元 ...
随机推荐
- cpu中的缓存和操作系统中的缓存分别是什么？
cpu中的缓存和操作系统中的缓存分别是什么? 在操作系统中,为了提高系统的存取速度,在地址映射机制中增加了一个小容量的联想寄存器,即块表.用来存放当前访问最频繁的少数活动页面的页数.当某用户需要存取数 ...
- k8s的Rolling Update（滚动更新应用）
滚动更新是一次只更新一小部分副本,成功后,再更新更多的副本,最终完成所有副本的更新.滚动更新的最大的好处是零停机,整个更新过程始终有副本在运行,从而保证了业务的连续性. 下面我们部署三副本应用: 初始 ...
- CSS入门之定义和应用格式
1:定义 1:定义单个属性 property:value 例如: color:white(属性和值之间用冒号隔开) 2:定义多个属性 property:value;property:value 例如: ...
- 解决Composer 使用时要求输入授权用户名密码问题
使用Composer下载第三方包时出现: Authentication required (packagist.phpcomposer.com): Username: 解决方法: 1.修改源 comp ...
- （十）while和until循环
(1)while循环 语法:当条件测试成立(真),执行循环体 while 条件测试 do 循环体 done 1)while批量创建用户1 从user.txt读取到的行数据赋予给变量user值 #!/b ...
- 部署web应用到虚拟主机的三种方式
方式一: 在 [tomcat]/conf/server.xml 文件中的<Engine>标签下的<Host>标签内部, 添加一个 <Context ...
- The number of steps(概率dp)
Description Mary stands in a strange maze, the maze looks like a triangle(the first layer have one r ...
- 洛谷 P1598 垂直柱状图【字符串】
题目描述 写一个程序从输入文件中去读取四行大写字母(全都是大写的,每行不超过72个字符),然后用柱状图输出每个字符在输入文件中出现的次数.严格地按照输出样例来安排你的输出格式. 输入输出格式 输入格式 ...
- 洛谷——P2556 [AHOI2002]黑白图像压缩
P2556 [AHOI2002]黑白图像压缩 题目描述 选修基础生物基因学的时候, 小可可在家里做了一次图像学试验. 她知道:整个图像其实就是若干个图像点(称作像素)的序列,假定序列中像素的个数总是 ...
- hihocoder Popular Products(STL）
Popular Products 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Given N lists of customer purchase, your tas ...