block inline 和inline-block 块级元素和内联元素
2019独角兽企业重金招聘Python工程师标准>>>
非常好的一篇文章
block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。
大体来说HTML元素各有其自身的布局级别(block元素还是inline元素):
常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。
一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。
转载于:https://my.oschina.net/u/554046/blog/483661
block inline 和inline-block 块级元素和内联元素相关推荐
- 块级元素与行级元素(内联元素)
内联元素(inline element)一般都是基于语义级(semantic)的基本元素.内联元素只能容纳文本或者其他内联元素,常见内联元素"a".块元素(block elemen ...
- 浅谈块级元素和内联元素的嵌套规则
1. 替换和不可替换元素 从元素本身的特点来讲,可以分为替换和不可替换元素. a) 替换元素 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容. 例如浏览器会根据<img> ...
- CSS块级元素、内联元素概念
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- html能插入背景的行级元素,Html元素类型:块级元素、行内元素(内联元素)和行内块级元素...
8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素.事实上,我以前用的时候只 ...
- CSS的块级元素和内联元素,以及float
说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...
- CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解
原文网址:CSS之排列系列--块级元素.内联元素.内联块元素--区别/详解_IT利刃出鞘的博客-CSDN博客 简介 本文介绍CSS的块级元素(block).内联元素(inline)和内联块元素(inl ...
- html中块级元素并列,HTML的块级元素和内联元素
一.任何不是块级元素的可见元素都是内联元素## 块元素(block element) * address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir ...
- HTML中的块级元素和内联元素
1.特性 块级元素(block level element)总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示 宽度(width).高度(height).内边距(padding)和外边 ...
- html内联元素和块元素的特性,HTML中块级元素和内联元素的特性详解
原标题:HTML中块级元素和内联元素的特性详解 在网站布局中经常会遇到元素进行居中的时候,设置了text-align:center:margin:0 auto;有时候会起作用,但有时候对居中无效,刚接 ...
- 了解一下块级元素和内联元素
块级元素是指单独撑满一行的元素,如div.ul.li.table.p.h1等元素.这些元素的display值默认是block.table.list-item等. 内联元素又叫行内元素,不占有独立的区域 ...
最新文章
- Ubuntu 输入法安装
- YYDS 的 IDEA插件,没装上的安排起来!
- 【深度学习】基于Torch的Python开源机器学习库PyTorch回归
- spring中resource设计与实现
- .NET 也有 Husky 了
- mysql数据库的目录_了解MySQl数据库目录
- java 从未导入_Java 8的10个您从未听说过的功能
- centos7 yum安装maven_Linux安装tomcat、mysql 、Maven与Eclipse的整合、settings.xml
- 插槽作用域渲染按钮开关 ~ 满满的干货哦
- jQuery 学习笔记之十 (jQuery ajax )
- 【Asp.Net】GridView控件中Datakeys和DataKeyNames的说明
- Java学习路线总结,搬砖工逆袭Java架构师
- Java和Python哪个更适合初学者的问题
- Truecrypt之死
- 运营商iptv服务器,电信运营商IPTV业务发展趋势浅析
- C语言科学计数法常量,科学计数法c语言
- Unity Shader appdata详解
- Joomla 一个实例建站过程
- 怎么用java程序控制步进电机_用单片机按键控制步进电机转动的程序怎么写
- Navicat Premium 15的使用
热门文章
- X File 解析中遇到的问题和最终解决办法
- 转,动态生成的高度自适应
- CWinApp的应用与理解
- Spring Security OAuth2.0_实现分布式认证授权_扩展用户信息_Spring Security OAuth2.0认证授权---springcloud工作笔记156
- STM32工作笔记0032---编写跑马灯实验---寄存器版本
- maven异常001---报错The folder is already a source folder.的解决办法
- 关于图像质量评测的分析
- 杭电1259ZJUTACM
- 闭包Closures
- java碰到乱码如何解决方法_如何处理java的乱码