11-CSS布局与定位

css的4中引入方式

1、在标签内引入：

标题1

2、内联样式：

即在head内引入。

3、link方式引入：

在head内用link方式引入外部css文件；

4、在css文件内采用@方式引入另一个css文件：

@inport url(./a.css)

本章节中的几个知识点

1. 高度是由什么决定的
   a. 内联元素
   b. 块级元素
2. line-box 是啥
3. box 是啥（盒模型）
4. 宽度是有什么决定的
5. position 的 5 个取值
6. z-index

一、元素的高度是有什么决定的

1. div元素高度由其内部文档流元素的 高度总和 决定。
   什么是文档流？----文档内元素的流动方向；
   a. 内联元素的流动方向-----从左往右，如果流动遇到阻碍就换行继续流动；如下：

内联元素1
内联元素2
内联元素3
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
内联元素4
内联元素5
内联元素6
块1
块2
块3
块4
块5


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为例）
首先，来看下文字的设计格式：