CSS浮动，盒子模型和CSS定位等

CSS浮动，盒子模型和CSS定位等

1，CSS浮动

• 什么是浮动：浮动就是不让块级元素独占一行，把块级元素排列在一行上。
• 浮动的原理：让元素脱离文档流，不占标准流。
• 使用float实现浮动，float的属性值：left，right，none，inherit（继承，使用不多）。
• 浮动后无论是块级元素还是行级元素都会显示在同一行。
• 清除浮动：目的：让后面的元素自动掉到下一行，常用方法：在父元素中添加 overflow:hidden;

2，盒子模型

• 什么是盒子模型：把HTML页面的元素当成一个矩形的盒子，是一个盛放内容的容器，盒子有以下内容：content，padding，border，margin，每个盒子除了有自己的大小和位置外，还会影响其他盒子的大小和位置。
• margin（外边距）：margin-top，margin-right，margin-bottom，margin-left，margin（复合写法）。
• padding（内边框）：和margin相似
• border（边框）：border-width，border-style，border-color
• content（内容）：width，height （仅适用于块级元素，对行内元素无效）
• 盒子尺寸：width = 内容width+padding左右+border左右
  height=内容height+padding上下+border上下。
• 如果一个盒子没有给定宽度/高度或者继承宽度/高度，padding就不会影响本盒子的大小。
• 计算盒子模型总高度的时候要注意上下两个盒子垂直外边距合并的情况。

3，dispaly

• display属性：用来设置元素的显示方式
• 属性值：
  1. none（不显示元素）
  2. block（块显示，在元素前后设置换行符，将行级元素转换为块级元素）
  3. inline（行内显示，将块级转换为行级）inline宽高自适应
  4. inline-block（将块级或行级转换为行内块级标签）inline-block类似于浮动，但是不脱离文档流。

4，table

• table样式，table一般不用来布局，主要用来格式化数据
• table属性：
  1. width
  2. height
  3. border-collapse:collapse
  4. border
• td,tr属性:
  1. width
  2. height
  3. border
  4. text-align
  5. vertical-align

5，列表

• 列表样式，不是描述性的文本的任何内容都可以认为是列表，比如：菜单、列表
• 列表类型：无序（ul），有序（ol），自定义（dl）
• ul和ol列表项都是用li表示的
• 属性
  1. list-style-image用图像表示标识
  2. list-style-position标识位置，不常用
  3. list-style-type标识类型:无序：disc/circle/square 有序： decimal/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/upper-alpha 有序和无序：none
  4. 第一和第三是常用的，第三用的最多。

6，定位

• 静态定位（static）：一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流
• 相对定位（relative）：依据left，right，top，bottom等属性在正常文档流中偏移自身位置。
• 绝对定位（absolute）：将元素从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个具有定位设置的父级元素进行绝对定位，如果父级元素没有设置定位属性，则依据body元素左上角作为参考进行定位。
• 固定定位（fixed）：和绝对定位类似，但是是相对于窗口的定位
• 当设置了绝对定位，他在文档流中会被删除，相对定位不会在文档流中删除。也可以说：绝对定位和相对定位都是浮动了起来，但是决定定位会删除文档流中占据的空间，而相对定位不会删除。
• 一般情况下都是相对定位和绝对定位配合使用，子绝父相。