在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素(block)、内联元素(又叫行内元素,inline)和内联块状元素(inline-block)。

1. 常用的块状元素有:

<div>、<p>、<h1>...<h6>、
<ol>、<ul>、<dl>、<table>、
<address>、<blockquote> 、<form>

2. 常用的内联元素有:

<a>、<span>、<br>、<i>、
<em>、<strong>、<label>、<q>、
<var>、<cite>、<code>

3.常用的内联块状元素有:

<img>、<input>、<td>

4. 块级元素(block)特点

(1)总是从新行开始

(2)高度,行高、外边距以及内边距都可以控制。

(3)宽度默认是容器的100%

(4)可以容纳内联元素和其他块元素。

5. 内联元素(inline)特点

(1)和相邻行内元素在一行上。

(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。

(3)默认宽度就是它本身内容的宽度。

(4)行内元素只能容纳文本或则其他行内元素。(a特殊)

6. 内联块状元素(inline-block )元素特点:

(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。

(2)默认宽度就是它本身内容的宽度。

(3)高度,行高、外边距以及内边距都可以控制。

7. 例子

1.将内联元素a转换为块状元素,从而使a元素具有块状元素特点。

a{
display:block;
}

2. 将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点。

div {
display:inline;
}

3. 将内联元素a转换为内联块状元素,从而使a元素具有内联块状元素特点。

a{
display:inline-block;
}

CSS - 块状元素、内联元素和内联块状元素的更多相关文章

  1. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  2. CSS 一些基础知识(优先级、行内元素的一些属性、font-size单位) 怎样不加载图片

    CSS大小写不敏感 选择器优先级如下所示: 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择 ...

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

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

  4. 学习笔记——关于HTML(含HTML5)的块级元素和行级(内联)元素总结

    1.首先我们要知道什么是块级元素和行级(内联)元素? 块级(block)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度: ...

  5. 关于HTML(含HTML5)的块级元素和行级(内联)元素总结

    1.首先我们要知道什么是块级元素和行级(内联)元素? 块级(block)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度: ...

  6. html常见的块元素与内联(行内)元素用法说明(一)

    html平时常见的块元素有:div, p, h1, h2, h3等,内联元素有:span, a, img等. 块元素的属性:无论内容是什么,都会独占一整行.主要用于页面布局. 内联元素的属性:只占自身 ...

  7. 行内元素有哪些?块级元素有哪些?空(void)元素有哪些?

    CSS规范规定,每个元素都有display属性,确定该元素的类型.每个元素都有默认的display值,如div的display默认值为“block”,则为“块级”元素:span默认display属性值 ...

  8. 块级元素或者行内元素在设置float属性之后是否改变元素的性质?

    块级元素使用float属性后,将其属性变成inline-block,不能改变其块级元素的性质,只是能有块级元素的特性,不独占一行,宽度不会占满父元素,和行内元素排列成一行 行内元素使用float属性后 ...

  9. 表单的子元素可不在form标签内

    表单是网页用于向服务器发送数据的元素.其用法类似下面: <form method="POST" action="/login"> <input ...

  10. CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...

随机推荐

  1. 面试题:HashSet、TreeSet 和HashMap 的实现与原理

    说下 TreeSet 和 HashSet 什么区别呢? 它们的区别点主要在他们的底层数据结构不同,HashSet 使用的是 HashMap 来实现,而 TreeSet 使用的是 TreeMap 来实现 ...

  2. fpga vga 显示

    VGA(Video Graphics Array)是IBM在1987年随PS/2机一起推出的一种视频传输标准,具有分辨率高.显示速率快.颜色丰富等优点,在彩色显示器领域得到了广泛的应用.不支持热插拔, ...

  3. 基于Docker的Mysql Cluster集群

    参考 mysql-cluster镜像 https://medium.com/@ahmedamedy/mysql-clustering-with-docker-611dc28b8db7 使用Docker ...

  4. Java + Selenium 无头浏览器模式

    我们说的无头模式,只是在爬虫执行的时候,不再弹出浏览器的界面,只是使用浏览器的内核进行爬取,下面是示例代码: //设置本地chromedriver地址 System.setProperty(" ...

  5. redis解决方案之三种集群模式的概念与部署

    上篇文章为大家总结了redis命令并讲述了持久化,今天我们来看一下redis的三种集群模式:主从复制,哨兵集群,Cluster集群 本篇文章先介绍redis-cluster集群模式,然后再依次介绍它的 ...

  6. 让ul li 或者table 进行循环往上滚屏

    转载:https://blog.csdn.net/u012138137/article/details/80729789 <div style="display:inline" ...

  7. 2.1 【配置环境】 JDK + eclipse + selenium

    1.jdk以及eclipse的具体安装详见  http://www.cnblogs.com/ericazy/p/6082194.html 安装1.7 jdk即可 2.selenium 旧版本安装: s ...

  8. Django框架-模板层

    Django框架-模板层 一.模板语法传值 1.验证是否python所有的数据类型都可以传递到前端 locals()的妙用:该方法虽然好用,但是在某些情况下会造成资源的浪费 结论:整型.浮点型.字符串 ...

  9. js中map和filter方法,以及search方法

    链接:https://blog.51cto.com/11871779/2126561 search方法: 介绍: search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符 ...

  10. 时间类型:datetime,timestamp,date,time,year

    时间类型 1.年月日时分秒:datetime #取值范围# '1000-01-01 00:00:00'到'9999-12-31 23:59:59' 占存储8B:表示的范围比timestamp大:支持0 ...