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. Springboot - 集成 JPA

    1.什么是 JPA? JPA就是Java Persistence API的意思,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. 2. JPA 具有什么优 ...

  2. CTSC/APIO2018 游记

    狗牌滚粗选手,此博客证明我去过...... CTSC 消失的源代码与消失的分数...... 我也不知道发生了什么....... APIO 旁边两位小哥太强了,心态完全炸裂,最后也滚粗了...... 回 ...

  3. js跑步算法

    <!DOCTYPE html> <html> <head> <title>JavaScript</title> <style> ...

  4. Android界面编程--使用活动条(ActionBar)

    ActionBar的使用 1.启动ActionBar(默认状态下是启动的) 1.1 在Android配置文件(AndroidManifest.xml)中设置应用的主题为 ***.NoActionBar ...

  5. OLEDB 简单数据查找定位和错误处理

    在数据库查询中,我们主要使用的SQL语句,但是之前也说过,SQL语句需要经历解释执行的步骤,这样就会拖慢程序的运行速度,针对一些具体的简单查询,比如根据用户ID从用户表中查询用户具体信息,像这样的简单 ...

  6. 介绍一款web端的截图工具

    牛牛截图,web端的一款截图工具,下面是代码及实例. 依赖jquery-1.7.min.js /**************************************************** ...

  7. iDempiere 开发指南 Process(iDem后台进程)及插件的开发及部署

    Created by 蓝色布鲁斯,QQ32876341,blog http://www.cnblogs.com/zzyan/ iDempiere官方中文wiki主页 http://wiki.idemp ...

  8. 15_volatile

    [volatile概念] volatile关键字的主要作用是是变量在多个线程间可见. [注意] 在java中,每一个线程都会有一块工作内存区,其中存放着所有线程共享的主内存中的变量的拷贝.当线程执行时 ...

  9. GridView简单使用

    如图是效果图 今天看到看到这个代码发现一个问题  就是我的listView的布局不对  我的GridView的 android:layout_height="wrap_content&quo ...

  10. 本机浏览器访问不到Linux虚拟机中的nginx开启页面

    1.使用该执行打开端口文件vi /etc/sysconfig/iptables 2.随便复制一行现有内容,将你要打开的端口设置上就行了,这里是打开80端口-A INPUT -m state --sta ...