HTML 第十一章总结
# 第十一章总结:
本章的标题为: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 进行设置。
HTML 第十一章总结的更多相关文章
- CPrimerPlus第十一章中的“选择排序算法”学习
C Primer Plus第十一章字符串排序程序11.25中,涉及到“选择排序算法”,这也是找工作笔试或面试可能会遇到的题目,下面谈谈自己的理解. 举个例子:对数组num[5]={3,5,2,1,4} ...
- <构建之法>第十一章、十二章有感
十一章:软件设计与实现 工作时要懂得平衡进度和质量.我一直有一个困扰:像我们团队这次做 男神女神配 社区交友网,我负责主页的设计及内容模块,有个队友负责网站的注册和登录模块,有个队友负责搜索模块,有个 ...
- sql 入门经典(第五版) Ryan Stephens 学习笔记 (第六,七,八,九,十章,十一章,十二章)
第六章: 管理数据库事务 事务 是 由第五章 数据操作语言完成的 DML ,是对数据库锁做的一个操作或者修改. 所有事务都有开始和结束 事务可以被保存和撤销 如果事务在中途失败,事务中的任何部分都不 ...
- 第十一章 TClientDataSet
第十一章 TClientDataSet 与TTable.TQuery一样,TClientDataSet也是从TDataSet继承下来的,它通常用于多层体系结构的客户端.TClientDataSet最大 ...
- 第十一章、认识与学习BASH
第十一章.认识与学习 BASH 最近升级日期:2009/08/25 1. 认识 BASH 这个 Shell 1.1 硬件.核心与 Shell 1.2 为何要学文字接口的 shell 1.3 系统的合法 ...
- [Effective Java]第十一章 序列化
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- EFFECTIVE JAVA 第十一章 系列化
EFFECTIVE JAVA 第十一章 系列化(将一个对象编码成一个字节流) 74.谨慎地实现Serializable接口 *实现Serializable接口付出的代价就是大大降低了“改变这个类 ...
- 《Android群英传》读书笔记 (5) 第十一章 搭建云端服务器 + 第十二章 Android 5.X新特性详解 + 第十三章 Android实例提高
第十一章 搭建云端服务器 该章主要介绍了移动后端服务的概念以及Bmob的使用,比较简单,所以略过不总结. 第十三章 Android实例提高 该章主要介绍了拼图游戏和2048的小项目实例,主要是代码,所 ...
- [CSAPP笔记][第十一章网络编程]
第十一章 网络编程 我们需要理解基本的客户端-服务端编程模型,以及如何编写使用因特网提供的服务的客户端-服务端程序. 最后,我们将把所有这些概念结合起来,开发一个小的但功能齐全的Web服务器,能够为真 ...
- perl5 第十一章 文件系统
第十一章 文件系统 by flamephoenix 一.文件输入/输出函数 1.基本I/O函数 1)open函数 2)用open重定向输入 3)文件重定向 4)指定读写权限 ...
随机推荐
- Django使用多数据库
有些项目可能涉及到使用多个数据库的情况,方法很简单. 1.在settings中设定DATABASE 比如要使用两个数据库: DATABASES = { 'default': { 'NAME': 'ap ...
- Windows 动态链接库DLL使用
转载:https://blog.csdn.net/heyabo/article/details/8721611 转载:https://www.cnblogs.com/jin521/p/5598529. ...
- QML使用的内置对象
QML从ECMAScript继承而来,所以支持这个ECMAScript.经常在QML工程中看到Math.Data.....等方法,但是在Qt手册里搜索不到,这是因为这些方法不是QtQuick的,而是E ...
- python --- 21 MRO C3算法
一.python2.2之前用的是 经典类的MRO继承 ①深度递归继承 从左到右 ,一条路走到黑 ②广度继承 一层一层的继承 深度继承时 为 R 1 2 3 4 ...
- Python3基础 list range+for 等差数列
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- Docker 使用Dockerfile构建tomcat镜像
Dockerfile概念: 镜像的定制实际上就是定制每一层所添加的配置.文件.如果我们可以把每一层修改.安装.构建.操作的命令都写入一个脚本,用这个脚本来构建.定制镜像,那么之前提及的无法重复的问题. ...
- NodeJs中npm使用
什么是 NPM npm 之于 Node ,就像 pip 之于 Python , gem 之于 Ruby , pear 之于 PHP . npm 是 Node 官方提供的包管理工具,他已经成了 Node ...
- (转)Autonomous_Vehicle_Paper_Reading_List
Autonomous_Vehicle_Paper_Reading_List 2018-07-19 10:40:08 Reference:https://github.com/ZRZheng/Auton ...
- Nginx教程---01.Nginx入门
create by 三七二十一 LZ参考视频(年代久远,但万变不离其宗): 链接:https://pan.baidu.com/s/1O_MmN0c3ckM6vbk08n8Qkg 密码:z9zr 01_ ...
- 【Ruby】【YAML】
require "YAML" var = YAML.load(File.open('b.yml')) #哈希puts var.class #Hashprint var ," ...