CSS概述

CSS，全名Cascading Style Sheet，字面意思为层叠样式表。在前端开发中，CSS 通常和HTML,javaScript一起实现网页的交互效果。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。通俗地说，HTML是网页的骨架，承载着网页的内容。那么CSS则是网页的“化妆师”，主要负责网页布局、颜色大小、简单特效的制作。

CSS的发展

CSS的发展是一个渐进的过程，在CSS1时用于网页的排版、布局等问题，这时突出一个“层叠”的概念。在CSS2的时候已经较为完善，再接着，CSS2.1,CSS3在其基础上不断优化，增加功能，提高网站的可维护性及运行速度。

CSS属性的优先级

首先，CSS有三种样式，分别是行内式，内联式和外链式（同JavaScript相同）。内联式优先级最高，其样式是通过‘style=“属性名：属性值”’的形式写在HTML的标签后，虽然行内式优先级最高，但是会造成代码冗余，后期不易维护，所以很少用。当然在属性很少或怕属性被占据的时候，也可以使用（CSS中有!important）。内联式：内联式的CSS代码写在head标签内，title标签下，内联式通常用于属性比较多，总体内容比较少时，优先级低于内联式但高于外链式。外链式：通过link标签引入外部的CSS文件以添加CSS属性，外链式通常用于项目和代码较多的情况，有利于修改和维护，优先级最低。

盒子模型

盒子模型经常用于网页的布局，网页内容通常由一个个div（其他标签也可）嵌套而成。拿一个div举例，展示的内容为content，那么它的边框为border，主体内容content到边框的举例为padding（内边距），边框到另外的盒子间的距离为margin（外边距），以上是盒子模型的四大组成部分，他们都会占据边框向外延伸，那么就会使盒子撑大，改变盒子原来大小，想要既设置边框边距，又不改变原来大小，最好的方法就是在后方加属性，box-sizing:border-box，则不会改变原border大小。在实际应用中，关于margin有一些问题，如：外边距折叠，外边距塌陷问题等都需要注意。

定位

在CSS中有四种定位，分别相对定位（relative），绝对定位（absolute），静态定位（static）（不写则默认），以及固定定位（fixed）（这四种比较常用），CSS3以后加入了弹性布局，Grid布局等。四种布局在实际开发中各有各的好处，不要拘泥于一种方法使用，希望能灵活应用。

结尾

本篇文章浅谈了CSS的理解，还有很多没有谈到，希望大家提出自己的观点并发表，感谢观看！