块级元素：

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

代码：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>display元素</title>

     <style type="text/css">

         .box1{

             height: 50px;

             width: 300px;

             background-color: #40E0D0;

         }

         strong {

             font-size: 50px;

         }

     </style>

 </head>

 <body>

 <div class="box1"></div>

 <strong>晨落梦公子</strong>

 </body>

 </html>

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

代码：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>display元素</title>

     <style type="text/css">

         .box1{

             height: 50px;

             width: 300px;

             background-color: #40E0D0;

             float: left;

         }

         strong {

             font-size: 50px;

         }

     </style>

 </head>

 <body>

 <div class="box1"></div>

 <strong>晨落梦公子</strong>

 </body>

 </html>

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

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

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

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

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

代码：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>display元素</title>

     <style type="text/css">

         .box1{

             height: 50px;

             /*width: 300px;*/

             width: auto;

             background-color: #40E0D0;

         }

         strong {

             font-size: 50px;

         }

         .inline1 {

             background-color: #FF9912;

         }

         .inline2 {

             background-color: #ff0000;

         }

     </style>

 </head>

 <body>

 <!--<div class="box1"></div>-->

 <strong class="inline1">晨落梦公子</strong><strong class="inline2">晨落梦公子</strong>

 </body>

 </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中TCP和UDP区别

    TCP(Transmission Control Protocol)可靠的.面向连接的协议(eg:打电话).传输效率低全双工通信(发送缓存&接收缓存).面向字节流.使用TCP的应用:Web浏览 ...

  2. Linux vim 中文显示乱码解决方法

    因为在windows下默认是gb编码,而我的vim默认是utf-8(gedit默认也是utf-8),所以打开会成乱码.改动了一下配置文件,使vi支持gb编码就好了.$vi ~/.vimrclet &a ...

  3. 谷歌浏览器chrome上的firepath ----chropath

    图标如下 功能:获取相对xpath,绝对xpath和CSS选择器.在devtools面板中编辑,检查并验证XPath和CSS选择器. 使用方法

  4. 数据库抽象层PDO

    通过数据库抽象层PDO可以访问多个数据库 //数据库抽象层PDO //造DSN:驱动名:dbname=数据库名:host=服务器地址 $dsn = "mysql:dbname=mydb;ho ...

  5. PAT 天梯赛 L2-005. 集合相似度 【SET】

    题目链接 https://www.patest.cn/contests/gplt/L2-005 思路 因为集合中的元素 是不重复的 所以用SET 来保存 集合 然后最后 查找一下 两个集合中共有元素 ...

  6. 转 Oracle 11g服务详细介绍

    转自http://www.cnblogs.com/userWuLiang/archive/2013/04/13/3017900.html Oracle 11g服务详细介绍及哪些服务是必须开启的? 成功 ...

  7. [原创]java WEB学习笔记37：EL表达式(简介，运算符，自动类型转换，保留字，隐含对象)

    1.EL 简介 1)EL 全名为 Expression  Language,它原本是 JSTL  1.0 为方便存取数据所自定义的语言 2)语法:EL 语法很简单,它最大的特点就是使用上很方便:${s ...

  8. P2163 [SHOI2007]园丁的烦恼

    题目 P2163 [SHOI2007]园丁的烦恼 做法 关于拆点,要真想拆直接全部用树状数组水过不就好了 做这题我们练一下\(cdq\)分治 左下角\((x1,y1)\)右上角\((x2,y2)\), ...

  9. 一个例子看懂所有nodejs的官方网络demo

    今天看群里有人用AI技术写了个五子棋,正好用的socket.io,本身我自己很久没看nodejs了,再加上Tcp/IP的知识一直很弱,我就去官网看了下net.socket 发现之前以为懂的一个官方例子 ...

  10. Vim 的命令模式转插入模式

    一.在命令模式输入下面的快捷方式: i 在当前光标前插入字符: I 在当前行行首插入字符: a 在当前光标后插入字符: A 在当前行行尾插入字符: o 在当前行下面另起一新行: O 在当前行上面另起一 ...