HTML 第十一章总结

Posted 2021-01-25 fbsharl

# 第十一章总结:
本章的标题为：layout and positioning Arranging Element
##前言：
这一章节，通过已经知道的 box model 的概念，进行讲述关于 layout 的知识，并且通过这些知识进行创造专业的设计和 multicolumn layouts.

##谈谈Flow
###对于block element
* 对 block element 来说， Browser 通过从上到下的方式进行 flow。
* 在每个block element bottom和 top 之间的 margin 是通过 collapse 来计算的。

###对于 inline element
* 对 inline element 来说，是通过从左上角到右下角的方式使得它们 next to each other 。
* 在同一行的 inline element 之间的 margin 是两个 element 的 margin 之和。

###其他
whenever you have two vertical elements touching, they will collapse.当在one element nested inside another 的时候也是这样。特殊的情况是：如果一个元素有 border ，那么他它们不会 collapse.

##关于 float
###How to make an element float
1. 首先在 html 中给这个 element 一个identification
2. 然后在 CSS 中给它设置宽度
3. 然后利用 float 这个 property 进行设置。

最终，在 HTML 中的代码如下：

```
#id{
width:200px;
float:right;
}
```
###float 在 flow 中的原理和带来的问题
float 的 element 从normal element 中拿了出来，然后剩下的normal element 对 float 的 element 进行 ignore,但是在 normal element 中的 inline element 不会 igonore ，而会respect the borders.
但是这样会带来一个问题，就是在float element 和 normal element 之间的 background 的部分会 overlap。
这个问题可以通过两个办法解决：
1. 计算然后设定 margin 来解决，从而有一个好看的 gutter.
2. 通过 clear 这个 property 来解决问题，clear 的思路是先 look if there is nothing on its left side or right side,if there is, 然后通过 move 这个 element down until there is nothing on its left or right side.代码为：

```
#id{
clear:right
}
```

##jello layout
###frozen layout 和 liquid layout
在liquid layout 中，当你对窗口的页面进行 resize 的时候，文本会跟着 move,但是frozen layout 不会。
介于fozen layout 和 liquid layout 的是 jello layout ，这种方式下，element 的 width 不会变化，并且总是在页面的中央。
代码如下：

```
#id{
width=800px;
.....
margin-left:auto;
margin-right:auto;
}
```
##关于position
position 有
###absolute positioning 的原理和代码
当进行 absolute position 的时候，在 Browser 进行 flow 的时候，首先将其从 normal element 中拿出来，然后根据其 top,right(或者 bottom,left)将其放置在一个位置，其他的 normal element 则 ignore it totally,并且inline element 也不会进行 wrap.

在 absolute positioning 的时候，有时候会遇到层叠的时候，这个时候假象有一个 z 轴，越大的数值越在上面，也就是 z-index.

代码如下：

```
#id{
position:absolute;
top:100px;
right:200px;
width:280px;
z-index=1
}
```
###其他
####关于 absoulute position 和 relative position
如果 absolute element is nested within another element,it‘s positioned relative to containing element rather than the sides of the page.

relative position first flow into the page as normal,and then offset by specified amout.
####关于 position 这个 property
position 这个 property 有四个可以设置的 value；
* static:browser dicides where it goes, you can‘t control
* absolute:have a pisition relative to page
* fixed: have a pisition relative to the browser window(viewport)
* relative:具有offset 的功能

####设置 position 的 top 等的 value
可以有两种数字进行设置：
1. 通过 px 的数值来进行设置
2. 通过%来进行设置，在这种方法下，元素的宽度是通过 width of browser 来变化的

#### fixed 的代码

```
#id{
position:fixed;
top:350px;
left:-90px;
}
```
###absolute 的缺陷
根据原理，由于其他 element 会忽略它的存在，所以可能会产生 overlap，同时无法利用 clear 来进行解决。

##关于CSS table display
###一些概念
可以将 CSS table display 想象成一个 spreadsheet,它有 row 也有 column，然后每个单位为一个 cell.
###设置的步骤
在 HTML 中的步骤：
1. 给整个表格一个 <div id:>,比如<div id="tableContainer">
2. 然后给表格中的行一个<div id:>,比如<div id="tableRow">
3. 最后，给每一个表格中的 cell 一个 <div id>

在 CSS 中的步骤
1. 先给整个 table 进行设置：代码为

```
div#tableContainer{
display=table;
}
```
2，然后给 table 的行进行设置，代码为

```
div#tableRow{
display:table-row;
}
```
3,然后再对每个 cell 进行设置，代码为：

```
#main{
display:table-cell;
}
```

###在设置中的其他注意点：
* 在进行了 display;table 的设置后，应该设置其 border-spacing,代码如下：

```
div#tableContainer{
display=table;
border-spacing:10px
}
```
这个 border-spacing 的 property 指的是 cell 之间的 spacing,相当于 normal element 中 margin 的功能。也就是会和其他的 element 产生 gutter.
所以设置了 border-spacing 之后，就不需要 margin 这个 property 了.

?如果有多行的列表，可以用 class 进行设置。