CSS笔记——font、line-height知识点及图片间隙、文本溢出等解决方案

一、CSS字体属性

  1. font-family(字体族):指定字体的名称或类别。可以指定多个字体族,用逗号分隔,浏览器会按照指定的顺序依次寻找可用字体。可取值:

    • 字体名称:如"Arial"、"Times New Roman"等。
    • 通用字体系列:如"serif"、"sans-serif"、"monospace"等。
    • 自定义字体系列:如"myFont, Arial, sans-serif"。
  2. font-size(字号):指定字体的大小。可取值:

    • 绝对单位:如"px"、"pt"、"mm"、"cm"、"in"。
    • 相对单位:如"em"、"rem"、"ex"、"ch"、"vw"、"vh"、"vmin"、"vmax"。
    • 百分比:如"100%"、"200%"等。
  3. font-weight(字重):指定字体的粗细。可取值:

    • 数字:如"100"、"400"、"700"等,表示相应的字重值。
    • 关键字:如"normal"、"bold"、"bolder"、"lighter"等。
  4. font-style(字体样式):指定字体的风格。可取值:

    • 关键字:如"normal"、"italic"、"oblique"。
    • 继承值。
  5. font-variant(字体变形):指定字体的大小写形式。可取值:

    • 关键字:如"normal"、"small-caps"。
    • 继承值。
  6. font-stretch(字体拉伸):指定字体的紧缩或扩张程度。可取值:

    • 关键字:如"normal"、"condensed"、"expanded"、"ultra-condensed"、"extra-condensed"、"semi-condensed"、"semi-expanded"、"extra-expanded"、"ultra-expanded"。
    • 数字:如"50%"、"200%"等。
  7. line-height(行高):指定文本行的高度。可取值:

    • 绝对单位:如"px"、"pt"、"mm"、"cm"、"in"。

    • 相对单位:如"em(相对父元素的大小)"、"rem(相对根元素的大小)"、"ex(小写字母高度)"、"ch"、"vw"、"vh"、"vmin"、"vmax"。

    • 数字:表示字体大小的倍数。

    • 百分比:表示字体大小的百分比。

    • 行高相关注意点:

      1、行内元素高度由行高撑开(默认1.32倍),而不是字体的高度。就算字体不设置高度也会被行高撑开。

      2、height :line_hieight;行内元素上下垂直居中

      3、行高可以继承。一般可以给body设置

      body {
      line-light:1.5;
      }
      

      4、line-height 等于 font-size + 上下所占行间距

**注意:**以上属性可以合并成一个font属性,如font: 16px/1.5 Arial, sans-serif;,其中斜杠前面的是字号,斜杠后面的是行高。

二、其他常见属性

  • color:xxx; 设置字体颜色

  • text-align : center; 设置文本水平方向居中,也可设left、right、justify(两端对齐)

  • Vertical-align 适用于行内、行内块元素

    baseline ; 元素基线与父元素基线对齐

    middle ; 元素中心线与父元素中心线对齐

    top,bottom亦然

    可以接收像素值,正上负下

解决图片底部存在间隙

图片是行内元素,默认的图片对齐方式为vertical-align:baseline 基线对齐。baseline对其方式导致图片并不是与div的真实底部对齐,而是与文基线对齐。

解决方法:

  1. 给img(图片)设置display: block;
  2. 给img(图片)设置vertical-align: bottom;
  3. 修改line-height值为0或很小
  4. 父元素的font-size=0
  • text-index:设置文本缩进

  • text-decoration:none/underline(下划线)/line-throngh(贯穿线)/overline(上划线) 文本装饰

  • text-transform: uppercase(转小写)/none/lowercase(转小写)/capitalize(首字母大写)

  • word-spacing: xx px; 英文单词间距

  • letter-spacing:字母之间间距

  • white-spacing :nowrap(不换行,中文会自动换行)/normal,设置中文是否换行

  • word-break: 强制换行 ,可取值keep-all(不换行)、break-all(换行,英文不会自动换行)

解决文本溢出问题方案:

单行文本溢出显示省略号

css 复制代码
.overflow{
	width:200px
	overflow:hidden
	white-spacing:nowarp;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
}

多行文本溢出显示省略号

.overflow{
	width:200px
	height:66px;
	overflow:hidden
	text-overflow:ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
}

其他方法:定位或者专门的插件

利用伪类

.t:after{
  display: inline;
  content: "...";
  font-size: 16px;
}
相关推荐
吕彬-前端30 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱33 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai42 分钟前
uniapp
前端·javascript·vue.js·uni-app
密码小丑1 小时前
11月4日(内网横向移动(一))
笔记
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
鸭鸭梨吖2 小时前
产品经理笔记
笔记·产品经理
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js