一、文本溢出
注：此代码需要一步一步实现，才能看见溢出原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
p{
width:200px;
height:64px;
background:pink;
margin:100px auto;
/* white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis; */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
</style>
</head>
<body>
<p>哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</body>
</html>代码详解：
1、white-space:空白空间的处理
normal: 默认值,多个空白会被忽略只留一个
pre:空白会被保留
pre-wrap:保留空白，可以进行换行
pre-line 效果和默认值一样的
**nowrap:文本不会换行
2、 overflow：内容溢出
visible:默认值,内容不会被修剪，会在元素框外显示
**hidden: 隐藏,内容会被修剪，看不到超出的部分
scroll:内容会被裁剪，通过滚动条查看内容
auto:内容会被裁剪，通过滚动条查看内容
3、 text-overflow:文本溢出显示的符号
clip 不显示省略号
ellipsis 显示省略号
4、单行文本溢出显示省略号：white-space:nowrap; 不换行
overflow:hidden; 溢出隐藏
text-overflow:ellipsis; 显示省略号
width: 限定固定宽度
5、多行文本溢出显示省略号：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
二、元素类型
1、元素类型分为“块元素”和“内联元素”以及“内联块级元素”
内联块级元素（有争议：单独当成一类 或者 并入到内联元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
div{
width:100px;
height:100px;
background:aqua;
}
a{
width:100px;
height:100px;
background:aqua;
padding:10px 20px;
margin:10px 20px;
}
</style>
</head>
<body>
<!-- 块级元素 -->
<div>1</div>
<div>2</div>
<div>3</div>
<!-- 内联元素 -->
<a href="#">11</a>
<a href="#">2222222</a>
<a href="#">33333333</a>
</body>
</html>2、知识增加
2.1元素类型：
css盒模型显示分类：
三类划分1：
块级元素
内联元素
内联块级元素（有争议：单独当成一类 或者 并入到内联元素）
三类划分2：
块级元素
内联元素
可变元素 img input
2.2各种元素类型的特点：
一：块级元素：
1：块级元素，在页面中以矩形进行显示
2：块级元素，能够直接设置宽高
3：块级元素，从上往下进行排列的，独占一行
4：块级元素，一般用于内容或者其他元素的容器
二：内联元素：
1：内联元素，不能设置大小，由内容撑开，最小单位是矩形
2：内联元素，在一行内从左往右进行排列
3：内联元素也支持盒模型的属性，但是个别属性不能正确的显示(margin-top/margin-bottom)
三：可变元素：
根据布局流的规则，生成块或者内联
2.3常见的内联元素和块级元素
2.3.1 常见的块级元素：
- div -最常用的块级元素
- dl - 和dt-dd 搭配使用的块级元素
- form - 交互表单
- h1 -h6- 大标题
- hr - 水平分隔线
- ol – 有序列表
- p - 段落
- ul - 无序列表
- li
- fieldset - 表单字段集
- colgroup-col - 表单列分组元素
- table-tr-td 表格及行-单元格
2.3.2常见的内联元素：
- a –超链接（锚点）
- b - 粗体(不推荐)
- br - 换行
- i - 斜体
- em - 强调
- img - 图片
- input - 输入框
- label - 表单标签
- span - 常用内联容器，定义文本内区块
- strong - 粗体强调
- sub - 下标
- sup - 上标
- textarea - 多行文本输入框
- u - 下划线
- select - 项目选择
三、元素类型转换
1、类型转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
a{
width:100px;
height:100px;
background:aqua;
/* 转为块级元素 */
display:block;
}
div{
width:100px;
height:100px;
background:aqua;
/* 转为内联元素 */
display:inline;
}
p{
width:100px;
height:100px;
background:orange;
/* 隐藏 */
display:none;
}
</style>
</head>
<body>代码详解
元素类型转换：display
display的属性值：
1：display:block;
作用：让元素转为块级元素，拥有块级元素的特点
大部分块级元素的display属性值为 block
2:display:inline;
作用：让元素转为内联元素，拥有内联元素的特点
大部分的内联元素的display属性值为inline
3:display:none;
作用：隐藏元素，不占据页面空间
知识增加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
a{
width:100px;
height:100px;
background:yellow;
/* 添加浮动 */
float:left;
/* 文字位置 */
text-align: center;
line-height: 100px;
/* 去下划线 */
text-decoration:none;
}
</style>
</head>
<body>
<a href="#">好好</a>
<a href="#">好好</a>
</body>
</html>
<!--
元素设置了浮动属性，就相当于添加了display:block;
-->2、inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
a{
width:100px;
height:100px;
background:teal;
/* 转为内联块级元素 */
display:inline-block;
font-size:16px;
}
div{
font-size:0;
}
</style>
</head>
<body>
<div>
<a href="#">我爱中国</a>
<a href="#">我爱中国</a>
<a href="#">我爱中国</a>
<a href="#">我爱中国</a>
<a href="#">我爱中国</a>
</div>
</body>
</html>代码详解
display:inline-block; 内联块级元素
特点：
1:能设置宽高
2：在一行内从左往右排列
3：inline-block支持 vertical-align属性
解决默认的一个字符间距：
方式一：
a:给父元素添加属性： font-size:0;
b:再 给子元素添加对应的宽高 font-size
方式二：
子元素不要进行换行
3、 vertical-align
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
div{
background:rgb(47, 170, 226);
}
img{
vertical-align: middle;
display:block;
}
</style>
</head>
<body>
<div>xxx
<img src="../images/a.jpeg" alt="">
</div>
</body>
</html>初始
添加 vertical-align:middle; / display:block;后
代码详解
图片默认由3px的缝隙问题：
a:img{
vertical-align:middle;
}
b:img{
display:block;
}
4、display-inlineblock
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 500px;
background: hotpink;
text-align: center;
}
p {
width: 100px;
height: 100px;
background: skyblue;
display: inline-block;
vertical-align: middle;
}
span {
vertical-align: middle;
width: 0;
height: 100%;
display: inline-block;
}
</style>
</head>
<body>
<div>
<p>我爱中国</p>
<span>中国爱我</span>
</div>
</body>
</html>
<!--
三个条件：
1：必须给容器（父元素）加上text-align:center;
2:必须给当前元素转成行内块元素（display:inline-block;）再给当前元素加上vertical-align:middle;
3：在当前元素的后面（没有回车）加上同级元素span;并对span进行vertical-align:middle;width:0;height:100%;display:inline-block
-->5、置换元素与非置换元素
置换元素：
浏览器根据标签和属性，来决定显示的具体内容 img input
非置换元素：
浏览器中大多数元素都是非置换元素，内容直接展示再浏览器上
6、便签嵌套规范
一： 标签本身的嵌套规范：
table tr td
ul li
dl dt dd
二：块级元素嵌套内联元素
<div> √
<span></span>
</div>
三：块级元素嵌套块级元素
<p> ❌
<div></div>
</p>
<p> ❌
<p></p>
</p>
四：内联元素嵌套块级元素：
<span> ❌
<div></div>
</span>
特殊：
<a> √
<div></div>
</a>
五：自己嵌套自己
<h2> ❌
<h2></h2>
</h2>
<a>
<a></a>
</a>
特殊： √
<div>
<div></div>
</div>
扫一扫
8045
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
