line-height
的另一个朋友font-size
vertical-align
百分比值属性是相对于line-height
计算,line-height
的数值属性和百分比值都是相对于font-size
计算。
font-size
和vertical-align
的隐秘故事See the Pen 图标垂直居中 by whjin (@whjin) on CodePen.
原理:内联元素默认基线对齐,图片的基线是图片的下边缘,文字内容的基线是字符x
下边缘。图片下边缘和文字字形边缘往上位置对齐。通过vertical-align:25%
声明让图片的下边缘和中文汉字的中心线对齐。
font-size
与ex
、em
和rem
的关系总结:1em
的计算值等同当前元素所在的font-size
计算值。
font-size
的关键字属性值larger
、smaller
xx-large
、x-large
、large
、medium
、small
、x-small
、xx-small
font-size:medium
,此时这个局部展示区域的字号跟随浏览器的设置,默认计算值是16px
。em
,然后基于16px
进行转换。font-size:0
与文本的隐藏隐藏logo
对应元素内的文字,除了text-indent
缩进隐藏外,还可以使用以下方法:
.logo {
font-size: 0;
}
font-family
font-family
支持两类属性值,一类是字体名,一类是字体族。
字体族:
serif
:衬线字体sans-serif
:无衬线字体monospace
:等宽字体cursive
:手写字体fantasy
:奇幻字体system-ui1
:系统UI字体字体分衬线字体和无衬线字体。
1. 等宽字体与代码呈现
2. 等宽字体与图形呈现
3. ch
单位与等宽字体布局
1ch
表示一个0
字符的宽度。
Windows常见内置中文字体和对应英文名称。
字体中文名 | 字体英文名 |
---|---|
宋体 | SimSun |
黑体 | SimHei |
微软雅黑 | Microsoft Yahei |
微软正黑体 | Microsoft JhengHei |
楷体 | KaiTi |
新宋体 | NSimSun |
仿宋 | FangSong |
微软正黑体是一款全面支持ClearType技术的TrueType无衬线字体,用于繁体中文系统。
font-weight
font-style
font-style:normal
font-style:italic
,使用当前字体的斜体font-style:oblique
,单纯让文字倾斜font-variant
font
属性font
属性完整语法:[font-style||font-variant||font-weight]?font-size[/line-height]?font-family
,(font-size
和font-family
是必需项)。
font
缩写会破坏部分属性的继承性,必须要带上font-family
。利用@font face
规则将字体列表重定义为一个字体。
font
属性font
属性支持关键字属性值,语法:font:caption|icon|menu|message-box|small-caption|status-bar
caption
:活动窗口标题栏使用的字体icon
:包含图标内容所使用的字体,如所有文件夹名称、文件名称、磁盘名称,浏览器窗口标题所使用的字体menu
:菜单使用的字体,如文件夹字体message-box
:消息盒里面使用的字体small-caption
:调色板标题所使用的字体status-bar
:窗体状态栏使用的字体使用关键字作为属性值必须是独立的,不能添加font-family
或font-size
等。
font
关键字属性值的应用价值//推荐使用
html {font: menu;}
body {font-size: 16px;}
html {font: small-caption;}
body {font-size: 16px;}
html {font: status-bar;}
body {font-size: 16px;}
@font face
规则@font face
的本质是变量@font face
的本质上就是一个定义字体或字体集的变量,包括字体重命名、默认字体样式设置等。
@font face
规则支持的CSS属性有font-family
、src
、font-style
、font-weight
、unicode-range
、font-variant
、font-stretch
和font-feature-settings
。
@font-face {
font-family: 'example';
src: url("example.ttf");
font-style: normal;
font-weight: normal;
unicode-range: U+0025-00FF;
font-variant: small-caps;//忽略
font-stretch: expanded;//忽略
font-feature-settings: "ligal" on;//忽略
}
1. font-family
@font-face {
font-family: '$';
src: url("example.ttf");
}
2. src
如果是使用系统字体,则使用local()
功能符;如果使用外链字体,则使用url()
功能符。
@font-face {
font-family: ICON;
src: url("icon.eot") format('eot');
src: url("icon.eot?#iefix") format("embedded-opentype"),
url("icon.woff2") format("woff2"),
url("icon.woff") format("woff"),
url("icon.ttf") format("truetype"),
url("icon.svg#icon") format("svg");
font-style: normal;
font-weight: normal;
}
eot
格式是IE私有的。(舍弃)woff
是专门为Web开发而设计的字体格式。(次优先使用)woff2
是比woff
尺寸更小的字体,是Web开发首选字体。(优先使用)ttf
格式作为系统安装字体比较多。(舍弃) 推荐使用方法:
@font-face {
font-family: ICON;
src: url("icon.eot") format('eot');
src: local('☺'),
url("icon.woff2") format("woff2"),
url("icon.woff") format("woff"),
url("icon.ttf") format("truetype");
}
3. font-style
4. font-weight
5. unicode-range
unicode-range
的作用是可以让特定的字符或特定范围的字符使用指定的字体。
@font face
与字体图标技术.icon {
font-family: ICON;
}
.icon-microphone:before {
content: '\1f3a4';
}
text-indent
与内联元素缩进text-indent
负值隐藏文本内容。
See the Pen text-indent与纯文本对齐布局 by whjin (@whjin) on CodePen.
text-indent
仅对第一行内联盒子内容有效;display
计算值为inline
的内联元素设置text-indent
值无效,如果计算值是inline-block/inline-table
则会生效。因此,如果父级块状元素设置了text-indent
属性值,子inline-block/inline-table
需要设置text-indent:0
重置。input
标签按钮text-indent
值无效。button
标签按钮text-indent
值有效,但存在兼容性问题。input
和textarea
输入框的text-indent
在低版本IE下有兼容性问题。letter-spacing
与字符间距letter-spacing
特性:
normal
不是0
。word-spacing
与单词间距word-spacing
和letter-spacing
共同特性:
normal
。word-spacing
来清除空白间隙。text-align:jusitify
两端对齐的影响。两者差异:
letter-spacing
作用域所有字符,word-spacing
仅作用于空格字符(增加空格的间隙宽度)。
word-break
和word-wrap
的区别word-break
属性语法:
word-break:normal
:word-break:break-all
:允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行word-break:keep-all
:不允许CJK文本中的单词换行,只能在半角空格或连字符处换行。实际上和normal
一致。移动端不适合使用这个属性值。word-wrap
语法:
word-wrap:normal
:正常的换行规则word-wrap:break-word
:一行单词中没有换行点时换行,CSS3中名称overflow-wrap
word-break:break-all
的作用是所有的都换行,而word-wrap:break-word
则是如果这一行文字有了可换行的点(如空格或CJK等),就在这些换行点换行。
See the Pen word-break:break-all和word-wrap:break-word的区别 by whjin (@whjin) on CodePen.
white-space
与换行和空格的控制1. white-space
的处理模型
white-space
属性声明了如何处理元素内的空白字符,包括空格键Space
、回车键Enter
、制表符Tab
产生的空白。white-space
可以决定图文内容是否在一行显示(回车键是否生效),是否显示大段连续空白(空格是否生效)等。
其属性值包括:
normal
:合并空白字符和换行符。pre
:空白字符不合并,并且内容只在有换行符的地方换行。nowrap
:和normal
一样会合并空白字符,但不允许文本环绕。pre-wrap
:和pre
一样,但允许文本环绕。pre-line
:合并空白字符,但只在有换行符的地方换行允许文本环绕。white-space
的功能有3个维度,分别是:是否合并空白字符、是否合并换行符、文本是否自动换行。
white-space
不同属性值功能示意属性 | 换行 | 空格和制表 | 文本环绕 |
---|---|---|---|
normal |
合并 | 合并 | 环绕 |
nowrap |
合并 | 合并 | 不环绕 |
pre |
保留 | 保留 | 不环绕 |
pre-wrap |
保留 | 保留 | 环绕 |
pre-line |
保留 | 合并 | 环绕 |
2. white-space
与最大可用宽度
当white-space
设置为nowrap
时,元素的宽度表现为最大可用宽度,换行符和一些空格全部合并,文本一行显示。
inline-block
元素都具有包裹性,当文本内容宽度超过包含块宽度时,就会发生文本环绕现象。...
效果。text-overflow:ellipsis;
文字内容超出打点效果离不开white-space:nowrap;
声明。white-space:nowrap;
使列表一行显示。text-align
与元素对齐text-align:justify
想要实现两端对齐布局效果,需要满足两点:一是有分隔点,如空格;二是要超过一行,此时不是最后一行内容会两端对齐。
text-align-last
属性,可以规定最后一行内联内容的排列方式。
.justify {
text-align-last: justify;
}
这个方法存在兼容性问题。
text-decoration
下划线和文本重叠的问题对于纯内联元素,垂直方向的padding
属性和border
属性对原来的布局定位等没有任何影响。
使用
border-bottom
模拟text-decoration
下划线解决文本重叠的问题
text-transform
字符大小写text-transform
是为英文字符设计,全大写text-transform:uppercase
,全小写text-transform:lowercase
1. 场景一:身份证输入
2. 场景二:验证码输入
:first-letter/:first-line
伪元素:first-letter
伪元素及其实例1. ::first-letter
伪元素生效的前提
display
计算值必须是block
、inline-block
、list-item
、table-cell/table-caption
,其他值没有用。$
、一些运算符,以及一些“空格”。inline-block/inline-table
之类的元素存在。2. ::first-letter
伪元素可以生效的CSS属性
字符被选做::first-letter
伪元素,只有一部分有效:
font
、font-style
、font-variant
、font-weight
、font-size
、line-height
和font-family
。background-color
、background-image
、background-position
、background-repeat
、background-size
和background-attachment
。margin
相关属性:margin
、margin-top/right/bottom/left
。padding
相关属性:padding
、padding-top/right/bottom/left
。border
相关属性:border
、border-style
、border-color
、border-width
。color
属性。text-decoration
、text-transform
、letter-spacing
、word-spacing
、line-height
、float
和vertical-align
(只有当float:none
时)等属性。3. ::first-letter
伪元素特点
display
属性值标签嵌套。::first-letter
伪元素获取可以跨标签,不仅能选择匿名内联盒子,还能透过层层标签进行选择。display
值是inline
、block
、table
、table-row
、table-caption
、table-cell
、list-item
有效。inline-block/inline-table
无效。display:flex
直接选择下一行的字符内容。颜色等权重总是多了一层。::first-letter
伪元素作为子元素存在,对于color
继承属性,子元素的CSS设置一定比父元素的级别要高,即使使用了!important
,子元素会先继承,然后再应用自身设置。
p:first-letter {
color: #cd0000; /*第一个字符的颜色是red*/
}
p > span {
color: blue !important;
}
<p><span>第一个</span>字符会不会变成红色?</p>
4. ::first-letter
伪元素实际应用
<p class="price">¥399</p>
.price:first-letter {
margin-right: 5px;
font-size: xx-large;
vertical-align: -2px;
}
:first-line
伪元素block/inline-block/list-item/table-cell/table-caption
color
属性text-decoration
、text-transfor
、letter-spacing
、word-spacing
、line-height
和vertical-align
table
属性