css进阶

css选择器

1.盒子模型

1.1边框（border）

    
    
    



    
我是盒子模型

边框就是一个四边形的边框，这里其实很多格式，其实如果想要更多种查一下就好，当然用的最多的就是我注释的那个语句，那个很通用。

1.2内边距（padding）

首先直观的感受一下什么是内间距，就是一个盒子内部的在里面的间距，尤其注意，这个内间距是先定义一个盒子，然后不是在盒子内部取一部分作为内间距，而是把一个盒子的内部直接拓宽，所以说盒子正常是会拓宽的。所以做页面的时候尽量用外间距来使用。

    
    
    



    
我是盒子模型

首先解释一下这个代码，其实padding可以传4个参数，和上面的边框相同，方向是上右下左的顺序，但是如果传两个参数，就默认为上等于下，右等于左，如果传一个参数就是默认都是这一个间距。

1.3外边距（margin）

    
    
    



    
我是参照物
    

        

        我是盒子1
        
        我是盒子模型

这个和之前的有所不同，主要是因为对于外间距来说，参照物很重要，这里就有几个问题，第一种情况，如果只有两个盒子，都是没有外边框的话，那么假如第一个盒子定义的下边距为50px，第二个盒子的上边距为100px，那么这两个盒子的距离就是100px，他们之间取得是最大值而不是相加的值。第二个问题就是如果存在嵌套盒子的情况，而外面的盒子没有边框的话，那么其实定义这个盒子的整体位置的其实是小盒子，所以为了避免麻烦，尽量在外面的盒子上加上边框，这样出错的概率就会变小很多。

2.浮动

    
    
    



   

       
我是盒子一
       
我是盒子二
       
我是盒子三
   

首先解释一下什么是浮动，浮动就是对一个div盒子来说，浮动会改变盒子正常的文档流，对于浮动最经典的操作就是一列变成一行，上面的代码我是把浮动注释掉了的，就是想看看原来是什么样子的。

原来就是这个样子的。
当然我把注释放开之后是什么样子的呢。

你会发现，好像和我们想象的不太一样呀，为啥会这个样子的呢，因为我们说过浮动脱离了正常的文档流，这样的话，对于边框而言就找不到限制边框的东西啦，所以说就变成这个样子了。那我们怎么改这个东西呢，方法有很多，我就写一个最推荐的方法吧。

    
    
    



   

       
我是盒子一
       
我是盒子二
       
我是盒子三
   

这个就是改完的代码，主要就是clearfix，这就是相当于一个class，写完放在标签中就可以，解释一下里面是什么意思，display：block就是让float变成块级元素，其实本来的div应该是块级元素，但是因为加入float之后就不是块级元素了，所以用这个重新变成块级元素，这样边框就有了作用。clear就是字面的意思，全部清空，content就是不填内容，我试过了，如果你在content加入内容，就会在下面在开辟一个小块，然后输出内容。

你甚至可以通过样式控制来实现这个模块的改写。当然主要是实现行变成块的功能。

3.定位

首先说明几个概念，绝对定位和相对定位，绝对定位是脱离文档流的，相对定位是不脱离文档流的，也就是说相对定位是不影响其他布局的，而相对文档流是影响其他的网页布局的，而我们经常看到的小广告用的是固定定位，其实属于绝对定位。但是这个比较特殊，这个fixed是相对于你的浏览器的，也就是说无论你怎么滑动，都是在你当前页面的哪个固定的位置。

    
    
    



   

       
我是盒子一
   

就是这样的，无论你怎么滑动你的鼠标，你都能发现这个绿色的小块还在那个位置。

3.1相对定位（relative）

前面用了一个最通俗易懂的小例子说明了什么是固定定位，现在说的是相对定位，主要还是看效果和代码吧

    
    
    


   

       
我是盒子一
       
我是盒子二
       
   

上面的是没有使用相对定位的，下面是使用了相对定位的。说明了什么呢？说明了使用了相对定位之后不会改变改变其他的网页布局，也就是说在改编位置前，其实前面还是有一个东西在占有地方。

3.2绝对定位（absolute）

    
    
    



   

       
我是盒子一
       
我是盒子二
       
   

是这个样子，这里我没有使用浮动，但是他改变了。这就是绝对定位。

3.3使用时候使用法则

其实使用的法则，总结一句话就是父相子绝，就是如果是对于那种div嵌套两个盒子来说，尽量对于父亲盒子要用到相对定位，对于子盒子可以使用绝对定位，这样的话，可以防止盒子因为改变而导致页面出项问题。