CSS里有哪些常见的块级元素和行内元素以及其区别?
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。 div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;与之相反,像“span”“a”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。
区别:
块级元素(block)特性:
- 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
- 和相邻的内联元素在同一行;
- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;
内联元素(行内元素)内联元素(inline element)
* a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体(不推荐) * bdo - bidi override * big - 大字体 * br - 换行 * cite - 引用 * code - 计算机代码(在引用源码的时候需要) * dfn - 定义字段 * em - 强调 * font - 字体设定(不推荐) * i - 斜体 * img - 图片 * input - 输入框 * kbd - 定义键盘文本 * label - 表格标签 * q - 短引用 * s - 中划线(不推荐) * samp - 定义范例计算机代码 * select - 项目选择 * small - 小字体文本 * span - 常用内联容器,定义文本内区块 * strike - 中划线 * strong - 粗体强调 * sub - 下标 * sup - 上标 * textarea - 多行文本输入框 * tt - 电传文本 * u - 下划线 * var - 定义变量
块元素(block element)
* address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir - 目录列表 * div - 常用块级容易,也是css layout的主要标签 * dl - 定义列表 * fieldset - form控制组 * form - 交互表单 * h1 - 大标题 * h2 - 副标题 * h3 - 3级标题 * h4 - 4级标题 * h5 - 5级标题 * h6 - 6级标题 * hr - 水平分隔线 * isindex - input prompt * menu - 菜单列表 * noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容 * noscript - )可选脚本内容(对于不支持script的浏览器显示此内容) * ol - 排序表单 * p - 段落 * pre - 格式化文本 * table - 表格 * ul - 非排序列表
可变元素 可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet * button - 按钮 * del - 删除文本 * iframe - inline frame * ins - 插入的文本 * map - 图片区块(map) * object - object对象 * script - 客户端脚本
CSS里有哪些常见的块级元素和行内元素以及其区别?的更多相关文章
- CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- CSS学习笔记——盒模型,块级元素和行内元素的区别和特性
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...
- CSS基础知识(概念、块级元素、行内元素、选择器)
1.CSS概念 全称为Cascading Style Sheets(层叠样式表),支持专有的文件 - 扩展名为".css" 作用:将HTML的结构(HTML标签即html)与样式( ...
- [HTML/CSS]盒子模型,块级元素和行内元素
目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
- css块级元素和行内元素详细解析
块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div p form ul ol li 等: 常见的行内元素:span stronh em; ...
- [转]CSS块级元素和行内元素
原地址:http://www.studyofnet.com/news/398.html 本文导读:HTML中的元素可分为两种类型:块级元素和行级元素.这些元素的类型是通过文档类型定义(DTD)来指明. ...
- 【CSS系列】块级元素和行内元素
块级元素: 块级元素生成一个元素框,默认会填充其父元素的内容区,旁边不能有其他元素,换句话说,它在元素框之前和之后生成了“分隔符”. 列表项是块级额元素的一个特例,除了表现方式与其他块元素一致,列表项 ...
- CSS标准文档流 块级元素和行内元素
标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...
- CSS块级元素与行内元素
CSS块级元素与行内元素 行内元素与块状元素 1.块级元素:可以设置 width, height属性. 行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化 ...
随机推荐
- java String分配内存空间备忘
栈内存 堆内存 基础类型,对象引用(堆内存地址) 由new创建的对象和数组, 存取速度快 相对于栈内存较慢 数据大小声明周期必须确定 分配的内存由java虚拟机自动垃圾回收器管理.动态分配内存大小 共 ...
- Eventually Consistent(最终一致性)(转)
应该说搞分布式系统必读的文章了,转过来,这是2008年12月Werner revise过的版本,先贴上内容简介:分布式系统的CAP理论 CAP理论(data consistency, system a ...
- java上传excel文件及解析
java上传excel文件及解析 CreateTime--2018年3月5日16:25:14 Author:Marydon 一.准备工作 1.1 文件上传插件:swfupload: 1.2 文件上 ...
- plsql 快捷键配置
plsql 快捷键配置 CreateTime--2018年4月23日17:41:45 Author:Marydon 功能快捷键 预设条目 中文解释 快捷键配置Edit/Undo 撤销 ctrl+z ...
- 【Linux】war包的解压与压缩
现在存在一个war包test.war(以下是在Linux上操作) 1.解压war包 jar –xvf test.war 说明:直接解压到当前文件夹,如果需要解压到指定的文件夹下,需要将test.war ...
- 细说HTML元素的隐藏和显示
CSS文档对HTML的显示和隐藏有2个属性可供选择: 1.display 2.visiblity 这2个有什么区别呢? display: display版本:CSS1/CSS2 兼容性:IE4+ NS ...
- 兼顾pc和移动端的textarea字数监控的实现方法
概述 pc端移动端中文本框监控字数的功能的一种较为简单的实现,考虑到安卓和IOS输入法输入过程中是否触发keyup的差异.利用监听compositionstart判断是否开启了输入法.从而实现体验较为 ...
- Mac 通过活动监视器关闭卡死进程
前言: 心好累,Lantern太不省事了 之前装过之后,就设定了开启自启动,搞得我上网都受影响(这玩意,qq没事,但是网易云之类的一些软件上网都不行了...就是这玩意搞的鬼) 没办法,点击关闭吧... ...
- hduoj----(1033)Edge
Edge Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ( ...
- 给你出道题:依次去掉离中心最远的M个点
给定一个数组a[N],里面包含N个向量.现在要求进行删点操作,删点原则如下: 1.求出N个向量的中心O1,删除离O1最远的那个点 2.求出N-1个向量的中心O2,删除O2最远的那个点 ...... 重 ...