六、字体样式和文本样式
2024-05-11 19:21:08
一、字体样式
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-sizefont-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) fontawesome2) 阿里巴巴图标字体库我们不用管图标字体是如何制作，只需要下载图标字体库，按照其指定的使用方式使用即可。3) 使用步骤
3.图标字体库的使用步骤：1.把字体库从官网上下载下来2.引入图标字体库的css3.参照css中的用法使用 （重点） 2.2 fontawesome图标字体库使用
1）帮助文档
在zeal中搜索fontawesome，即可
2）使用步骤
1.下载 https://fontawesome.com/start2.解压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-align1.主要用于操作文本、行内元素和行内块元素的居中问题。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-align1）这三个属性既可以处理文字，也可以处理行内元素、行内块元素和图片。其效果一致。2）图片是替换元素，我们把它当做文字来显示，所以也使用这三个属性。2.字体文本样式可以被子类继承。切记。六、字体样式和文本样式相关推荐
- CSS -- CSS字体样式、文本样式、去掉列表的小圆点、背景、背景渐变
1. CSS字体样式.文本样式.去掉列表的小圆点.背景.背景渐变 1.1字体样式 字体样式 font-family 字体(可以添加2种字体,一种针对中文,一种针对英文) font-size 字体大小( ...
- css字体 text,css文本样式text、字体样式font
文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用 默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...
- 微信小程序开发基础 字体样式和文本样式的设置
微信小程序页面主要有4个页面,分别是: js页面.json页面,wxml页面.wxss页面 他们的功能分别是: js:页面逻辑文件 json:页面配置文件 wxml:页面描述文件 wxss:页面样式表 ...
- 字体样式，文本样式，背景样式，边框样式，线性渐变，伪类选择器，css权重
`## CSS入门基础(二) 字体样式 字体类型 font-family 字体大小 font-size 字体粗细 font-weight 100-700 400=normal 700=bold 字体得 ...
- CSS——美化网页元素（字体样式，文本样式，阴影，超链接伪类，列表，背景，渐变）
为什么要美化网页 1.1有效的传递页面信息 1.2美化网页,页面漂亮,才能吸引用户 1.3凸显页面主题 1.4提高用户体验 span标签:重点要突出的字使用该标签套起来 <!DOCTYPE ht ...
- android spannable 设置字体颜色,安卓文本样式-Spannable的使用
本文转载自 lixin84915的博客 Android文本样式 原文分为上下两部分,本文将上下整理成了一篇文章. 在android中,有 时候需要对文本进行各种特别的设置,比如颜色.大小.首行缩进, ...
- java导出excel如何设置单元格样式为文本样式
[color=green][b][size=medium]//新增的四句话,设置CELL格式为文本格式 HSSFCellStyle cellStyle2 = demoWorkBook.createCe ...
- 〖Python自动化办公篇⑨〗- word文件自动化 - 设置Word全局样式和文本样式
订阅 Python全栈白宝书-零基础入门篇 可报销!白嫖入口-请点击我.推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 Python全栈白宝书专栏,免费阶段订阅数量43 ...
- 修改表格字体颜色_word排版应用：如何创建文本样式和表格样式
样式,大家应该不陌生,在Word中是一个非常强大的功能,运用得好,可以节省很多时间和精力.但如果你不会用,关键时刻可以把你急哭了! 在前面的"Word样式,简单又实用!"和&quo ...
最新文章
- 亲测可以使用的：Maven将中央仓库修改为阿里云的maven仓库
- django创建项目案例1详细介绍方法01
- 利剑无意之JAVA面试题（一）
- mysql添加字符串日期时间_mysql学习笔记--- 字符串函数、日期时间函数
- Stanford CoreNLP 3.6.0 中文指代消解模块调用失败的解决方案
- 谷歌智能助理能同时听懂两种语言 超过同类产品
- interface_cast做什么的?
- Java 验证二代身份证号码是否正确
- 小程序不同页面之间通讯的解决方案 1
- vivo S9无法激活手机了vivoS9e怎么解锁平台刷机教程屏幕锁不记得了可以用这个方法教程重装系统固件软件S9手机如果已忘记密码可以自己学习升级降级USB操作了
- 机器学习 | 数学基础
- 系统集成项目管理工程师考试大纲和复习知识点
- 农历和阳历日期互转，Python实现
- 经纬度坐标转换的方法
- CVE-2013-3893 IE浏览器UAF漏洞分析
- 树莓派的GPIO等接口
- 【后缀数组】【线段树】codeforces102028H Can You Solve the Harder Problem?
- 国科大学习资料--人工智能原理与算法-第一次作业解析（学长整理）
- 稀疏数组练习demo 数据结构和算法
- 凌云驭势 亚马逊云科技开启re:Invent中国行
热门文章
- linux 时钟分频,浅析AD9522时钟分频电路原理
- 运营商再次大规模建设新5G网络，用户或被迫更换5G手机
- Could not find a version that satisfies the requirement cryptography (from pymysql) (from versions:
- .NET 6 实现滑动验证码（七）、生成验证码
- ABB 120 六轴机械手臂编程调试（三）
- 人工智能离不开“人工投喂”数据，现在中国约有 100 万人做这事
- selenium模拟登陆豆瓣并获取cookies
- CMYK模式(cmyk模式导出的图片颜色变了)
- SpringBoot部署
- kubernetes增加删除master节点操作