CSS - 块状元素、内联元素和内联块状元素
在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 - 块状元素、内联元素和内联块状元素的更多相关文章
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- CSS 一些基础知识(优先级、行内元素的一些属性、font-size单位) 怎样不加载图片
CSS大小写不敏感 选择器优先级如下所示: 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择 ...
- block(块级元素)和 inline(内联元素) 的区别
block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...
- 学习笔记——关于HTML(含HTML5)的块级元素和行级(内联)元素总结
1.首先我们要知道什么是块级元素和行级(内联)元素? 块级(block)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度: ...
- 关于HTML(含HTML5)的块级元素和行级(内联)元素总结
1.首先我们要知道什么是块级元素和行级(内联)元素? 块级(block)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度: ...
- html常见的块元素与内联(行内)元素用法说明(一)
html平时常见的块元素有:div, p, h1, h2, h3等,内联元素有:span, a, img等. 块元素的属性:无论内容是什么,都会独占一整行.主要用于页面布局. 内联元素的属性:只占自身 ...
- 行内元素有哪些?块级元素有哪些?空(void)元素有哪些?
CSS规范规定,每个元素都有display属性,确定该元素的类型.每个元素都有默认的display值,如div的display默认值为“block”,则为“块级”元素:span默认display属性值 ...
- 块级元素或者行内元素在设置float属性之后是否改变元素的性质?
块级元素使用float属性后,将其属性变成inline-block,不能改变其块级元素的性质,只是能有块级元素的特性,不独占一行,宽度不会占满父元素,和行内元素排列成一行 行内元素使用float属性后 ...
- 表单的子元素可不在form标签内
表单是网页用于向服务器发送数据的元素.其用法类似下面: <form method="POST" action="/login"> <input ...
- CSS和SVG中的剪切——clip-path属性和<clipPath>元素
剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...
随机推荐
- 面试题:HashSet、TreeSet 和HashMap 的实现与原理
说下 TreeSet 和 HashSet 什么区别呢? 它们的区别点主要在他们的底层数据结构不同,HashSet 使用的是 HashMap 来实现,而 TreeSet 使用的是 TreeMap 来实现 ...
- fpga vga 显示
VGA(Video Graphics Array)是IBM在1987年随PS/2机一起推出的一种视频传输标准,具有分辨率高.显示速率快.颜色丰富等优点,在彩色显示器领域得到了广泛的应用.不支持热插拔, ...
- 基于Docker的Mysql Cluster集群
参考 mysql-cluster镜像 https://medium.com/@ahmedamedy/mysql-clustering-with-docker-611dc28b8db7 使用Docker ...
- Java + Selenium 无头浏览器模式
我们说的无头模式,只是在爬虫执行的时候,不再弹出浏览器的界面,只是使用浏览器的内核进行爬取,下面是示例代码: //设置本地chromedriver地址 System.setProperty(" ...
- redis解决方案之三种集群模式的概念与部署
上篇文章为大家总结了redis命令并讲述了持久化,今天我们来看一下redis的三种集群模式:主从复制,哨兵集群,Cluster集群 本篇文章先介绍redis-cluster集群模式,然后再依次介绍它的 ...
- 让ul li 或者table 进行循环往上滚屏
转载:https://blog.csdn.net/u012138137/article/details/80729789 <div style="display:inline" ...
- 2.1 【配置环境】 JDK + eclipse + selenium
1.jdk以及eclipse的具体安装详见 http://www.cnblogs.com/ericazy/p/6082194.html 安装1.7 jdk即可 2.selenium 旧版本安装: s ...
- Django框架-模板层
Django框架-模板层 一.模板语法传值 1.验证是否python所有的数据类型都可以传递到前端 locals()的妙用:该方法虽然好用,但是在某些情况下会造成资源的浪费 结论:整型.浮点型.字符串 ...
- js中map和filter方法,以及search方法
链接:https://blog.51cto.com/11871779/2126561 search方法: 介绍: search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符 ...
- 时间类型:datetime,timestamp,date,time,year
时间类型 1.年月日时分秒:datetime #取值范围# '1000-01-01 00:00:00'到'9999-12-31 23:59:59' 占存储8B:表示的范围比timestamp大:支持0 ...