<!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的更多相关文章

  1. css菜鸟学习之block，inline和inline-block概念和区别

    block,inline和inline-block概念和区别   总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) ...

  2. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  3. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  4. 大话css之display的Block未解之谜（一）

    用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...

  5. CSS display:inline和float:left两者区别探讨

     本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...

  6. css中inline、block、inline-block的区别

    http://www.cnblogs.com/fxair/archive/2012/07/05/2577280.html display:inline就是将元素显示为块级元素. block元素的特点是 ...

  7. 微信小程序之循环<block></block>

    (1)<block></block>标签 block常用于结合循环 <block wx:for="{{array}}" wx:key="{{ ...

  8. CSS的inline、block与inline-block

    基本知识点 行内元素一般是内容的容器,而块级元素一般是其他容器的容器,行内元素适合显示具体内容,而块级元素适合做布局. 块级元素(block):独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默 ...

  9. CSS： inline、block和inline-block的区别

    block 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(很霸道,一个块级元素独占一行) 2.元素的高度.宽度.行高以及顶和底边距都可设置. 3.元素宽度在不设置的情况 ...

  10. css盒子流动和block。inline

    回忆一下盒子流动等概念! 1.盒子模型的宽度与高度,都是包括padding的值.(代码的理解如下:) 这样的结果的到就是  宽度和高度都是220了 2.流动型,在标签中存在块级元素和行内元素, 块级元 ...

随机推荐

  1. jQuery重置单选框和input框

    取消选中单选框radio,第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的,大家可以看看下面的示例 本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQ ...

  2. <context-param>与<init-param>的区别与作用（转自青春乐园）(

    <context-param>的作用:web.xml的配置中<context-param>配置作用1. 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件we ...

  3. WEB前端工程师整理的原生JavaScript经典百例

    一.原生JavaScript实现字符串长度截取 二.原生JavaScript获取域名主机 三.原生JavaScript转义html标签 四.原生JavaScript时间日期格式替换 Date.prot ...

  4. STL模板整理 pair

    pair pair是一种模板类型,其中包含两个数据值,两个数据的类型可以不同.如果一个函数有两个返回值的话,如果是相同类型,就可以用数组返回,如果是不同类型,就可以自己写个struct ,但为了方便就 ...

  5. HDU 1308 What Day Is It?（模拟，日期）

    解题报告:输入一个年月日,让你求出那一天是星期几,但是做这题之前必须先了解一点历史.首先在1582年之前,判断是否是闰年的标准是只要能被四整除就是闰年, 然后在1752年9月2号的后的11天被抹去了, ...

  6. HDU 2050 折线分割平面（转）

    折线分割平面 http://acm.hdu.edu.cn/showproblem.php?pid=2050 Problem Description 我们看到过很多直线分割平面的题目,今天的这个题目稍微 ...

  7. uva10256

    uva10256 题意 平面上存在两种颜色的点,问是否存在一条直线,使得任取一个红点和一个蓝点都在直线的异侧,这条直线不经过任何点. 分析 对每种颜色的点求一发凸包,问题等价于判断两个多边形是否相交或 ...

  8. shell 查看 具体某行的值

    sed: sed '5!d' file awk: awk 'NR==5' file

  9. [BZOJ2655]calc(拉格朗日插值法+DP)

    2655: calc Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 428  Solved: 246[Submit][Status][Discuss] ...

  10. 【2-SAT】URAL - 2089 - Experienced coach

    题意:给出n对点a,b  要求从没对点中选出一个,且最终选出的点n个数不能存在相同的.输入数据满足每种数最多出现3次,最少出现1次 思路:第i对点的编号2*i, 2*i+1,   因为每个数最多出现3 ...