文本样式
常用的文本属性有：
| 属性 | 描述 |
|---|---|
color | 设置文本颜色 |
text-align | 设置文本的水平对齐方式，center，left，right三种对齐方式，也可以设置justify：拉伸每一行，以使每一行具有相等的宽度 |
direction | 更改元素的文本方向，rtl表示文本方向从右到左 |
vertical-align | 设置元素的垂直对齐方式：top，middle，bottom分别表示顶部对齐，中间对齐和底部对齐 |
text-decoration | 设置或删除文本装饰，通常用于从链接上删除下划线text-decoration: none;也可以添加上划线：overline；贯穿线：line-through；下划线：underline |
text-transform | 指定文本中的大写和小写字母进行文本转换，uppercase：转换为全部大写；lowercase：转换为全部小写；capitalize：转换为首字母大写 |
text-indent | 指定文本第一行的缩进，一般为：text-indent: 50px; |
letter-spacing | 指定文本中字符之间的间距，可以是负数 |
word-spacing | 指定文本中单词之间的间距，可以为负数 |
line-height | 指定行之间的间距，line-height: 1.5em;大多数浏览器中的默认行高大概是 110% 到 120% |
text-shadow | 设置文本添加阴影，最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：text-shadow: 2px 2px;同时还可以添加模糊效果和阴影颜色：text-shadow: 2px 2px 5px red; |
font-family | 设置文本字体，如果字体名称不止一个单词，则必须用引号引起来，如：font-family: "Times New Roman", Times, serif; |
font-style | 设置字体样式：normal：正常显示；italic：斜体显示； |
font-weight | 设置字体的粗细：normal：正常显示；bold：加粗显示 |
font-size | 设置文本字体大小，普通文本（如段落）的默认大小为 16px |
/*通过简写声明字体属性，font-size 和 font-family 的值是必需的，其他属性不声明就会使用默认值*/
font: italic bold 12px/30px Georgia, serif;字体
我们在定义字体的时候，我们往往需要定义多个字体，因为在别人电脑中的页面里面不确定有我们定义的字体，当定义了多个字体时，前面定义的字体没有时，就使用后面定义的字体，如果定义的字体在别人电脑上都没有，那么会默认使用浏览器的字体，我们在定义字体的时候，如果字体是由多个单词构成的，我们需要包上引号，否则系统会认为这个字体是无效的字体，定义字体的方式如下：（定义了两种字体）
h2 {
font-family: 'Courier New', Courier
}使用其他的开源字体
<style>
@font-face {
font-family: myFont; /*给引入的字体取名字*/
/*开源字体的引入：将开源的字体下载过来，放到文件结构中进行路径引入*/
src: url("/@/assets/SourceHanSansSC-Heavy.otf") format("opentype");
}
</style>下载的字体类型通常有以下的类型：
.otf，.woff，.tff
format()：用于标注字体的类型，浏览器在看这个字体的时候，会先看类型，如果浏览器能够处理这个类型时，就会去加载这个字体，不能处理的话就不进行这个字体的加载我们可以通过
src语句进行定义多个字体：csssrc: url("/@/assets/SourceHanSansSC-Heavy.otf") format("opentype"), url("/@/assets/SourceHanSansSC-Light.otf") format("opentype");定义在前面的字体会被使用，如果前面的字体不能被加载，那会加载使用后面的字体
使用开源字体时我们需要注意：
- 一些中文的字体的体积往往非常大（浪费浏览器的带宽），一般不建议使用
- 有些字体有商业的版权，也不建议使用
加载声明完字体后，我们就可以进行使用：
<style>
@font-face {
font-family: myFont; /*给引入的字体取名字*/
/*开源字体的引入：将开源的字体下载过来，放到文件结构中进行路径引入*/
src: url("/@/assets/SourceHanSansSC-Heavy.otf") format("opentype");
}
h2 {
font-family: myFont;
}
</style>字重
字重样式一般情况下使用加粗和正常即可，我们也可以使用数字的形式进行字体粗细的定义
h2 {
font-weight: normal;
font-weight: bold;
font-weight: 500;
}字号
字号用来设置字体的大小，可以使用系统提供的简写字号，也可以使用数字的形式定义字号
h2 {
/*xx-small x-small small meidum large x-large xx-large*/
font-weight: small;
font-weight: 16px;
/*100%表示正常的字体大小（参照父级的字体大小），200%表示放大一倍的大小*/
font-weight: 100%;
font-weight: 1em; /*1em也是相对参照的，相当于于100%*/
}文本颜色和行高
文本颜色的定义：颜色一般是通过吸管工具去吸取的
h2 {
color: red; /*使用系统纯色命名定义颜色*/
/*使用十六进制定义颜色，六位表示，如果六位都是相同的，可以简写为#ddd*/
color: #dddddd;
color: rgb(255,0,255) /*使用rgb颜色进行定义（红，绿，蓝）*/
color: rgba(255,0,255,0) /*第四个参数设置透明度，0表示透明*/
}行高的设置：
h2 {
line-height: 1.5em; /*一般是使用1.5倍的行高*/
}这样设置的行号，即使在不同的屏幕中打开，即使字体的大小发生变化，行高依旧是稳定保持的，推荐使用em进行行高的设置
倾斜
h2 {
font-style: italic; /*设置字体倾斜，如果值为normal表示正常显示*/
}有些标签是样式是默认自带倾斜的，如<em>标签
组合定义
对于字体的定义，如果需要对这个字体定义非常多的字体样式，我们可以使用组合样式进行定义，建议都使用组合定义的写法进行字体的样式定义：
font: bold italic 45px/1.5em 'Courier New'（字重，倾斜，字号/行高，字体）
但是上述的定义方式顺序是固定的，字号和字体是必须要有的（字重和倾斜样式不用必须有），不然这个组合样式定义就没有效果（样式不生效）
大小写转化
CSS可以控制英文字母进行大小写转化，不用通过后台传递进行字母的大小写转化，通过CSS转化就可以了：
h2 {
font-variant: small-caps; /*将字母转化为大写，字体变成小型的*/
text-transform: uppercase; /*将字母转化为大写，字体大小不变*/
text-transform: lowercase; /*将字母转化为小写，字体大小不变*/
text-transform: capitalize; /*将字母的首字母转化为大写，字体大小不变*/
}对于首字母大写，出来第一个字母外，后续逗号分隔和空格分割后的第一个字母都会转化为大写
文本线条的控制
h2 {
text-decoration: underline; /*设置文本下划线*/
text-decoration: overline; /*设置文本上划线*/
text-decoration: line-through; /*设置文本删除线*/
}将<a>和<u>标签的默认线条样式进行去除：
a, u {
text-decoration: none;
}文本阴影
我们有时候需要给文本加上阴影，使文本看起来更加有立体感
h2 {
/*给字体设置阴影，阴影颜色为灰色，水平偏移5px，垂直偏移5px，模糊量设置为5px*/
text-shadow: #ddd 5px 5px 5px;
}模糊量越小，这个阴影会越清晰
空白和文本溢出
空白是指网页中文本的空格和换行符，在默认的情况下，不管在代码中敲几个空格，在网页展示时都会合并成一个空格，为了解决这个情况，我们可以使用<pre>标签（这个标签会将代码中的空格和换行都进行保留）
我们可以不使用<pre>标签，我们可以使用CSS的属性进行空白的控制：
h2 {
white-space: pre; /*设置标签中的内容有空白处理：保留空格和换行符*/
white-space: pre-wrap; /*效果和white-space: pre;一致*/
white-space: pre-line; /*将空白合并掉，保留换行符*/
white-space: nowrap; /*禁止换行，文本不会换行，会溢出这个元素*/
}在特定的场景中，我们会用到文本溢出的功能，如：标题文字内容过多，我们需要设置文本禁止换行，设置过长的文本隐藏（将多余的字符进行截断），最后设置文本溢出的处理（一般是加上三个点表示后面有过多的文本不再显示）
div {
border: solid 1px #ddd;
width: 300px;
white-space: nowrap; /*禁止换行，文本不会换行，会溢出这个元素*/
overflow: hidden; /*设置超出的文本进行隐藏*/
text-overflow: ellipsis; /*文本溢出的处理 ...代替溢出的文本*/
}文本缩进和对其
对于文本，我们有时候需要文本进行首字母的缩进
h2 {
text-indent: 2em; /*设置文本缩进2个字符的宽度（不受字体的大小影响）*/
}对于文本，文本的水平对其默认情况下是左对齐的，我们可以对对其的方式进行设置：
h2 {
border: solid 1px #ddd;
text-align: center; /*设置文本居中对其*/
/*左对齐：left(默认情况) 居中对其：center 右对齐：right*/
}文本的垂直对其默认情况下是底部对其的，我们可以对对其的方式进行设置：（对于图片的位置我们设置文本相对于图片的对其方式）
div img {
width: 20px;
height: 20px;
vertical-align: top; /*设置文本相对于图片顶部对其*/
/*底部对其：bottom(默认情况) 居中对其：middle 顶部对其：top*/
}对于对其方式，我们也可以通过具体的值来进行对其的偏移量，如vertical-align: -70px（负值表示往上走，正值表示往下走）
排版
- 设置字符间距：
letter-spacing: 20px（每个字符间会有20px的字符间隔） - 设置单词间距：
word-spacing: 20px（每个单词（空格和标点符号进行分割的）之间会有20px的间距） - 排版方式：
writing-mode: vertical-lr（将文本的内容从左到右进行排版）（默认是从上到下进行排版的writing-mode: horizontal-tb）
盒子模型
盒子模型和弹性和模型是不一样的，在页面中布局的排列都是一个盒子里面套另外一些盒子，内部不同盒子间就有间距，内边框和外边框等等，盒子的边距从外到内依次是margin（外边距）、border（边框）和padding（内边距）
外边距属性
| 属性 | 描述 |
|---|---|
margin | 用于在任何定义的边框之外，为元素周围创建空间，可用于设置元素每侧（上、右、下和左）的外边距，若只设置两个值，前面的值表示上下，后面的值表示左右，若设置一个值，表示四个方向都进行设置，也可以使用margin-top等的方式对某一边的外边距进行控制 |
所有外边距属性都可以设置以下值：
auto- 该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配，可以设置元素水平居中，下述的例子中div元素占据article元素的指定宽度，其他剩余空间左右两边平均分配，实现了一个居中的效果css// 设置元素水平居中 article { border: solid 2px #ddd; width: 800px; } div { border: solid 3px red; width: 400px; margin: 0 auto; }length- 以px、pt、cm等单位指定外边距边距的值不单单只有正值，也可以有负值，如果为负值时，其容器就会溢出其父容器
css// 设置元素溢出 article { border: solid 2px #ddd; width: 300px; padding: 50px 0; } div { border: solid 3px red; margin-left: -50px; margin-right: -50px; }div元素相对于父元素article元素左右各溢出了50px，div元素的长度被拉长了%- 指定以包含元素宽度的百分比计的外边距inherit- 指定应从父元素继承外边距
外边距合并指：当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
<body>
<h2>jlc</h2>
<h2>JLC</h2>
</body>
<style>
h2 {
border: solid 1px red;
margin-bottom: 30px;
margin-top: 20px;
}
</style>两个
h2标签之间的边距不会进行叠加，只会进行合并，合并后的边距为margin-bottom和margin-top之间的最大者，上述例子也就是30px
边框属性
| 属性 | 描述 |
|---|---|
border-width | 指定四个边框的宽度，属性可以设置一到四个值，单位一般为px（用于上边框、右边框、下边框和左边框）,也可以使用以下三个预定义值之一：thin、medium 或 thick，也可以直接写成border-top-width进行对一个方向的边框宽度的定义 |
border-style | 指定要显示的边框类型，属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）形成混合边框，也可以直接写成border-top-style进行对一个方向的样式定义 |
border-color | 设置四个边框的颜色，属性可以设置一到四个值（用于上边框、右边框、下边框和左边框），也可以直接写成border-top-color进行对一个方向颜色样式的定义 |
border-radius | 设置圆角边框，border-radius: 5px;对于圆角的设置，我们也可以使用%进行设置，如果设置为border-radius: 50%，那么这个盒子模型的边框就变成了一个正圆 |
border-style边框类型有以下枚举值：
dotted- 定义点线边框dashed- 定义虚线边框solid- 定义实线边框（常用）double- 定义双边框（常用）groove- 定义3D坡口边框（凹槽边框），效果取决于border-color值ridge- 定义3D脊线边框（垄状边框），效果取决于border-color值inset- 定义3D inset边框，效果取决于border-color值outset- 定义3D outset边框，效果取决于border-color值none- 定义无边框hidden- 定义隐藏边框
/*使用border的简写属性，依次的顺序为上表自上而下的顺序，border-style的值是必须要有的*/
p {
border: 5px solid red;
/*也可以只指定单边的边框属性：border-left: 6px solid red;*/
}内边距属性
| 属性 | 描述 |
|---|---|
padding | 在任何定义的边界内的元素内容周围生成空间，可以为元素的每一侧（上、右、下和左侧）设置内边距，其值的设置方式与margin类似 |
所有内边距属性都可以设置以下值：
length- 以px、pt、cm等单位指定内边距%- 指定以包含元素宽度的百分比计的内边距inherit- 指定应从父元素继承内边距
尺寸大小
| 属性 | 描述 |
|---|---|
height | 设置元素的高度 |
width | 设置元素的宽度 |
height 和 width 属性可设置如下值：
auto- 默认，浏览器计算高度和宽度length- 以px、cm等定义高度/宽度%- 以包含块的百分比定义高度/宽度initial- 将高度/宽度设置为默认值inherit- 从其父值继承高度/宽度
height 和 width 属性不包括内边距、边框或外边距，设置的是除去三者外的高度和宽度
内边距、边框和外边距都是可选的，默认值是零
对于设置了边框为2px的容器，我们设置长和宽都为100px，同时我们又设置了50px的内边距，那么，最后的边框区域大小为204px*204px，但是如果我们就是希望我们的盒子模型的大小就是固定的200px*200px（无论在怎么增加内边距和边框，其盒子模型的大小都不会发生改变），我们可以进行下面的设置：box-sizing: border-box; (设置盒子的固定大小就是盒子模型的宽度和高度)
box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框
在默认的情况下：width + padding + border = 元素的实际宽度；height + padding + border = 元素的实际高度，元素通常看起来比您设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）box-sizing属性可以很好的解决这个问题，如果在元素上设置了 box-sizing: border-box;那么元素的宽度和高度会包括内边距和边框
我们希望页面上的所有元素都能够以这种方式工作，可以统一的对其样式进行设置：
* {
box-sizing: border-box;
}处理常见的宽度和高度设置，我们还有最小最大尺寸的设置：（进行约束范围）
min-width和max-widthmin-height和max-heightcssdiv { width: 300px; height: 300px; border: solid 3px #ccc; padding: 30px; } div img { max-width: 90% // 最大宽度设置为父级元素的宽度的90% min-width:50% // 最小宽度设置为父级元素的宽度的50% } //免裁图调整图片尺寸适应盒子宽度
当我们使用
min-时，如果内容的宽度/高度值小于我们设置的最小宽度/高度，我们就取我们设置的最小宽度/高度值；max-同理，如果放进来的图片的宽度为800px，我们设置的最大宽度为600px，那么最后放进来的图片宽度为600px
轮廓属性
轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素，轮廓是在元素边框之外绘制的，并且可能与其他内容重叠，轮廓线和边框的区别是：轮廓线不会占用空间，但是边框是会占用空间的，所有轮廓线可能会与其他的元素重叠
| 属性 | 描述 |
|---|---|
outline-width | 设置轮廓宽度 |
outline-style | 设置轮廓样式 |
outline-color | 设置轮廓颜色，可以通过outline-color: invert方式设置翻转颜色，确保无论颜色背景如何，轮廓都是可见的 |
outline-offset | 设置轮廓偏移，在元素的轮廓与边框之间添加空间，偏移量以px为单位 |
outline-style 属性指定轮廓的样式，并可设置如下值：
dotted- 定义点状的轮廓dashed- 定义虚线的轮廓solid- 定义实线的轮廓double- 定义双线的轮廓groove- 定义3D凹槽轮廓ridge- 定义3D凸槽轮廓inset- 定义3D凹边轮廓outset- 定义3D凸边轮廓none- 定义无轮廓hidden- 定义隐藏的轮廓
/*Outline简写属性的使用，按照上表自上而下的属性输入属性值，outline-style是必须的*/
outline: 5px solid yellow;对于表单输入框轮廓线的去除（input输入框是默认自带系统设置的轮廓线的，我们可以设置轮廓线为none对其轮廓线进行去除）：
input {
outline: none;
}显示/隐藏、控制模式
我们可以通过display对元素设置显示和隐藏，默认情况下元素是显示的，即display: block;，如果我们对元素设置了display: none;那么这个元素就被隐藏了
如果我们使用display: none;的方式进行设置元素的隐藏，其元素原本的空间会丢失，后面布局的元素会占据隐藏元素的位置，为了避免这个情况，我们可以使用：visibility: hidden;设置元素的隐藏，可以使隐藏元素的空间位置保留（类似于将元素变成透明：opacity: 0;）
display不止可以控制元素的显示和隐藏，我们还可以改变元素显示的模式：
块元素是独占一行空间的，div、li等等都是常见的块级元素
设置元素为块级元素：
display: block;html<body> <article> <div> <a href="">mysql</a> <a href="">css</a> </div> </article> </body> <style> div>a { display: block; text-decoration: none; } </style>链接元素是普通的文本元素，不会独占一行（一块）的空间，设置
display: block;后，就将链接元素变成了块元素，每个块元素是独占一行空间的，所以两个链接元素就变成了垂直排列设置元素为行级元素：
display: inline-block;html<body> <article> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </article> </body> <style> ul>li { display: inline-block; } </style>对于
<ul><li>元素，默认是块级元素，是垂直排列的，我们可以通过：display: inline-block;将其设置成行级元素，使每一项进行水平排列display: inline-block;是将这个元素设置为行级块元素，行级块元素我们是可以对其设置宽和高的，可以进行块状元素的操作，display: inline;设置方式也可以是元素进行水平布局，我们只是将其设置为普通的标签，不能进行块的操作
内容溢出
对于一个div标签，我们设置其大小（宽度和高度）和边框，再给div标签中设置文本内容，当文本内容过多的时候，其文本就会溢出，我们不希望内容把这个div元素撑开（希望这个盒子的大小是固定的），这样我们就要做溢出处理，内容溢出不单单只是包括文本，还包括其他的元素
div {
border: solid 3px red;
width: 300px;
height: 100px;
overflow: scroll;
}overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条
overflow 属性可设置以下值：
visible- 默认：溢出没有被剪裁，内容在元素框外渲染hidden- 溢出被剪裁，其余内容将不可见scroll- 溢出被剪裁，同时添加滚动条以查看其余内容（不管内容是否溢出都出现滚动条，滚动条一直存在）auto- 与scroll类似，但仅在必要时添加滚动条（内容装的下时不出现滚动条）
overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：
overflow-x指定如何处理内容的左/右边缘overflow-y指定如何处理内容的上/下边缘
div {
overflow-x: hidden; /* 隐藏水平滚动栏 */
overflow-y: scroll; /* 添加垂直滚动栏 */
}填充可用空间
vw/vh也是一个单位，并且也是一个相对单位：
vw -> view width；vh -> view height
相对单位：表示把屏幕自动分成了100vw宽和100vh高
vw / vh : 把屏幕分为100份，1vw等于屏幕宽的1%
<body>
<main>
<div>jlc</div>
</main>
</body>
<style>
body {
width: 100vw;
height: 100vh;
background: red;
}
main {
width: 100vw;
height: 100px;
background: yellow;
}
div {
background: blue;
height: -webkit-fill-available; // 设置高度自适应，高度自动撑满父组件
}
</style>行级元素改行级块元素自动撑满高度和宽度可用空间：
span {
background: #ddd;
display: incline-block;
height: -webkit-fill-available;
width: -webkit-fill-available;
}后期也可以使用栅格模型和弹性盒模型实现这种撑满（自适应）的效果
根据内容自适应尺寸
我们可以使用width: fit-content设置根据内容自适应尺寸
我们设置希望元素里面的内容多大，其块级元素的宽度就有多宽
<body>
<main>
<div>jlc</div>
</main>
</body>
<style>
body {
width: 100vw;
height: 100vh;
background: red;
}
main {
width: 100vw;
height: 100px;
background: yellow;
}
div {
background: blue;
width: fit-content; // 设置内容尺寸自适应
margin: auto; // 设置元素居中
}
</style>根据内容自适应盒子的尺寸
- 设置盒子尺寸适应最小的内容宽度：
width: min-content; - 设置盒子尺寸适应最大的内容宽度：
width: max-content;
再内容文本中，一个空格就相当于将左右两端的内容进行分割了，空格包裹的就是一个内容值，一个div中可以有多个内容宽度，不同的内容宽度有不同的长度
如果我们后续删除了div中的内容，其外面包裹的盒子标签的大小就会自动的改变
<body>
<main>
<div>这个是我的名字 jlc</div>
</main>
</body>
<style>
mian {
width: min-content;
background: red;
margin: auto; // 设置居中
}
div {
background: yellow;
padding: 10px;
margin-bottom: 20px;
}
</style>