简介
css是页面布局和样式的关键，也是前端三大基石之一。针对完全不懂代码的人， 一个星期看完html和css基础（3wschool ），就可以写一个长得像某某网首页的页面。因为 CSS 常用属性就那么多， 没什么逻辑性，熟记各个属性值对应的特性就能上手了。但是想要真正理解css，还需要理解css的一些重要知识点，这样才可能做到灵活变通，做到有方法有策略的进行布局和写样式，而不是心中没数只是不断尝试。
在 CSS 世界中，HTML 是魔法石，选择器就是选择法器，CSS 属性就 是魔法师，CSS 各种属性值就是魔法师的魔法技能，浏览器就是他们所在的“王国”，“王国”会不断 更新法律法规(版本升级)，决定是否允许使用新的魔法石(HTML5 新标签新属性)，是否允许新的 魔法师入“国籍”(CSS3 新属性)，或者允许魔法师使用某些新技能(CSS 新的属性值)，以及是否舍 弃某些魔法技能(如 display:run-in) -- 引用《css世界》
核心知识点
常用的选择器及权重
比较常用的选择器有：
- 基本选择器：
通配符选择器（＊）
id选择器（#ID）
类选择器（.className）
元素选择器(E)
后代选择器（Ｅ Ｆ）
子元素选择器(E>F)
相邻兄弟元素选择器(E + F)
群组选择器（selector1,selector2,...,selectorN） - 属性选择器
- 伪类选择器
详细参考：https://leohxj.gitbooks.io/front-end-database/html-and-css-basic/css-selector.html
image.png
所谓权重也就是优先级，比如一个标签设置了多个class、id和style，样式到底会如何执行呢？这时候就需要根据权重时进行处理了，所以针对较复杂的情况，需要掌握权重
权重学习资料可以参考： http://www.w3cplus.com/css/css-specificity-things-you-should-know.html
盒子模型
CSS的盒模型是CSS的基础，同时也是难点，这个问题经常在面试中会被问到。一个盒子中主要的属性就5个：width、height、padding、border、margin。盒子模型分为两种，标准盒子模型和IE盒子模型，如下：
image.png
image.png
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。可以认为每个html标签都是一个方块，然后这个方块又包着几个小方块，如同盒子一层层的包裹着，这就是所谓的盒模型。
实例说明盒子模型参考：https://www.w3cplus.com/css/that-navigation-bar-design.html
布局方式（定位方式与浮动）
所谓布局就是根据UI图，先判断该页面大致是什么布局，比如两栏布局、上中下布局还是三栏布局等，然后每个部分采取什么布局方式进行实现的过程。
一般布局写法流程：先搭好整体布局框架，然后再分别根据每个部分去实现。比如上中下布局，我们可以先将整体写出来，有几部分就写几个大盒子。
<html>
<head>
<title>页面布局</title>
</head>
<body>
<div class="header">头部</div>
<div class="container">内容</div>
<div class="footer">底部</div>
</body>
</html>
然后头部内容部分也是按照这种思路去实现，头部子元素也是如此不断迭代这个思路即可。
布局必须掌握css的position属性、float属性和display属性。
postion 重点掌握relative、absolute、fixed的定位基准及相对谁移动
- postion定位详解参考：http://www.imooc.com/article/18064
- float浮动定位详解参考：http://www.imooc.com/article/9023
- display属性参考：http://renniaofei.com/code/css-display-yemianbuju-shuxing-xiangjie.html
- 常见几种布局方法参考：https://zhuanlan.zhihu.com/p/25565751
书写及命名规范：
若刚开始不注意css书写和命名规范会写的比较随意，导致特别混乱，对后期的维护不利。所以为了更好的书写css，有必要掌握css的书写和命名规范。
参考资料：
网友评论