1. CSS 框模型
块元素指的是段落、单元格，把多个段落组合起来形成一个分区，也是块元素。
框模型也叫盒子模型，把 HTML 里面的块元素看做盒子，考虑盒子和外面东西之间的关系。
对于一个块元素，CSS 盒子模型是说我们在最里面的是那个元素本身。我们可以规定高度和宽度，元素外面边框的线型、宽度和颜色、框和里面的元素之间的距离（内边距 padding，边框之内是背景 background 起作用的地方）、边框的外面和邻接元素的关系（邻接间距 margin）。
我们有一系列参数可以设置，可以通过框模型进行相应属性的设置。
padding 内边距
padding:20; 元素和四个方向边框距离都是 20 个像素。
padding-top:10; 其他方向为默认的最小值。
padding:10 15 20 25; 上右下左，顺时针。
border 边框（参照前一章）。
margin 邻接间距
<p style="margin:50px;"> 和周围所有东西隔开 50 像素。
<p style="margin:10px 50px 50px 10px;"> 上右下左
当两个相邻元素它们的外边距分别给出，取两者之间较大的距离。
2. CSS 定位
HTML 是一种流式的排版格式，意味着所有的东西都是从左上角流到右下角。作为一种文本的排版语言，要做横向的填行。
CSS 提供了另外一种手段使得我们有可能去指定某一个块状元素在整个页面当中或者在它所相对的某一个地方的一个位置，突破了 HTML 作为一种流式排版语言的限制。
<div></div> 是一种重要的块状元素。里面可以放很多段落，被认为是一个分区，可对它进行定位。在分区里的段落也可以做定位。<p> 中可以有 <span></span>指的是在行内的一段。
过去用 div 做定位，到 HTML5 增加一些标记用于表达常用的分区。<head>（头）<foot>（页脚）<side>（侧面）<article>（正文内容）。地位与 div 相同，预先起了名字的 div 。
在 CSS 定位机制里头有几种定位手段。定位的基本思想是允许你定义元素的框相对于其正常位置（或父元素、另外一个元素、整个浏览器窗口）应该出现的位置。可以有很丰富的手段给出元素的定位。
三种定位机制：普通流（默认）、浮动（float，浮动在浏览器上）、绝对定位（absolute fixed）
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距（margin）计算出来的，它在一行中水平位置使用水平内边距、边框和外边距（padding,border,margin）决定元素和其它元素的距离，形成行框。在一行的所有元素排列起来形成行框。行框的高度是这一行所有元素的最大高度。
CSS 定位用的属性叫做 position:static / relative / absolute / fixed
static 元素框正常生成矩形框，行框放在父元素中。（默认）
relative 在原来位置基础上变动，偏移某一个距离，保持形状，原来位置保留。
absolute 绝对定位，原来位置不保留。
fixed 相当于 absolute 根据浏览器窗口决定位置。
相对定位
<p style="position:relative;left=-20px;botton:20px;">在原来位置上左边减少20px,原来位置底部往上移动了20px.完全不顾 margin 的问题。
相对位置调整时，不管周围元素，原来位置保留不动。
绝对定位
<p style="position:absolute;left:-20px;bottom:-20px;">
绝对意味着要把元素从原来的流式定位的位置拿走。从里往外走第一个能定位的元素开始作为定位基准。（body 不能做定位）
absolute 定位要根据它所在的上一层（已定位）的相对位置，若没任何东西定过位就是整个浏览器相对位置。
浮动定位
<img src="mama.jpg;" width=200 style="float:right;"> 图片永远贴在浏览器右边。
网友评论