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. pL/SQL 创建DBLIKN

    某些时候,需要关联不同的数据库进行数据查询.操作等. 在Oracle中,关联不同的数据库进行表关联,就要用到了数据库连接(DB link). 创建DB link有两种方法:通过SQL语句创建,通过可视 ...

  2. bzoj 4573: [Zjoi2016]大森林

    Description 小Y家里有一个大森林,里面有n棵树,编号从1到n.一开始这些树都只是树苗,只有一个节点,标号为1.这些树 都有一个特殊的节点,我们称之为生长节点,这些节点有生长出子节点的能力. ...

  3. Javascript模块化编程(三)require.js的用法及功能介绍

    这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战.我采用的是一个非常流行的库require.js感兴趣的朋友可以了解下啊 我采用的是一个非常流行的 ...

  4. Hadoop2.x伪分模式部署

    hadoop伪分布模式,只有一个节点,通常用来做测试. 一.环境准备 Linux网络配置已完成,可参见CentOS7网络配置: yum源成功挂载,可参见CentOS7本地yum源挂载: Linux已安 ...

  5. <转>MapReduce工作原理图文详解

    转自 http://weixiaolu.iteye.com/blog/1474172前言:  前段时间我们云计算团队一起学习了hadoop相关的知识,大家都积极地做了.学了很多东西,收获颇丰.可是开学 ...

  6. 重写Euqals & HashCode

    package com.test.collection; import java.util.HashMap; import java.util.Map; /** * 重写equals & ha ...

  7. 003Linux常用命令

    文件操作 01  命令 : list----列出目录信息 命令格式: ls [-选项] [目录] 选项 : -a --all 不忽略以"."开头的隐藏文件 : -d --direc ...

  8. socket programming

  9. mongodb 3.4 学习 (二)命令

    # 使用或切换数据库 use <database name> # 显示所有数据库 show dbs # 显示所有collection show collections # 显示所有user ...

  10. ubuntu安装google test

    google test 简称gtest,是一个C/C++的单元测试框架,它的代码在github仓库,使用起来还是挺方便的. 安装 先确保PC上有安装cmake: sudo cmake --versio ...