css2基础知识梳理

基础的css知识，只放XMind的截图。

css01

css02

css03

css04

css05

• css+div布局是前端的基本功，要多多练习。运用标准流、浮动、定位、层级等，做简单的静态页面。一定多多练习，提高代码熟练度，和布局分析能力。
• 小项目练习，要清晰每一步的做法，比如先让元素实例化，然后去填充内容。
• 对于一些零碎的css+div，多看看笔记。

【转 via.wang】布局中所遵循的规范或是通例

　　　一般是遵循从上到下，从左到右的一个顺序。从页面的稳定性上来说，优先考虑使用标准流，其次考虑浮动或定位。

　　　遵循标准流的元素中，又以宽高最稳定，先把大的框架实例化出来，再进行细节的布局。能用padding的优先考虑padding，其实才考虑margin。如果没有margin的边距合并或是共享的问题话，也是可以比较愉快的使用margin的。

　　　我们网页的布局其实就像是在搭积木。将一块块的盒子组合在一块，使其呈现一个漂亮的页面效果。Html中任何一个元素都可以看成一个盒模型，都有宽高，内外边距。

但行内元素的宽高不起作用，只有块级元素的宽高有效。行内元素的左右边距是起效果的。为了让行内元素也可能拥有宽高，可以有两种办法：

　　　　第一种是让行内元素转换成块级元素或是行内块元素,代码如下：

　　　　　　display: block;

　　　　　　display: inline-block;

　　　　第二种是给行内元素添加浮动或是定位，浮动或是定位了的元素脱离标准流的控制了，就会自动的拥有宽高的效果。

　　　　　　用到的块级元素有： div, p, ul,li,dl,dt,dd,h1,h2,h3

　　　　　　用到的行内元素有： span,a,del,em,i,s

　　　　　　用到的行内块元素有：img,input,button 注意行内块元素相邻排列默认有几像素的间距，只能通过浮动解决这个问题。