html——行内元素、块元素、行内块元素
行内元素：span ,a, ,strong , em, del, ins。特点：在一行上显示；不能直接设置宽高；元素的宽和高就是内容撑开的宽高。
块元素：div,h1-h6,p,ul,li。特点：独占一行；可以设置宽高；注释：嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
行内块元素(内联元素)：input img。特点：在一行上显示，也可设置其宽高。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
width: 300px;
height: 100px;
background-color: red;
} p {
height:50px;
background-color: #00ffff;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
上述代码演示了父元素div里嵌套了一个子元素p，p在没有设置宽度的情况下，默认的接受了父div的宽度。
行内元素转块元素：display：block。行业元素配置之后，将会拥有块元素的所有属性。可以独占一行，并可以设置宽高。
块元素转行内元素：display:inline。块元素配置之后，将会拥有行业元素的所有属性。不在拥有设置宽高的属性，也不会独占一行。
块元素和行内元素转行内块元素：display:inline-block。配置之后，既可以在一行上显示，也可以设置宽高。
html——行内元素、块元素、行内块元素的更多相关文章
- html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。
html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...
- css position 和 块级/行内元素解释
一.position 属性: static:元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. relative:元素框偏移某个距离.元素仍保 ...
- html元素两种分类。替换元素和不可替换元素；块级元素和行内元素
根据元素本身特点来分类: 替换元素替换元素根据其标签和属性来决定元素的具体显示内容.有<img><input><textarea><select>< ...
- 块级&行内元素总结
一.块级元素与行内元素的区别 块级元素与行内元素有几个关键区别: 格式 默认情况下: 块级元素会新起一行: 行内元素不会以新行开始. 内容模型 一般块级元素可以包含行内元素和其他块级元素.这种结构上的 ...
- 【CSS3】---块状元素、内联元素(又叫行内元素)和内联块状元素
元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...
- 【css】主要的块状元素(block element)和内联元素(inline element行内元素)
内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用 display可以强制转换行内元素和块状元素,还可以取消显示none 块元素(bloc ...
- 行内元素的上下margin 和 img元素的上下margin
行内元素的特点有: 1.与其他元素在同一行 2.宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bott ...
- web兼容学习分析笔记--块级、内联、内联块级元素
一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inli ...
- HTML中为何p标签内不可包含div标签?那哪些块元素里面不能放哪些块元素呢？
先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联元素</span>的差别</p> <p>测试一下<div& ...
- HTML元素被定义为块级元素或内联元素。那么什么是块级元素，什么是内联元素呢
块级元素(block)特性: 块级元素在浏览器显示时,通常会以新行来开始(和结束). 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制;就像以前用到的 ...
随机推荐
- 线程间的通信----wait/notify机制
wait/notify机制 实现多个线程之间的通信可以使用wait.notify.notifyAll三个方法.这三个方法都是Object类的方法.wait():导致当前线程等待,直到另一个线程调用此对 ...
- NetCore实现全局异常捕捉统一处理
做net项目时候,在Global.asax文件中可以通过Application_Error方法全局捕获异常并处理后统一跳转到自定义的错误页面. 下面是我个人在NetCore项目中实现全局捕获异常并统一 ...
- Lucene.Net 与 盘古分词
1.关键的一点,Lucene.Net要使用3.0下面的版本号,否则与盘古分词接口不一致. 关键代码例如以下 using System; using System.IO; using System.Co ...
- Jquery Mac OS Desktop项目想启动
想用Jquery做个MAC OS Desktop应用框架,欢迎大家提建议.
- 2015：WPS笔试-Android开发岗位
题目一共三道: 一:实现一个函数,能够推断两条直线的关系:平行.重合.垂直或相交. 二:实现一个函数.能够得到随意两个日期的相隔天数. 三:针对题目一或题目二,实现一个完整的单元測试. (笔试后在网上 ...
- C语言控制台窗体图形界面编程（总结）
本系列文章是笔者通过学习<C语言控制台窗体界面编程(修正版)>而写(关于此文档的很多其它信息请看本系列文章第一篇),旨在让大家更加清晰简洁easy地学习C语言控制台窗体界面的编程. 通过本 ...
- Longest Increasing Subsequence HDU - 6284
/* 首先预处理好f g数组 fi :以a[i]为结尾的 最长上升子序列的长度 gi :以a[i]为开始的 最长上升子序列的长度 mxx : 最长上升子序列的长度 线段树优化 nlogn (不包含a[ ...
- mysql20170410练习代码+笔记
今天的几道高级sql查询真的挺难的,感觉好像视频里讲过,当时也没有练,已经淡化了很多,sql还是要多练习啊!确实逻辑性挺强的. SELECT studentResult,studentNO FROM ...
- 【C++程序不输出】到底是什么造成了程序不输出
(ubuntu 16.04) 最近做题的时候,经常莫名其妙地,程序写的明明没毛病但是就是输出不了,气得我呀 然后某一次突然发现了原因,竟然是输出之后没有加endl或者空格! 例如: cout<& ...
- vue项目打包之后首页白屏的问题
本地的vue项目在server端浏览没问题,但是执行npm run build 打包之后在本地预览是白屏. 解决方法 1.路径问题 在config文件夹中找到index.js打开把assetsPubl ...