block:块级元素默认display属性为block;无论块内内容有多少,总是占满一行;

inline:行内元素默认display属性为inline;只占据块内的内容的大小,不会占满一整行;

inline-block:将行内元素的display属性改为inline-block就可以控制行内元素的长和宽;

常见的块级元素:div ul ol li dl dt  p;常用的行内元素:a b span img input ;

inline-block和block的区别:简单点说,布局的时候,想在行级元素内添加块级元素,要换行就使用block,不要换行就是用inline-block.input和img为替换元素,直接可以控制替换元素的宽和高。

block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素的更多相关文章

  1. 块级标签与预格式化文本标签----------大多数XHTML可以表示为两种类型的标签:块标签(block tag)和内联标签(inline tag)

    <html> <head> <meta charset="utf-8"> <title>块级标签</title> < ...

  2. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  3. css菜鸟学习之text-align属性,行内元素,块级元素居中详解

    一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性: 2.text-align只对文 ...

  4. 前端css之文本操作及块级元素和行内元素

    1.文本操作 1.1文本颜色(color) 颜色指定方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如:  red 1.2水平对齐方式 ...

  5. CSS中的块级元素(block)与行内元素(inline)

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

  6. display:inline与display:block——行内元素显示与块级元素显示

    display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...

  7. 块级元素和行内元素的区别 (block vs. inline)

    块级元素 (display: block) 独占一行,多个block元素会各自新起一行.默认情况下,block元素的宽度会填满父元素的宽度. 可以设置width, height属性.但是,即使设置了w ...

  8. block(块级元素)和 inline(内联元素) 的区别

    block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...

  9. inline(内联元素)和block(块级元素) 的区别

    块级元素,默认是独自占据一行的.比如是<p>.<h1>.<h2>.<h3>.<h4>.<h5>.<h6>.<u ...

随机推荐

  1. BNU27945——整数边直角三角形——————【简单数学推导】

    整数边直角三角形 Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Java class nam ...

  2. C# 定制特性

    一.初识特性 特性(attribute)是被指定给某一声明的一则附加的声明性信息. 设计类型的时候可以使用各种成员来描述该类型的信息,但有时候我们可能不太愿意将一些附加信息放到类的内部,因为这样,可能 ...

  3. C#请求http post和get

    首先先要感谢博主小伟地方提供的博客,让我解决了问题. 同样是先提问题,我们要请求http干什么? 通过请求http,传入我的参数,我希望能够获取到项目里面的某些数据,比如这里,我们需要得到SceneL ...

  4. VS 正则表达式替换内容

    很少使用VS的正则替换功能,最近因为需要添加大量的默认值,但是又不想重新类,就想到了这个. 1.替换带有///描述的属性 查找的正则表达式: /// <summary>((.)*((.|\ ...

  5. Spring MVC+Fastjson之时间类型序列化

    时间类型序列化: 注意红色代码,必须引入fastjson的JSONField类,而非其它. import com.alibaba.fastjson.annotation.JSONField; @Ent ...

  6. scss-注释

    在scss中有两种注释方式 原生css的注释多行注释: /* *  注释的内容 */ 单行注释:// 注释内容一致延续到行末. 在尽可能的情况下,多行注释会被保留在输出的CSS中,而单行注释会被删除.

  7. 前端给div加滚动条样式修改

    <!DOCTYPE html> <html lang="en">       <head>             <meta chars ...

  8. cf1064E. Dwarves, Hats and Extrasensory Abilities(二分 交互)

    题意 题目链接 \(n\)次操作,每次你给出一个点的坐标,系统会返回该点的颜色(黑 / 白),程序最后输出一条直线把所有黑点和白点分隔开 Sol 一个很直观的想法:首先询问\((dx, 0)\),然后 ...

  9. Python爬虫之requests模块(1)

    一.引入 Requests 唯一的一个非转基因的 Python HTTP 库,人类可以安全享用. 警告:非专业使用其他 HTTP 库会导致危险的副作用,包括:安全缺陷症.冗余代码症.重新发明轮子症.啃 ...

  10. H5左滑删除JS插件

    <script type="text/javascript"> /** * zepto插件:向左滑动删除动效 * 使用方法:$('.itemWipe').touchWi ...