块级元素和行内元素，行内块元素
在学习 CSS 的时候发现，发现有些标签会独占一行，典型的例如 <div> 标签。而某些不会独占一行，典型如 <span> 标签。其实这是因为 CSS 的标签是有区分元素类型的。
元素分类
行内元素
又称为内联元素，行内元素的大小是靠本身内容的大小，宽高都设置无效。
常见的特点如下：
- 与其他行内元素并排
- 设置宽高无效
- 默认的宽度就是文本内容的宽度
- 水平方向的 padding 和 margin 属性可以使用。
- 只能容纳文本级元素和内联元素
- 注意：
- a 标签可以放块级元素，但是连接里面不能再放连接
常见的行内元素：
| 标签 | 作用 |
|---|---|
| <a> | 标签定义超链接 |
| <abbr> | 表示一缩写形式 |
| <acronym> | 定义只取首字母缩写 |
| <b> | 定义字体缩写 |
| <bdo> | 可覆盖默认的文本方向 |
| <big> | 定义大号字体加粗 |
| <br> | 定义换行 |
| <code> | 定义计算机代码文本 |
| <label> | 标签 |
| <select> | 创建单选或多选菜单 |
| <span> | 组合文档中的行内元素 |
| <small> | 定义小号字体 |
等等…
除了 p 之外，所有的文本级标签都是行内元素，p 是块级元素
块级元素
块元素通常会独占一行，或者多行，它的宽高，边距等都可以设置。
通常有这几个特点：
- 独占一行
- 可以设置宽度，高度，margin,padding
- 宽度默认所在容器的宽度。
- 可以容纳内联元素和块级元素
- 注意：
- 一些文字级标签不能放块元素。例如：<p>，<h1>~<h6>，<dt>
常见的块级元素：
| 标签 | 作用 |
|---|---|
| <caption> | 定义表格标题 |
| <address> | 定义地址 |
| <dd> | 定义列表中定义条目 |
| <div> | 定义文档中的分区或节 |
| <dl> | 定义列表 |
| <dt> | 定义列表中的项目 |
| <fieldset> | 定义一个框架集 |
| <form> | 创建 HTML 表单 |
| <h1>~<h6> | 定义标题 |
| <hr> | 定义一条水平线 |
| <p> | 定义段落 |
| <table> | 定义表格 |
| <li> | 标签定义列表项目 |
| <ul> | 定义无序列表 |
| <ol> | 定义有序列表 |
等等…
行内块元素
行内块元素从文字上看像块级元素和行内元素结合似的，其实比较特殊，比如<input>，<img>，<td> 可以设置宽高属性，这种就称为行内块元素。
通常有这几个特点。
- 默认宽度是内容宽度
- 宽度，高度，行高，margin,padding 都可以设置
- 和行内元素同一行，之间会留白。
块级元素和行内元素的转换
display 属性
通过 display 属性转换，其中 display 有三个值：
- inline:
- 值为 inline 将变成行内元素，比如 div
- 不能设置宽高，和行内元素并排
- block:
- 值为 block 的，比如 span
- 能设置宽高（填充父级），独占一行。
- inline-block
- 值为 inline-block 也就是变成行内块元素
示例代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.div1{width: 100px;height: 100px;background-color: red;display: inline;}.div2{width: 150px;height: 150px;background-color: green;display: inline-block;} .span1{width: 100px;height: 100px;background-color: yellow;display: block;}.div3{width: 300px;height: 200px;background-color: blue;}</style></head><body><div class="div1">div1</div><div class="div2">div2</div><span class="span1">span1</span><div class="div3">div3</div></body>
</html>效果：
正如效果图显示，值为 inline 的时候，div1 的宽高无效，仅仅为内容的宽度和高度。div2 为 inline-block 则生效了，而原本 span 是行内元素，设置宽高无效，而且不独占一行，现在设置的值为 block 便都有用了。
浮动 float 属性
浮动的目的。最初时，浮动只能用于图像（某些浏览器还支持表的浮动），目的就是为了允许其他内容（如文本）“围绕”该图像。而后来的CSS允许浮动任何元素。
float 一共有三个值：
- left
- 表示左浮动
- right
- 表示右浮动
- none
- 表示不浮动，默认
示例代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.div1{width: 100px;height: 100px;background-color: red;float: left;}.div2{width: 150px;height: 150px;background-color: blue;float: right;}.div3{width: 200px;height: 200px;background-color: green;float: none;}</style></head><body><div class="div1"></div><div class="div2"></div><div class="div3"></div></body>
</html>
效果图：
如图所示，三个 div ，其中 div1（红色） 左浮动，div2（蓝色） 右浮动，所以 div 1 仅靠在左边，div 2 仅靠在右边，而 div3 没有。
如果是浮动，将会和其他不同，脱离标准文档流，也就是相当于不占用位置了，漂浮起来。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动的特点
浮动有几个特点，大概是脱离标准流文档，浮动之间元素相互靠近，收缩。
- 脱离标准流文档
示例代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.div1{width: 50px;height: 50px;background-color: #0000FF;float: left;}.div2{width: 150px;height: 150px;background-color: #008000;}</style></head><body><div class="div1"></div><div class="div2"></div></body>
</html>
效果图：
对 div1 进行浮动时，会脱离文档流，若向右浮动，直到它的右边缘碰到框的右边缘，若向左浮动，脱离文档流并向左移动，直到它的左边缘碰到包含框的左边缘。因为这样，就会导致原有的 div2 被浮动的 div1 覆盖。
这里还有一种情况：
示例代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css">.span1{width: 50px;height: 50px; background-color: #FF0000;float: left;}</style></head><body><span class="span1"></span></body>
</html>
效果图：
这是因为标签一旦设置浮动，就没有分块状元素和行内元素，所以原本的行内元素也能设置宽高。
- 浮动之间元素相互贴近
在浏览器父级的宽度足够，那么浮动元素紧挨。
示例代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css">.div1{width: 100px;height: 100px;background-color: red;float: left;}.div2{width: 150px;height: 150px;background-color: blue;position:static;float: left;}.div3{width: 200px;height: 200px;background-color: green;float: left;}</style></head><body><div class="div1"></div><div class="div2"></div><div class="div3"></div></body>
</html>
效果图：
如果宽度不够，就有收缩情况，会根据包含的父级元素，如果太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”，如下情况：
- 浮动收缩
示例代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.div1 {width: 50px;height: 50px;background-color: blue;float: left;}.div2 {width: 150px;height: 150px;background-color: green;float: left;}.div3 {width: 250px;height: 250px;background-color: #FF0000;float: left;}.div4 {width: 250px;height: 1250px;float: left;}</style></head><body><div class="div4"><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div></div></body>
</html>效果图：
这里父容器 div 4 的宽度不够，div 3 也就自动下滑了。
如果不设置宽高，那么宽高也就是文本内容高度和宽度。
示例代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.div1{background-color: red;float: left;}</style></head><body><div class="div1">特性</div></body>
</html>效果图：
浮动的覆盖规则
这里并不是任何情况下浮动的元素向左或向右移动直至左右两边碰到包含框的两边才停止。如果某个浮动的元素在移动的过程中，碰到了包含内容的框时，也会停止。
也就是浮动元素在移动的过程中，除非碰到框没有内容，否则框内的内容会自我调整位置以防止被覆盖。比如<p>标签中的文本遇到浮动的框例如图像框，就自我调整位置，使得文字围绕着图像避免被覆盖。还有 <img>，<span>包含文字，等等
这里块级元素即使被覆盖，文字也会围绕在浮动元素旁，因为浮动本身就是为了让文字围绕在图像旁边。
记住，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清楚浮动。
如下 <span> 标签包含文字，不会被覆盖
示例代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.div1 {width: 50px;height: 50px;background-color: blue;float: left;}</style></head><body><div class="div1">div1</div><span class="span1">我是 span</span></body>
</html>
效果图：
清除浮动
- clean
- left
- 当前元素左边不能有浮动元素
- right
- 当前元素右边不能有浮动元素
- both
- 当前元素两边不能有浮动元素
- left
- overflow
- 规定当内容溢出元素框的时候会怎样。
- visible
- 默认值，内容会呈现在元素之外。
- hidden
- 内容会被修剪，其余隐藏不见
- scroll
- 内容会被修剪，显示滚动条显示其余内容
- auto
- 如果内容会被修剪，自动 显示滚动条显示其余内容
- inherit
- 继承父级的 overflow 属性的值
块级元素和行内元素，行内块元素相关推荐
- 5、HTML块级元素及行内元素
在 HTML 中,标签(tag)通常又被称作元素(element).例如 <a> 标签又叫做 <a> 元素,<p> 标签也叫作 <p> 元素. HTML ...
- 网页编程技术二（块级元素和行内标签）
1.块级元素 顾明思义,块级标签在网页中显示为块:块级标签一般独占一行,新的块级标签将从新的一行开始排列,它可以容纳其他块级元素和内联元素. 常见的会计标签: 1.1标题标签:<h1>&l ...
- html 图片行内剧中,HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)...
一.转义字符 由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响. < ...
- html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
目录 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
- HTML基础知识（一）：行内元素，块级元素，行内块元素
文章目录 一.html元素分类 二.块元素 三.行内元素 四.行内块元素 五.替换元素和非替换元素 六.元素转换 七.总结 一.html元素分类 html元素:行内元素.块元素.行内块元素 二.块元素 ...
- Web行内和块级元素 及表格应用
一.转义字符 由<> 包裹的文本 会当做标签去解析 空格 &emsp: ? < .gt < > "我认为这些电影对我来说非常特别.这是令人难以置信的 ...
- CSS中块级元素，行内块元素，行内元素的特点
CSS自学笔记 目录 一.什么是元素显示模式 二.CSS的元素显示模式 1.块元素 2.行内元素 3.行内块元素 前言 网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我 ...
- 详解块级元素、行内元素、行内块级元素类型、区别及相互转化
1)块级元素 特点: 1.总是从新的一行开始 2.高度.宽度都是可控的 3.宽度没有设置时,默认为100% 4.块级元素中可以包含块级元素和行内元素 5.块级文字元素中不能放入其他块级元素 6.块级大 ...
- HTML行内元素和块级元素
1 常见的行内元素和块级元素 特点 注意 块级元素 div h1~h6 p ul ol li 比较霸道:自己独占一行 高度,宽度.外边距以及内边距都可以控制 宽度默认是容器(父级宽度)的100% ...
- CSS 框的生成：块级元素和块框
在盒模型中,一切皆为框,即页面上的每个元素会生成一个矩形框.默认情况下,一个元素的类型,决定了该元素生成框的类型.块级元素生成块级框,行内级元素生成行内级框,没有被任何元素所包含的文本生成匿名框. 也 ...
最新文章
- Synchronized的两个用法
- 用FIO测试存储性能
- Qt creator使用笔记
- python项目设计-Python：实际项目中抽象出的小项目设计
- UDP、广播、多播与IGMP（七）
- 查看表扫描次数，并对比索引对表查询的作用
- Linux uniq命令
- JAVA 线程的介绍与使用
- 如何快速学习Java？ 1
- python3可视化窗口操作_Python3.x+PyQtChart实现数据可视化界面（PyQtChart绘图；还有保存图片）和业务逻辑分离案例01_自己写的，有UI界面源代码...
- 面向对象编程 --- 反射
- 【逐云】阿里“水电煤”背后的人物故事
- Linux ALSA驱动之声卡的创建流程
- ExtJs6学习(二)【环境介绍，构建程序】
- php导出excel处理微信昵称emoji表情符号和特殊颜文字符
- oracle kup04040,ORA-20011 ORA-29913 and ORA-29400错误的说明
- 2021年杭州行政区划调整方案与远景轨道线网概念图
- IOS平台开发实战培训
- 搞死SAP系统系列 让PO系统宕机
- 密码算法原理与分析：RSA安全与秘钥基础设施