它们本身的宽度如何计算 高度如何计算----当时的想法是？

以后补 他们三个能否嵌套块级元素 行内元素

还有特殊的a标签

块级元素

块级元素高由内容撑起，宽默认100%，可以自己设置元素宽高。

块级元素独占一行，特点就是只要块级元素出现了，就得清场，有它的空间其他的东西别想出现。

块级元素内边距外边距上下左右都有效。

块级元素可以嵌套

块级元素的默认排列方式为竖着。

1.宽高

块级元素的高是由内容撑起，宽度默认100%，网页有多大，宽度就有多大。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border:1px solid #008000;}</style></head><body><div></div></body>
</html>

宽高设置有效

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border:1px solid #008000;width:100px;height: 50px;}</style></head><body><div></div></body>
</html>

高度对比--是否有内容

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border:1px solid #008000;}</style></head><body><!-- 无内容 --><!-- <div></div> --><!-- 有内容 --><div>1111</div></body>

2.换行

块级元素独占一行，即使一行有剩余空间，自己不需要，也不让别人用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border:1px solid #008000;width:100px;height: 50px;}</style></head><body><div>1111</div><div>2222</div></body>
</html>

只有元素浮动/定位或把自己设为行内元素/行内块元素才会一行有多个div

浮动
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border:1px solid #008000;width:100px;height: 50px;float: left;}</style></head><body><div></div><div></div></body>
</html>

定位
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border:1px solid #008000;width:100px;height: 50px;}.xx{position: absolute;top:8px;left:120px;}</style></head><body><div></div><div class="xx"></div></body>
</html>

行内元素
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border:1px solid #008000;width:100px;height: 50px;/* 设为行内元素 行内元素宽高由内容决定 */display: inline;}</style></head><body><div>111</div><div class="xx">222</div></body>
</html>

行内块
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border:1px solid #008000;width:100px;height: 50px;/* 行内块 */display: inline-block;}</style></head><body><div></div><div></div></body>
</html>

3.内外边距

注意:这里的外边距会出现一个外边距塌陷问题。

外边距塌陷

外边距塌陷

已知div的上下外边距都是10px，那么一个div高为52px,两个div高为104px,加上div中间的外边距总和20px,那么总高为124px, 但是图上高为114px。--------这就是外边距塌陷

面对这种情况，解决办法如下，在一个margin-top/bottom上就直接设置好自己想要的外边距。

