一、字体样式
1.1 color、font-weight、font-style
字体相关
1. color 用来设置字体颜色
2. font-weight 设置字体的加粗
可选值:
normal 默认值,正常
bold 加粗
100-900 九个级别 (一般不用)
3. font-style 设置字体风格
可选值:
normal 默认值,正常
italic 表示斜体
1.2 font-size 设置字体所占的字体框大小
1)字体框
+++ 字体框
字体框就是字体存在的格子。
设置font-size,实质就是设置字体框的大小。
单位:px(pc端常用) rem(移动端) em pt(打印) vw(视窗宽度的百分比) vh(视窗高度的百分比) vmin vmax
+++ font-size和line-height区别
font-size设置字体框的大小;
line-height设置字体框的实际大小
2)font-size
+++ font-size
font-size 用来设置字体框大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#b1{
font-size:200px;
}
</style>
</head>
<body>
<div id="b1">查询的速度的人</div>
</body>
</html>
1.3 line-heiht 行高
1)line-heiht 行高
line-heiht 行高
1、行高指的是文字占有的实际高度。 行高会在字体框的上下平均分配。
利用这一点,可以使单行文字在盒子内垂直居中。
2、单位
1)直接指定一个大小
line-height:16px;
2)也可以写一个整数,表示是字体大小的倍数
font-size:12px;
line-height:2;
此刻行高表示24px;
3、默认行高 line-heihgt:1.33
4、利用行高,可以设置单行文字垂直居中。
【注意,行高可以撑起盒子的高度,所以高度可以不用设置】
>>>>>> 案例:行高指的是文字占有的实际高度,字体框指的是文字所在的框。行高会在字体框的上下平均分配
div的高度被内容撑开,此时div没有设置高度,所以此刻div的高度被行高撑开。
所以div的高度就是行高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border:1px solid red;
line-height:200px;
}
</style>
</head>
<body>
<div>
我是大厦IE
</div>
</body>
</html>
2)行高应用
>>>>>> 1)设置单行文字、行内元素、行内块元素、图片在元素中垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:500px;
border:1px solid red;
/**设置单行文字水平居中 */
height:500px;
line-height:500px;
}
</style>
</head>
<body>
<div>
我是大厦IE
</div>
</body>
</html>
>>>>>> 2)height可以省略不写,line-height可以撑起盒子的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#b1{
background-color: pink;
line-height: 200px;
}
</style>
</head>
<body>
<div id="b1">
xxxxxxxxxxx
</div>
</body>
</html>
>>>>>> 3)处理一段文字行与行之间的高度
1.4 font-family 指定字体格式
font-family 指定字体格式
1.可选值:
字体组
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
cursive 草书字体
fantasy 虚幻字体
这五类表示字体组,它只是指定了字体的类别,浏览器会自动使用该类别下的字体。
【浏览器决定具体的字体类型,我们只决定了字体类别】
字体
微软雅黑
...
2.font-family:'微软雅黑' ,'华彩','宋体';
font-family:'微软雅黑' ;
font-family可以指定多个字体,
字体生效时,优先使用第一个,第一个失效,使用第二个,依次递推。
1.5 @font-face 引入自定义字体格式
1)@font-face用于引入自定义字体
@font-face 可以将服务器中的字体给用户使用。
1.引入自定义字体使用步骤:
1.从网络上下载字体
2.在页面引入字体然后使用
@font-face {
/** 自定义字体的名字 */
font-family: "myfont";
/** 可以指定多个下载的字体的路径,优先使用第一个,不支持下一个 */
src: url(./font/Font.ttf),
url(./font/Font.ttf2);
}
/** 使用字体 */
body{
color:red;
font-size: 20px;
font-family: 'myfont';
}
2.引入自定义字体存在问题
1.加载速度
2.版权
2)步骤
>>>>>> 1、在网页上下载字体
https://font.chinaz.com/YingWenZiTiF.html
>>>>>> 2、将字体文件ttf 引入项目,然后使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: "myfont";
src: url(./font2/Font.ttf);
}
p{
color:red;
font-size: 20px;
font-family: 'myfont';
}
</style>
</head>
<body>
<p>wewwewe我最帅</p>
</body>
</html>
1.6 字体的简写属性
font可以设置字体所有相关属性
语法:
font: [font-weihgt] [font-style] [font-size/line-heihgt] [font-family]
例如:
font:20px;
font:20px 微软雅黑;
font:20px/1 微软雅黑;
font:bold italic 20px/1 微软雅黑,‘Aria’,‘宋体’;
注意:
1.font的属性可以省略不写,不写代表使用默认值。
所以如果使用font属性,注意font属性和其他字体相关属性重叠问题。
2.属性的书写方式必须按照这个顺序
>>>>>> font设置属性和分别设置相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.b1{
font-size:12px;
font-weight:bold;
font-style:normal;
line-height: 2;
font-family: '宋体','微软雅黑';
}
.b2{
font:bold normal 12px/2 '宋体','微软雅黑';
}
</style>
</head>
<body>
<div class="b1">
我是大厦IE
</div>
<div class="b2">
我是大厦IE
</div>
</body>
</html>
>>>>>> 使用font设置属性时,如果不写属性,则使用默认值,注意属性重叠问题
如下代码,设置的line-heihgt失效。原因是因为font原因。
font:bold normal 12px '宋体','微软雅黑';
虽然 font没有设置line-heihgt值,但是没有值表示使用了默认值1.33。
所以font把line-heihgt的属性重叠了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.b2{
line-height:200px;
font:bold normal 12px '宋体','微软雅黑';
}
</style>
</head>
<body>
<div class="b2">
我是大厦IE
</div>
</body>
</html>
二、字体样式 – 图标字体库(iconfont)
2.1 图标字体的使用
1) 来源
1.来源
在网页中经常使用一些小图标,可以通过图片来引入图标,但是图片大小本身很大,并且非常的不灵活。
所以在使用图标时,我们可以将图标直接设置为字体,
然后通过 @font-face的形式对字体引入,这样我们就可以通过使用字体的形式来使用图标。
2) 图标字体库的种类
2.图标字体库
图标字体库有多种。常用的:
1) fontawesome
2) 阿里巴巴图标字体库
我们不用管图标字体是如何制作,只需要下载图标字体库,
按照其指定的使用方式使用即可。
3) 使用步骤
3.图标字体库的使用步骤:
1.把字体库从官网上下载下来
2.引入图标字体库的css
3.参照css中的用法使用 (重点)
2.2 fontawesome图标字体库使用
1)帮助文档
在zeal中搜索fontawesome,即可
2)使用步骤
1.下载 https://fontawesome.com/start
2.解压
3.将css、webfonts移到项目中
4.将all.css引入到html中。
5.使用图标字体
<i class="fab xxx"></i>
<i class="fas xxx"></i>
xxx在帮助文档中可以查找。
fas或fab随便使用一个,哪一个有用就用哪一个
>>>>>> 1. 进入fontawesome官网,下载fontawesome字体库
https://fontawesome.com/start
>>>>>> 2. 解压fontawesome字体库
>>>>>> 3. 将解压文件中的css文件夹和webfonts文件夹拷贝到项目下的同一目录下。
>>>>>> 4. 引入css样式,然后使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/c/css/all.css" >
</head>
<body>
<i class="fab fa-affiliatetheme"></i>
</body>
</html>
3)图标字体库的原理
>>>>>> 进入引入的all.css文件中
>>>>>> 解析
由上图可知,fontawesome将图标制作成了字体图,我们引入的all.css文件,该文件引入了这个字体库。
然后我们按照它指定的使用方式使用即可。
4)图标字体库的其他用法
>>>>>> 方式一:使用伪元素
通过伪元素来设置图标字体库。
1.找到要设置的元素通过before或after进行选中。
2.在content中设置图标的编码
3.设置字体样式
font-family: 'Font Awesome 5 Brands'; //其中字体名称在all.css中查找
实质:通过上述的方法来设置图标,实质上可以参考all.css中的用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/c/css/all.css" >
<style>
li{
list-style: none;
}
li::before{
//指定字体
font-family: 'Font Awesome 5 Brands';
//
content:'\f296';
}
</style>
</head>
<body>
<ul>
<li> 明月几时有</li>
<li> 把酒问青天</li>
<li> 不知天上宫阙</li>
<li> 今夕是何年</li>
</ul>
</body>
</html>
>>>>>> 方式二:使用实体
<i class="fab"></i>
2.3 阿里巴巴图标字体库使用
>>>>>> 进入官网,搜索想要的图标,加入购物车,并下载
https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.dc64b3430&cid=29483
>>>>>> 将下载的文件解压然后复制到项目下
>>>>>> 引入图标字体库的css,并使用。【使用时,可参考css文件】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--阿里图标库-->
<link rel="stylesheet" href="/c/css2/iconfont.css" >
</head>
<body>
<i class="iconfont icon-dacong"> </i>
</body>
</html>
三、文本样式
3.1 文本样式
1. text-indent:2em 首行缩进
2. letter-spacing:12px; 设置字符间距
3. word-spacing:2px; 设置词间距
4. text-shadow设置文字阴影
1)text-shadow:水平偏移量 垂直偏移量 模糊半径 颜色
2)可以同时设置多组,中间用逗号隔开。
3)该属性的作用是在文字下面在写一行相同的文字。
5. text-transform:uppercase (转大写)/ lowercase(转小写)/capitalize(首字母大写)
6.text-decortion 设置文本下划线
1) 可选值
none 默认值
underline 下划线
overine 上划线
line-through 删除线
2)语法
text-decortion:underline ;
设置下划线,浏览器都支持
text-decortion:underline red ;
设置下划线,并且为红色,IE不支持
text-decortion:underline red dotted;
设置下划线,并且为红色、虚线,IE不支持
3) 可以设置多条线
text-decortion:underline overine line-through ;
a)text-shadow
text-shadow设置文字阴影
1)text-shadow:水平偏移量 垂直偏移量 模糊半径 颜色
2)可以同时设置多组,中间用逗号隔开。
3)该属性的作用是在文字下面在写一行相同的文字。
>>>>>> 设置文字阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
font-size: 17px;
text-shadow: 3px 1px 1px red;
}
</style>
</head>
<body>
<div>
我爱你中国!!
</div>
</body>
</html>
>>>>>> 设置文字阴影,可以设置多组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
font-size: 17px;
text-shadow: 3px 1px 1px red,-3px 1px 1px blue;
}
</style>
</head>
<body>
<div>
我爱你中国!!
</div>
</body>
</html>
b)text-decoration
>>>>>> 设置下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.b1{
text-decoration: underline;
}
.b2{
text-decoration: underline red;
}
.b3{
text-decoration: underline red dotted;
}
</style>
</head>
<body>
<p class="b1">ewwe二二二恶</p>
<p class="b2">ewwe二二二恶</p>
<p class="b3">ewwe二二二恶</p>
</body>
</html>
>>>>>> 设置下划线,可以设置多组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
font-size: 17px;
text-decoration: line-through overline underline;
}
</style>
</head>
<body>
<div>
我爱你中国!!
</div>
</body>
</html>
3.2 text-align、vertical-align
text-align、vertical-align
1.主要用于操作文本、行内元素和行内块元素的居中问题。
2.还可操作img标签。
1.text-align 设置文本、行内元素、行内块元素水平对齐方式
可选值: left 居左对齐
center 居中对齐
right 居右对齐
justify 两端对齐
用于操作文本/行内元素居中。即操作行内标签和行内块标签居中。(图片也是行内标签)
2.vertical-align 设置文本、行内元素、行内块元素垂直对齐方式,只会
可选值
baseline 默认值,基线对齐(基线指的就是文字框的底部)
top 顶部对齐 (文字框的上部与父元素对齐)
bottom 底部对齐 (文字框的底部与父元素对齐)
middle 居中对齐 (一般不用,非正式居中)
12px 设置像素(一般使用这个,直接指定像素即可)
示例:
vertical-align:12px;
vertical-align:-200px;
注意事项:
1)vertical-align只在单元格元素设置才会有效。
display:table-cell。将元素类型转为单元格。
1)text-align
>>>>>> 操作文本居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#b1{
width:200px;
height:200px;
background-color: pink;
text-align: center;
}
</style>
</head>
<body>
<div id="b1">
xxxxxxxx
</div>
</body>
</html>
>>>>>> 操作行内元素居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#b1{
width:200px;
height:200px;
background-color: pink;
text-align: center;
}
#b2{
background-color: blue;
}
</style>
</head>
<body>
<div id="b1">
<span id="b2">xxxxxxxx</span>
</div>
</body>
</html>
>>>>>> 操作图片居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#b1{
width:200px;
height:200px;
background-color: pink;
text-align: center;
}
</style>
</head>
<body>
<div id="b1">
<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" width="50px" height="50px">
</div>
</body>
</html>
2)vertical-align
a)vertical-align
vertical-align 设置文本框基线
1)可选值
baseline 默认值,基线对齐(基线指的就是文字框的底部)
top 顶部对齐 (文字框的上部与父元素对齐)
bottom 底部对齐 (文字框的底部与父元素对齐)
middle 居中对齐 (一般不用,非正式居中)
12px 设置像素(一般使用这个,直接指定像素即可)
2) 注意事项
1. vertical-align设置元素居中,必须配置display:table-cell使用。
2. vertical-align既可以设置给子元素,也可以设置为父元素。可以被继承。
3)作用
1. 操作元素居中
2. 解决子元素与父元素的空隙问题。
b)vertical-align 注意事项
>>>>>> vertical-align只是设置文本框的基线,如果想设置垂直居中,必须配合display:table-cell。(vertical-align只在单元格元素中设置垂直居中才有效)
display:table-cell。是将元素设置为单元格。此时,设置基线在中间,肯定是
居中的。
案例1:在块内元素中设置无效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#b1{
width:200px;
height:200px;
background-color: pink;
vertical-align: middle;
}
#b2{
background-color: blue;
}
</style>
</head>
<body>
<div id="b1">
<span id="b2">xxxxxxxx</span>
</div>
</body>
</html>
案例2:只在单元格元素中设置有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#b1{
width:200px;
height:200px;
background-color: pink;
display: table-cell;
vertical-align: middle;
}
#b2{
background-color: blue;
}
</style>
</head>
<body>
<div id="b1">
<span id="b2">xxxxxxxx</span>
</div>
</body>
</html>
>>>>>> vertical-align可以被子元素继承,所以既可以加在父元素上,也可以加在子元素上。
案例1:设置垂直居中,加在父元素中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:300px;
height:400px;
border:1px solid red;
/** 设置子元素垂直居中 ,加在父元素中*/
display: table-cell;
vertical-align: middle;
}
span{
width:300px;
height:300px;
}
</style>
</head>
<body>
<div class="box1">
<span>xxx</span>
</div>
</body>
</html>
案例2:设置垂直居中,加在子元素中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:300px;
height:400px;
border:1px solid red;
}
span{
width:300px;
height:300px;
/** 设置子元素垂直居中 ,加在子元素中*/
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box1">
<span>xxx</span>
</div>
</body>
</html>
c) vertical-align 作用
>>> a、操作文本、行内、行内块元素居中
>>>>>> 操作文本垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#b1{
width:200px;
height:200px;
background-color: pink;
display: table-cell;
vertical-align: middle;
}
#b2{
width:50px;
height:50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="b1">
xxxx
</div>
</body>
</html>
>>>>>> 操作行内元素垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#b1{
width:200px;
height:200px;
background-color: pink;
display: table-cell;
vertical-align: middle;
}
#b2{
width:50px;
height:50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="b1">
<span id="b2">xxxxx</span>
</div>
</body>
</html>
>>>>>> 操作图片垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#b1{
width:200px;
height:200px;
background-color: pink;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="b1">
<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" width="50px" height="50px">
</div>
</body>
</html>
>>> b、处理子元素与父元素的空隙问题
注意:
1.img标签我们称之为替换元素,当做文字显示,所以在图片显示时,会发现
图片和父标签底部有一段距离,这是因为文字的基线问题。我们可以通过
vertical-align来修正。
2.默认情况下,元素在td中是垂直居中的,可以通过vertical-align来修改。
a. 问题再现
如下图,我们会发现图片和父元素底部有空隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.b2{
border:1px solid red;
}
</style>
</head>
<body>
<div class="b2">
<img src="/c/2.png" />
</div>
</body>
</html>
b. 图片底部空隙修正
img标签是替换元素,浏览器在显示时把它当做文本处理,
所以在显示时,图片底部空隙就是因为文字框的基线造成的。
所以我们可以通过vertical-align来修正。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.b2{
border:1px solid red;
}
img{
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="b2">
<img src="/c/2.png" />
</div>
</body>
</html>
3.3 图片空隙问题
1)两个图片并列有空隙
>>>>>> 问题在线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width:300px;
height:300px;
vertical-align: bottom;
}
</style>
</head>
<body>
<img src="./img/1 (1).png" />
<img src="./img/1 (2).png" />
</body>
</html>
>>>>>> 解决方式
原因:这是由于元素之间的空格会被解析为一个空格。所以会有空隙。
解决方式:两个图片元素紧挨着,无空格。
<body>
<img src="./img/1 (1).png" /><img src="./img/1 (2).png" />
</body>
2)图片和父元素底部有空隙
>>>>>> 问题在线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
border:1px solid red;
}
img{
width:300px;
height:300px;
}
</style>
</head>
<body>
<div class="box1">
<img src="./img/1 (1).png" />
</div>
</body>
</html>
>>>>>> 解决方式
原因:图片在div排列,会被当做文字处理。
而图片和div的空隙实质上就是字体框造成。
解决方式:设置img的文本框底部与父元素对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
border:1px solid red;
}
img{
width:300px;
height:300px;
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="box1">
<img src="./img/1 (1).png" />
</div>
</body>
</html>
3)图片纵向在父元素中排列,图片之间有空隙
>>>>>> 问题在线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
border:1px solid red;
width:300px;
}
img{
width:300px;
height:300px;
}
</style>
</head>
<body>
<div class="box1">
<img src="img/1 (1).png">
<img src="img/1 (1).png">
</div>
</body>
</html>
>>>>>> 解决方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
border:1px solid red;
width:300px;
}
img{
width:300px;
height:300px;
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="box1">
<img src="img/1 (1).png">
<img src="img/1 (1).png">
</div>
</body>
</html>
3.4 设置溢出的内容显示省略号
1)white-space 样式
white-space 设置网页如何处理空白
可选值:
normal 正常,浏览器在处理空格时,会适度的换行显示
nowrap 不换行,直接一行显示
pre 保留空白,原样显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.b1{
white-space: normal;
}
.b2{
white-space: nowrap;
}
.b3{
white-space: pre;
}
</style>
</head>
<body>
<p class="b1">ewwe二二二恶wwwwwwwwww wwewewwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
<p class="b2">ewwe二二二恶wwwwwwwwww wwewewwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
<p class="b3">ewwe二二二恶wwwwwwwwww wwewewwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
</body>
</html>
1)溢出的内容显示省略号
text-overflow:ellipsis; 溢出的内容省略号显示。
text-overflow必须配合overflow、white-space、widht一起使用。
才能设置长文本隐藏,并自带省略号。这几个值缺一不可。
width 设置盒子宽度
white-space 设置空格换行
overflow 设置裁减
text-overflow 设置溢出省略号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.b1{
width: 300px;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p class="b1">ewwe二二二恶wwwwwwwwww wwewewwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
</body>
</html>
四、字体、文本样式切记
1.lint-height、text-align、verticle-align
1)这三个属性既可以处理文字,也可以处理行内元素、行内块元素和图片。其效果一致。
2)图片是替换元素,我们把它当做文字来显示,所以也使用这三个属性。
2.字体文本样式可以被子类继承。切记。