css的4中引入方式
1、在标签内引入：
<h1 style="color: aqua; text-align: center;">标题1</h1>
2、内联样式：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>草稿测试</title>
<style>
table{
border-collapse: collapse;
font-size: 16px;
}
</style>
</head>
即在head内引入。
3、link方式引入：
<link rel="stylesheet" content href="./style.css">
在head内用link方式引入外部css文件；
4、在css文件内采用@方式引入另一个css文件：
@inport url(./a.css)
本章节中的几个知识点
- 高度是由什么决定的
a. 内联元素
b. 块级元素 - line-box 是啥
- box 是啥（盒模型）
- 宽度是有什么决定的
- position 的 5 个取值
- z-index
一、元素的高度是有什么决定的
- div元素高度由其内部文档流元素的 高度总和 决定。
什么是文档流？----文档内元素的流动方向；
a. 内联元素的流动方向-----从左往右，如果流动遇到阻碍就换行继续流动；如下：
<body>
<span>内联元素1</span>
<span>内联元素2</span>
<span>内联元素3</span>
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
<span>内联元素4</span>
<span>内联元素5</span>
<span>内联元素6</span>
<div>块1</div>
<div>块2</div>
<div>块3</div>
<div>块4</div>
<div>块5</div>
</body>
span {
border: 1px solid red;
/* word-break: break-all; */
}
div {
border: 1px solid red;
width: 150px;
/* display: inline-block; */
}
12-01.jpg
- 内联元素中，一个英语单词默认是不会分行显示的；除非使用：word-break: break-all;
- 多个span元素分行书写时，显示时彼此之间默认会有一个空格的间距，想要消除默认间距，可以在书写时紧密的首位相连，或是中间插入注释符；
b. 块级元素的流动方向------每一个块都会占一行，即便有多余的空间，依然会另起一行，（除非改变其display属性： display: inline-block;），然后从上往下流动；如上图；
在了解了文档流之后，在回到元素的高度上来：
a. 块级元素的高度----
- 由其内部文档流元素高度的总和 决定（不是相等）；
- 也可以通过设定height来指定；
- block元素的整个尺寸大小ye可通过width、height、padding、border来变更；
b. 内联元素的高度----（以span为例）
首先，来看下文字的设计格式：
