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.流动型,在标签中存在块级元素和行内元素, 块级元 ...
随机推荐
- [ Mariadb ] 记录一次MySQL数据库时区的问题
操作系统:Centos 7数据库:5.5.52-MariaDB 根本问题:由于系统时区不对,造成数据库的时区和数据的时间不正确. 处理办法: # 查看系统时区, [root@mongodb ~]# t ...
- hadoop3.1 分布式集群部署
1.环境准备 Centos7.5系统 hadoop版本3.1 1.1资源分配 主机名 地址 角色 node01 10.10.0.11 namenode node02 10.10.0.12 second ...
- Android Studio查看类中所有方法和属性
ctrl+f3效果: alt+7效果: 注意区别:虽然所有方法都有,但是顺序自己一看效果便知.一个是根据类中的顺序,另一个是根据a-z的开头字母顺序. 百度查了一下快捷键是ctrl+f12.但是自己试 ...
- JavaScript代码放在head和body的区别(QRCode生成)
1.在head中时,所代表的functions只加载而不执行,执行是在某一事件触发后才开始. 2.在body中时,直接加载并执行 典型的区别: 如果有不在函数中的执行语句,比如变量初始化,如果在hea ...
- uva10256
uva10256 题意 平面上存在两种颜色的点,问是否存在一条直线,使得任取一个红点和一个蓝点都在直线的异侧,这条直线不经过任何点. 分析 对每种颜色的点求一发凸包,问题等价于判断两个多边形是否相交或 ...
- JMeter之分布式部署
转自:http://www.cnblogs.com/yangxia-test/p/4016277.html Jmeter 是Java 应用,对于CPU和内存的消耗比较大,因此,当需要模拟数以千计的并发 ...
- [Atcoder Regular Contest 060] Tutorial
Link: ARC060 传送门 C: 由于难以维护和更新平均数的值: $Average->Sum/Num$ 这样我们只要用$dp[i][j][sum]$维护前$i$个数中取$j$个,且和为$s ...
- small test on 5.29 night T1
可以发现题目的重点是在第一个部分,因为只要信心值我们求出来了,那么第二问就是一个简单的最长上升子序列问题了,所以接下来只讲第一问. #include<iostream> #include& ...
- Hadoop下大矩阵乘法Version2
1)使用本方法计算F*B,其中F是1000*1000的矩阵,B是1000*20000的矩阵,使用三个节点的集群,每个节点一个CPU核(集群装在虚拟机里,宿主机只有4个CPU核),每个节点配置一个map ...
- Android 架构 4.总结
以下是Keegan小钢大神原创博客: Android项目重构之路:架构篇Android项目重构之路:界面篇Android项目重构之路:实现篇 看了这几篇文章,以及下面的评论,总结一下,以便以后拓展: ...