比如直接在第一个div上设置margin-top为20px

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 消除页面的内外边距 */body,html{padding: 0;margin: 0;}div{border:1px solid #008000;width:100px;height: 50px;/* 上外边距为10px */margin-top: 10px;/* 下外边距为10px */margin-bottom: 10px;}</style></head><body><div></div><div></div></body>
</html>

外边距

块级元素可以设置上下左右外边距，上下左右外边距都生效。不过设置上下左右边距时，页面效果上边距和左边距更强势些，先依从它们。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 消除页面的内外边距 */body,html{padding: 0;margin: 0; }div{border:1px solid #008000;width:100px;height: 50px;/* 上外边距为10px */margin-top: 10px;/* 下外边距为10px */margin-bottom: 10px;margin-left:10px;margin-right:10px;}</style></head><body><div></div><div></div></body>
</html>

内边距

块级元素设置可以设置内边距，上下左右内边距都有效。

设置内边距以前

设置内边距以后
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 消除页面的内外边距 */body,html{padding: 0;margin: 0; }div{border:1px solid #008000;width:100px;height: 50px;padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;}</style></head><body><div>1111</div><div>2222</div></body>
</html>

4.嵌套

块级元素可以嵌套

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 消除页面的内外边距 */body,html{padding: 0;margin: 0; }.cc{width:300px;height: 100px;border: 1px solid #000000;}.dd{width:100px;height: 50px;border: 1px solid #FFC0CB;}</style></head><body><div class="cc"><div class="dd"></div></div></body>
</html>

5.默认排列方式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{width:100px;height:100px;border: 1px solid #1E90FF;}</style></head><body><div></div><div></div><div></div></body>
</html>

行内元素

行内元素没有宽高，设置宽高也无效，它的宽高由内容撑起

行内元素共用一行，空间不够才换行。就跟大家平时挤公交地铁一样，只要挤的进去，就绝不等下一辆。

行内元素内边距上下左右都有效，外边距左右有效，上下无效。

行内元素可以嵌套

行内元素的默认排列方式为横着。

行内元素不会随着网页缩放。

1.宽高

行内元素设置宽高无效

设置宽高前
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span{border:1px solid orangered;}</style></head><body><span></span></body>
</html>

设置宽高后
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span{border:1px solid orangered;width:10px;height: 10px;}</style></head><body><span></span></body>
</html>

宽高由内容撑起

标题
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span{border:1px solid orangered;width:10px;height: 10px;}</style></head><body><span>1111</span><span>22</span></body>
</html>

2.换行

行内元素不会独占一行，在同一行内会有多个行内元素，当一行占满，才会换行。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span{border:1px solid orangered;width:10px;height: 10px;}</style></head><body><span>1111</span><span>22</span><span>33333333333333333333333333</span></body>
</html>

一行占满问题？浏览器一行是指宽度，网页宽度由滑动条控制，理论上来说就是无限的

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span{border:1px solid orangered;width:10px;height: 10px;}</style></head><body><span>1111</span><span>22</span><span>33333333333333333333333333</span><span>4444444444444444444444444444444444444444444444444444444444444444</span><span>555555555555555555555555555555555555555555555555555555555555</span><span>666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666</span><span>77777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777666666666666777777777777777777777777777777777777777777777777777777777777777777777777777</span><span>888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888</span></body>
</html>

希望它换行可以把把转换为块级元素。

3.内边距

上下左右内边距设置都有效

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{padding: 100px;}span{border:1px solid orangered;    padding-top:10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;}</style></head><body><span>1111</span></body>
</html>

注意：如果不在body里加内边距，上边框线就看不见。

4. 外边距

左右有效 上下无效

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{margin:0;padding:0;}span{border:1px solid orangered;    margin-top:40px;margin-bottom: 40px;margin-left: 40px;margin-right: 40px;}</style></head><body><span>1111</span></body>
</html>

5.不会随着网页变化，保持原样

6.嵌套

行内元素能嵌套

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span{border:1px solid orangered; margin-top:40px;margin-bottom: 40px;margin-left: 40px;margin-right: 40px;}.cc{border:1px solid cornflowerblue;}</style></head><body><span>1111<span class="cc">22222</span></span></body>
</html>

试着嵌套块级元素，也不知道成功没
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span{border:1px solid orangered; margin-top:40px;margin-bottom: 40px;margin-left: 40px;margin-right: 40px;}.cc{border:1px solid cornflowerblue;width:300px;height: 300px;}</style></head><body><span>1111<div class="cc">22222</div></span></body>
</html>

7.默认排列方式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span{border:1px solid orangered; }</style></head><body><span>1111</span><span>2222</span><span>333</span><span>4444</span></body>
</html>

行内块元素

行内块元素没有宽高，宽高可由内容撑起，元素设置宽高有效

行内块元素共用一行，空间不够才换行。就跟大家平时挤公交地铁一样，只要挤的进去，就绝不等下一辆

行内块元素内边距上下左右都有效，外边距左右有效，上下无效

行内块元素可以嵌套

行内块元素的默认排列方式为横着

行内块元素不会随着网页缩放

1.宽高

行内块自身没有宽高，宽高由内容撑起来，设置宽高有效。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{display: inline-block;border:1px solid #008000;}</style></head><body><div></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{display: inline-block;border:1px solid #008000;}</style></head><body><div>111</div></body>
</html>


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{margin: 0;padding: 0;}div{display: inline-block;border:1px solid #008000;color:orangered;width:100px;height:100px;}</style></head><body><div>111</div></body>
</html>

2.换行

行内块元素也是不会独占一行，在同一行内会有多个行内元素，当一行占满，才会换行。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{display: inline-block;border:1px solid #008000;}</style></head><body><div>111</div></body>
</html>

3.内边距

上下左右内边距设置有效

注意：奇怪今天的浏览器自带空隙了

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{display: inline-block;border:1px solid #008000;padding-top:10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;}</style></head><body><div>111</div></body>
</html>

4.外边距

行内块元素上下左右外边距都有效

设外边距前
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{margin: 0;padding: 0;}div{display: inline-block;border:1px solid #008000;}</style></head><body><div>111</div></body>
</html>

设外边距后
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{margin: 0;padding: 0;}div{display: inline-block;border:1px solid #008000;margin-top: 10px;margin-bottom: 10px;margin-left:10px;margin-right: 10px; }</style></head><body><div>111</div></body>
</html>

5.是否会随网页自动缩放

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{margin: 0;padding: 0;}div{display: inline-block;border:1px solid #008000;}</style></head><body><div>111</div></body>
</html>

6.能否嵌套

可以嵌套

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{margin: 0;padding: 0;}div{display: inline-block;border:1px solid #008000;}</style></head><body><div>111<div>22222</div></div></body>
</html>

7.多个排列一起默认方式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{margin: 0;padding: 0;}div{display: inline-block;border:1px solid #008000;color:orangered;}</style></head><body><div>111</div><div>22222</div><div>3333</div></body>
</html>

专题 | 块级元素 行内元素 行内块元素相关推荐

  1. html块级标签转换,html标签中的块级元素详解

    今天,我们就讲解一下html标签中的块级元素,主要包括块级元素的概念.作用.特点,还有就是块级元素有哪些标签等内容. 块级元素概念 块级元素是一类css样式display默认值为block的html标 ...

  2. css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）

    HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...

  3. CSS块级元素和行内元素

    1. 宽高 width:数值; height:数值; 也可用百分比! 长高的设置不会被后代继承 2. 背景 (1)背景颜色 background-color:颜色值; 元素的背景颜色默认为transp ...

  4. 网页编程技术二（块级元素和行内标签）

    1.块级元素 顾明思义,块级标签在网页中显示为块:块级标签一般独占一行,新的块级标签将从新的一行开始排列,它可以容纳其他块级元素和内联元素. 常见的会计标签: 1.1标题标签:<h1>&l ...

  5. 行内元素与块级元素，以及区别

    行内元素与块级元素 首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block).行内(inline). 块级元素:(以下列举比 ...

  6. 块级元素，行内元素，行内块元素

    常见元素类型有:块级元素.行内元素.行内块元素 .(这里所说的元素,就是指标签) 一.块级元素: 块级元素独占一行,不和其他元素并排:可以设置宽高和上下外边距:不设置宽度时默认宽度 100%:可以容纳 ...

  7. html中哪个属性表示块级元素,HTML块级元素与行级元素

    转自:http://gkecenter.blog.163.com/blog/static/181380305201291745234195/ 一.两种类型 HTML中的大部分元素都可分为两种类型:块级 ...

  8. html标签的显示模式（块级标签，行内标签，行内块标签）（转）

    html标签的显示模式(块级标签,行内标签,行内块标签) 今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用, ...

  9. html标签的显示模式（块级标签，行内标签，行内块标签）

    今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用,比如宽.高.水平居中等,其实这个属性的使用只有在块级标签上 ...

  10. CSS 框的生成：块级元素和块框

    在盒模型中,一切皆为框,即页面上的每个元素会生成一个矩形框.默认情况下,一个元素的类型,决定了该元素生成框的类型.块级元素生成块级框,行内级元素生成行内级框,没有被任何元素所包含的文本生成匿名框. 也 ...

最新文章

  1. 最大数值(不能使用比较运算符)
  2. Leetcode 202. 快乐数 解题思路及C++实现
  3. 网络工程师面试PK--胜者为王
  4. opencv中匹配点对的坐标提取
  5. 发微博/文章设计思路
  6. linux那些事之LRU（3）
  7. 1032. 挖掘机技术哪家强(20)-PAT乙级真题
  8. 克隆网站工具_4 种开源云安全工具
  9. 远程源已存在于“ git push”到新存储库中
  10. 8.GitLab 里程碑
  11. 字节跳动基于Flink的MQ-Hive实时数据集成
  12. MFC学习日志（一）
  13. JeePlus：代码生成器
  14. 基于.net开发chrome核心浏览器【三】
  15. 利用python实现杜利特尔分解法
  16. 小游戏开发者流量变现指南
  17. 2024清华大学计算机考研信息汇总
  18. Mysql数据库提权——UDF提权
  19. make clean与make distclean的区别
  20. 【QGIS入门实战精品教程】10.2：QGIS中DEM三维显示方法

热门文章

  1. 命令行登录Mysql，远程登录Mysql的方法
  2. m4r转换工具html加载视频,m4r格式转换器——iphone铃声制作工具（mp3转换m4r）
  3. 名侦探白洞（二）：办公室“神秘人”事件
  4. 移动电源怎么选好？最好的移动电源推荐
  5. 使用Android RemoteCallbackList简化远端接口跨进程回调
  6. 缺少d3dx9_xx.dll/缺少PhysXLoader.dll/配置不正确等常见问题解决方法
  7. JavaScript日期加减，Juqery日期加减计算并赋值给input框
  8. DxOMark给魅族Pro 6打了74分
  9. 仪陇宏德中学2021高考成绩查询,仪陇宏德中学2020高考喜报来啦！详情戳进来看...
  10. 黑马程序员——C基础之推箱子游戏