【CSS——必备的基础】

前言：

最近在实践牛腩新闻系统，从内部着手，到外面界面的实现，感觉真的是很神奇的事情，学习带给我的是更多的是快乐，针对于最近的界面的学习，小编来总结一下CSS，希望会给现在的你带来一些启发。

核心：

一、宏观把握

二、CSS简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）
或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

用七个简洁的几句话总结一下：

•  将网页的内容和样式分离
• CSS 指层叠样式表 (Cascading Style Sheets)
•  样式定义如何显示 HTML 元素
•  样式通常存储在样式表中
•  把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

三、较为重要的点

1.Css选择器优先级：

ID选择器 > 类选择器>HTML标签选择器

  2.标准流  VS 非标准流

首先理解一下流，提到流，我们想到的是流水，在网页设计中流指的是元素（标签）的排列方式。

• 标准流:元素在网页中就像流水,排在前面的元素(标签)内容前面出现,排在后面的元素(标签)内容后面出现
• 非标准流:当某个元素(标签)脱离了标准流(比如因为相对定位)排列,我们统称为非标准排列

3.   盒子模型

盒子模型，还没接触之前，真的不知道是什么东西，在牛腩老师把他来比作相框的时候，真的很形象，我可以利用这样相似来记住我们的盒子模型。

从里向外：分别是内容、内边距、边框、外边距

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素

CSS样式：

<span style="font-size:18px;">#category{    /*新闻分类框架*/    width:180px;    height :368px;    margin-right:5px;    margin-bottom:10px;</span>

   4.  定位

CSS 有三种基本的定位机制：普通流、浮动和绝对定位

CSS 相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

CSS 绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

CSS 浮动

举例：将框1向右浮动

总结：

CSS才刚开始，B/S带我走进了不一样的旅程，后面的学习会继续补充！