目录
- 行高
- 字号字体大小
- word-wrap与word-break的区别
- 段落
- 行内元素,块级元素,行内块
- 标准文档流
- 鼠标样式
vscode插件推荐
行高
height: 100px什么是行高
一行文字实际占用的高度。
取值方式：px，百分比。
百分比：按照默认的字体大小取值。
特殊用法：
要让一行文字垂直居中，可以将行高设置为盒子高。（多行文字失效）
行高，字号一般都是偶数。
谷歌浏览器最小可以设置12px，默认是16px
字号字体大小
网页中，中文主要使用的字体：微软雅黑，宋体，黑体。
微软雅黑：Microsoft Yahei
宋体：SimSun
黑体：SimHei
取值方式：数字，单词
数字：100-900；
单词：lighter normal,bold,bolder
fwb:font-weight: bold;
fw:font-weight: normal
italic :跟字体样式有关系，oblique斜体
font: 30px/60px "Consolas";
必须写的两个值 字号 字体font-size: 32px;取值：单词，em，px，百分比
font-size: xx-small;
font-size: xx-large;
font-size: 48px;
font-size: 1em;
font-size: 200%;word-wrap与word-break的区别
<style>
.box1,.box2{
width: 210px;
height: 200px;
border: 1px solid teal;
}
.box1{
word-break:break-all;
/*会把单词截断*/
border: 1px solid red
}
.box2{
word-wrap:break-word;
/*自动把整个单词放到下一行*/
border: 1px solid red
}
</style>
<body>
<div class="main">
<div class="box1">测试数据测试数据测试数据hollo</div>
<div class="box2">测试数据测试数据测试数据hollo</div>
</div>
</body>
word-wrap与word-break的区别，以及无效情况
段落
设置文本居中方式
text-align: left;
首行文本缩进 em px 百分比
text-indent: 2em;
文本修饰
none，正常，默认值。
underline:下划线。
overline:上划线。
line-through:中划线。
text-decoration: line-through;
单词间间距： 中文无效。
word-spacing: 48px;
单个字母间的间距
letter-spacing: 48px;
大小写转换
text-transform: lowercase
行内元素,块级元素,行内块
行内元素：(可以设置line-height)除了p标签之外，所有的文本级标签都是行内元素。p标签是文本级标签，但属于块级元素。
块级元素：所有的容器级标签都是块级元素，包括p标签。
通过display属性来查看当前元素的类型。
也可以通过该属性修改当前元素的类型。
块级元素转行内元素
display:inline; 拥有行内元素的属性，块级元素属性就会失效。
行内元素转块级元素
display:block; 拥有块级元素的属性，行内元素属性就会失效。
转行内块元素
display:inline-block；
1.可以设置宽高
2.可以与其他行内元素并排。
注意:块级元素可以包含行内元素和块级元素。如果行内元素包含了块级元素，那么行内元素属性就会失效。
<style>
.z2 {
width: 80px;
height: 50px;
border: 1px solid teal;
}
</style>
<body>
<div class="z2">
<span>左边</span>
<span>
<div>右边</div>
</span>
</div>
</body>
标准文档流
定义：内容必须是从左到右，由上往下书写。前面的内容大小或位置发生变化时，后面的内容也会随之变化。
html网页就是一个标准文档流。
1.空白折叠现象
无论多少个空格，换行 缩进，都会折叠成一个空格。
2.高矮不齐，底部对齐。
3.自动换行
鼠标样式
cursor:no-drop // 一个红色的圈加一个斜杠，表示禁止的意思
cursor:not-allowed // 一个红色的圈加一个斜杠，表示禁止的意思禁用鼠标点击事件
pointer-events:none注：使用禁止触发事件时，鼠标样式会失效，变成箭头，即cursor:not-allowed; 与pointer-events:none;不可同时使用
