初学CSS（写于接触CSS不到1个星期）

浏览数：25 / 时间：2015年06月09日

什么是web前端？在第一次上课的时候就问过我们，当时我认为前端就是设计网页，但具体是什么，我也不是很清楚。老师解释道：web前端，就是你打开浏览器之后，所能看到的一切，都是用前端技术实现的。（我以前还认为页面是画出来的，没想到是写出来的，一下就高大上了。。。）

前端技术的核心有三个：HTML(超文本标记语言，主要用来描述一个网页的结构的)、CSS（层叠样式表，用来装饰网页）、javascript(网页上的脚本语言，是用来编程的)。

我理解CSS就是对于框架元素的全面补充，就好像是修房子，用HTML搭好了整个的框架外形，再用CSS去决定每一个房间该放些什么东西进去。同时在决定每个房间放些什么东西之后，怎样去实现我们的决定又有着很多的方式。而要成为一名出色的前端工程师，不仅要将这些多不胜数的方法熟练的运用，同时也要要求对不同的情况能够选取最合适简洁的方法，这样不仅利于自己的程序编写，同样有利于在某些地方做出改变时也能快速的应对自如。这些都要求我们要有一个积累的过程。

在CSS技术中，有一个重要的方面,即定位。说到定位，就会牵涉到盒模型。盒模型是指元素如何显示以及如何相互交互。在页面上，每一个元素看做一个矩形框。这个框是由元素的内容、内边距、边框和外边距组成。在定位元素时，要注意内边距和外边距对布局的影响，一般会使用通用选择器对所用元素进行设置：

及 *{

margin:0;

padding:0;

}

绝对定位：绝对定位会使元素的位置与文档流无关，故其不占据空间，普通文档流中其他元素的布局就像绝对定位的元素不存在时一样。所以在使用绝对定位元素要注意与其他元素的位置，不然会产生重叠。在使用绝对定位时如果要改变整个的布局在浏览器中的位置，这就需要使得最外围的元素定位为相对定位，这就可以再相对定位的情况下，其他的元素是绝对定位的。

相对定位：在使用相对时，不管是否移动，元素任然占据原来的空间，所以，移动元素会导致它覆盖其他框。

浮动：1）浮动的元素要从正常文档流中删除，但是它会影响其他的元素，也就是说它会影响布局。
2）浮动的非替换元素必须要指定width，否则元素的宽度会趋于0，从而导致浮动元素不能完整显示。
　　 3)如果设置了float属性left/right，那么该元素就成为了一个块级元素。
   4）浮动的元素左右外边界不能超出包含块的左右内边界。(Containing Block)
   5）浮动的元素永远不会重叠
   6）浮动元素不会超过容器的上Padding。
   7)后浮动的元素永远不会超过先浮动元素的顶端
   8）浮动元素会尽可能高的放置，但是这个高要受制于前面两条6、7。
   9）浮动元素的下边界没有要求，因此当容器容纳不下浮动元素的时候，它就会向下延伸。部分的浏览器会增大容器的高度以容纳下浮动元素。而符合CSS2.1规范的浏览器，要想让容器容下浮动元素，让容器也浮动起来。
      10)浮动元素向下延伸的时候，不会影响正常文本的显示，但是文本会相对于浮动元素偏移，而且部分文本背景会被浮动元素遮住。
   11)如果浮动的元素设置的负边距，那么就会破坏规则4/6/7。
   12）当浮动元素的宽度小于容器的宽度时，浮动元素会超出容器的左右边界。
     13）浮动重叠的规则：
        行内盒与浮动元素重叠时，那么行内盒的边框、背景和内容都会位于浮动元素上面。
        块级元素与浮动元素重叠时，边框、背景在浮动元素之下，而内容在浮动元素之上。
     14)如果对每个元素应用了clear:left，那么这个元素的左边就不能有浮动元素。
   15)clear不能用于行内元素。<br />
   16)如果对某个元素应用了clear来清除浮动，那么该元素上设置的上margin就会被忽略。但是，会有一个重新计算的上margin(有可能为0)。如果我们希望这个元素和浮动元素之间有一个明确的间隔，应该在浮动元素上设置下Margin。
例：消除浮动与不浮动元素的重叠影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fdong</title>
    <style>
    *{margin: 0;padding: 0;}
    #a1{
       float: left;
       width: 100px;
        height: 100px;
        background-color: red;
        margin: 50px;
    }
        #a2{
            overflow: hidden;

        width: 200px;
            height: 200px;
            background-color: yellow;
            margin: 30px;
        }
    </style>
</head>
<body>
   <div id="a1"></div>
   <div id="a2"></div>
</body>
</html>