学习CSS一些事（上）

p.s：这是我在学习中总结出来知识，如有不对，请多包涵。谢谢。

CSS样式：行内样式，内部样式，外部样式，他们的优先级是：行内，内部，外部，遵循就近原则。

一、HTML+CSS布局分为三大类，一是流式布局，二是浮动布局，三是绝对定位布局。

1、流式布局

　　流式布局，如同水经过不同通道，呈现出不一样的方式。流式布局也是如此。流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

2、浮动布局

　　利用float（浮动）属性来并排定位元素，并在网页上创建列。可以利用这个属性来创建一个环绕在周围的效果，例如环绕在照片周围，但是当你把它应用到一 个<div>标签上时，浮动就变成了一个强大的网页布局工具。float属性把一个网页元素移动到网页（或者其他包含块）的一边。任何显示在 浮动元素下方的HTML都在网页中上移，并环绕在浮动周围。

3、绝对定位布局

　　通过设置position属性实现的布局，是CSS中规定的第三种定位机制，能够实现横向多列布局及较为复杂的定位。position属性：（1）静态定位（2）相对定位（3）绝对定位
可设置4个属性值：static（静态定位）| relative（相对定位）| absolute（绝对定位）| fixed（固定定位）。

二、W3C标准

　　如图所示：

　　

三、CSS规定的定位机制

　　1.标准文档流：

　　　　标准文档流：从上而下，从左到右，输出文档内容。由块级元素、行级元素构成。

　　　　块级元素：从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行。如<div>、<ul>、<li>、<dl>、<dt>和<p>等等.....

　　　　行级元素：能在同一行内显示，不会改变HTML文档结构，无法设置宽高,如果想设置宽高，需加入display：block 或者inline-block;如：<span>  、<img>和大部分表单元素。

　　　　块级元素和行级元素都属于盒子模型。

　　　　盒子模型=网页布局的基石，由4部分组成：
　　　　　　　　1、边框（border）
　　　　　　　　2、外边距（margin）
　　　　　　　　3、内边距（padding）
　　　　　　　　4、盒子中的内容（content）

　　　　如图所示：

　　　　

　　　　　　　　

　　　　　　盒子模型尺寸：border+padding+margin+盒子内中尺寸。