块级元素：

首先说明display是块级元素，会单独站一行，如

代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title>display元素</title>
  6.      <style type="text/css">
  7.          .box1{
  8.              height: 50px;
  9.              width: 300px;
  10.              background-color: #40E0D0;
  11.          }
  12.          strong {
  13.              font-size: 50px;
  14.          }
  15.      </style>
  16.  </head>
  17.  <body>
  18.  <div class="box1"></div>
  19.  <strong>晨落梦公子</strong>
  20.  </body>
  21.  </html>

但当添加上浮动（float）后，则为：（会换行）

代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title>display元素</title>
  6.      <style type="text/css">
  7.          .box1{
  8.              height: 50px;
  9.              width: 300px;
  10.              background-color: #40E0D0;
  11.              float: left;
  12.          }
  13.          strong {
  14.              font-size: 50px;
  15.          }
  16.      </style>
  17.  </head>
  18.  <body>
  19.  <div class="box1"></div>
  20.  <strong>晨落梦公子</strong>
  21.  </body>
  22.  </html>

当不设置width或设置为auto时，背景会填充整行。如：

常用的块级元素：div，ul（无序列表），ol（有序列表），li（列表内容），p，dl（叙事式列表），h1~h6，hr（水平分隔符），table（表格）

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

内联元素：注意，内联元素不会独占一行。width和height对其不起作用。

如图：其中的strong元素没换行显示

代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title>display元素</title>
  6.      <style type="text/css">
  7.          .box1{
  8.              height: 50px;
  9.              /*width: 300px;*/
  10.              width: auto;
  11.              background-color: #40E0D0;
  12.          }
  13.          strong {
  14.              font-size: 50px;
  15.          }
  16.          .inline1 {
  17.              background-color: #FF9912;
  18.          }
  19.          .inline2 {
  20.              background-color: #ff0000;
  21.          }
  22.      </style>
  23.  </head>
  24.  <body>
  25.  <!--<div class="box1"></div>-->
  26.  <strong class="inline1">晨落梦公子</strong><strong class="inline2">晨落梦公子</strong>
  27.  </body>
  28.  </html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

用display可以改变内联和块。

display：block 将内联转换成块

display：inline 将块装换成内联

display：inline-block 将容器转换为内联块，既可以设置width和height，又不会单独占一行

display：none 隐藏不占位  visiblility：hidden 隐藏但占位

把内联元素装换为块元素的3种方法

1、display:block

2、display:inline-block

3、float

css中的块级和内联元素的更多相关文章

  1. web兼容学习分析笔记--块级、内联、内联块级元素

    一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inli ...

  2. html的块级、内联、内联块级元素基础

    概念 块级:block 内联:inline 内联块级:inline-block 在html元素中,元素会有display属性 display属性默认值是block,那么该元素是块级元素. displa ...

  3. #HTML 块级、内联、内联块级元素

    [常用的块级元素] div,form,p,table,h1~h6,hr,dl,ol,ul,pre等 [常用的内联元素] a,img,input,span,br,select,strong,em,tex ...

  4. CSS中的块级元素、内联元素（行内元素）

    Block element 块级元素    顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...

  5. CSS中的块级元素（block）与行内元素（inline）

    css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...

  6. CSS中的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  7. css position 和 块级/行内元素解释

    一.position 属性: static:元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. relative:元素框偏移某个距离.元素仍保 ...

  8. 顶级、块级、内联,html元素的三大分类

    学习html后, 你会了解一些基本的html元素(Element), 如p, h1~h6, br, div, li, ul, img等.如果将这些元素细分, 又可以分别归为顶级(top-level)元 ...

  9. CSS中的块级元素与行级元素

    最近初学CSS时对块级元素与行级元素有时会产生混淆,写篇博客记录一下自己对其的理解. 先从概念上来看: 块级元素 特点:1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行 ...

随机推荐

  1. python基础-第五篇-5.1冒泡排序

    几个月过去了,小白逐渐对公司的后端服务熟悉了,不过这天小白又接到一封神秘邮件,是景女神发来的:公司急需一批对语言算法有些了解的优秀员工,鉴于你在公司的表现很不错,现在给到你一个培训机会,请速到开发部报 ...

  2. JPA hibernate spring repository pgsql java 工程（二）：sql文件导入数据，测试数据

    使用jpa保存查询数据都很方便,除了在代码中加入数据外,可以使用sql进行导入.目前我只会一种方法,把数据集中在一个sql文件中. 而且数据在导入中常常具有先后关系,需要用串行的方式导入. 第一步:配 ...

  3. 关于highcharts-ng

    1.内容都正确但是不显示,使用parseInt()方法转换

  4. mssql-在一个特定的会话停止出发器

    用SET CONTEXT_INFO来实现 --在某个会话里设置 SET CONTEXT_INFO 0x8888 --在触发器里判断 ) SELECT @Cinfo = Context_Info() 原 ...

  5. mysql复制表结构和内容

    许多时候我们想复制一张表部分或者全部内容,或者只复制一张表的框架,这种需求应该说我们很常见. 其实想要实现这种需求十分简单. 表一: mysql> select * from student_i ...

  6. IOS NSDate 调整当前时间戳为明天

    这个可以根据需要调整 在day  month  hour minute second  等都行 以下是以当前时间戳为基础,调整时间为明天的零点零时零分零秒  可以根据需要 写成毫秒的 +(NSStri ...

  7. 写出pythonic的python代码

    http://www.cnblogs.com/dadadechengzi/p/6226071.html 1,列表推导(没当要对序列中的内容进行循环处理时,就应该尝试使用列表推倒) 在python中编写 ...

  8. STM32F4XX高效驱动篇1-UART

    之前一直在做驱动方面的整理工作,对驱动的高效性有一些自己的理解这里和大家分享一下.并奉驱动程序,本程序覆盖uart1-8. 串口驱动,这是在每个单片机中可以说是必备接口.可以说大部分产品中都会使用,更 ...

  9. slam kf

    一.KF 1.从概率来理解概率估计因为希望整个运动估计较长时间内最优,所以反而会用最新的知识去更新之前的状态,就比如在做完当前帧的位姿估计的时候,修改局部地图的路标点.如果站在之前的状态上来考虑,用的 ...

  10. mac活动监视器闪退

    输入:rm -rf ~/Library/LaunchAgents/com.apple.Yahoo.plist即可!