首页 > 代码库 > 初学CSS(写于接触CSS不到1个星期)

初学CSS(写于接触CSS不到1个星期)

   什么是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>