58同城网站模板下载,西樵网站制作,怎么做秒赞网站,公众号运营策划方案模板一、CSS字体属性 font-family#xff08;字体族#xff09;#xff1a;指定字体的名称或类别。可以指定多个字体族#xff0c;用逗号分隔#xff0c;浏览器会按照指定的顺序依次寻找可用字体。可取值#xff1a; 字体名称#xff1a;如Arial、Times N…一、CSS字体属性 font-family字体族指定字体的名称或类别。可以指定多个字体族用逗号分隔浏览器会按照指定的顺序依次寻找可用字体。可取值 字体名称如Arial、Times New Roman等。通用字体系列如serif、“sans-serif”、monospace等。自定义字体系列如myFont, Arial, sans-serif。 font-size字号指定字体的大小。可取值 绝对单位如px、“pt”、“mm”、“cm”、“in”。相对单位如em、“rem”、“ex”、“ch”、“vw”、“vh”、“vmin”、“vmax”。百分比如100%、200%等。 font-weight字重指定字体的粗细。可取值 数字如100、“400”、700等表示相应的字重值。关键字如normal、“bold”、“bolder”、lighter等。 font-style字体样式指定字体的风格。可取值 关键字如normal、“italic”、“oblique”。继承值。 font-variant字体变形指定字体的大小写形式。可取值 关键字如normal、“small-caps”。继承值。 font-stretch字体拉伸指定字体的紧缩或扩张程度。可取值 关键字如normal、“condensed”、“expanded”、“ultra-condensed”、“extra-condensed”、“semi-condensed”、“semi-expanded”、“extra-expanded”、“ultra-expanded”。数字如50%、200%等。 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;其中斜杠前面的是字号斜杠后面的是行高。
二、其他常见属性 colorxxx; 设置字体颜色 text-align : center; 设置文本水平方向居中也可设left、right、justify(两端对齐) Vertical-align 适用于行内、行内块元素 baseline ; 元素基线与父元素基线对齐 middle ; 元素中心线与父元素中心线对齐 topbottom亦然 可以接收像素值正上负下
解决图片底部存在间隙 图片是行内元素默认的图片对齐方式为vertical-align:baseline 基线对齐。baseline对其方式导致图片并不是与div的真实底部对齐而是与文基线对齐。 解决方法 给img图片设置display: block;给img图片设置vertical-align: bottom;修改line-height值为0或很小父元素的font-size0 text-index设置文本缩进 text-decorationnone/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换行英文不会自动换行
解决文本溢出问题方案 单行文本溢出显示省略号 .overflow{width:200pxoverflow:hiddenwhite-spacing:nowarp;text-overflow:ellipsis;-o-text-overflow:ellipsis;
}多行文本溢出显示省略号 .overflow{width:200pxheight:66px;overflow:hiddentext-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}其他方法定位或者专门的插件 利用伪类 .t:after{display: inline;content: ...;font-size: 16px;
}
