前端攻城狮---css3之布局(2)

继上面布局，我们先来讲解一下固比固模型。

固比固模型

上面叫固比固模型，简单的来说就是 固定宽度 剩余部分 固定宽度的模式。怎么理解？还是先上案例吧

    
    
    
    
    


    

        

        
abcabcabc
        

    

我们可以看到header一共有三个子view，首先左边的孩子div宽度定死，右边的孩子div宽度也被定死，剩下的中间的孩子宽度撑满父亲。大家不妨去改变一下浏览器的宽度，在改变的过程中左边和右边的孩子宽度不变，中间的孩子宽度会随着浏览器的宽度的变化去自使用的改变。

我们还可以利用之前所学的flex布局来使用，就附上关键样式代码

      * {
            padding: 0;
             margin: 0;
        }
        header {
            position: relative;
            display: flex;
        }
        .logo {
            width: 120px;
            height: 60px;
            background-color: #b80964;
        }
        nav {
            height: 60px;
            flex: 1;
            background-color: purple
        }
        .btn {
            width: 120px;
            height: 60px;
            background-color: pink;
        }

给父亲设置display:flex，因为默认的房间就是水平排列，然后给nav设置比重唯一，意思就是撑满剩余的空间，同样也是固比固的一种写法。

总的来说 固比固有两种方式

• 采用绝对布局
• display:flex

box-sizing

box-sizing是html5常用的属性，他表示该视图的内边距和边框是否被宽高包含在内。怎么理解呢？如果我们给一个div设置了宽500px;padding:20px;border:2px solid black;那个该div实际的宽度就是500+20+20+2+2=544px；若使用了box-sizing：border-box，就不一样了该div的还是500px，只不过可见宽度变小了500-20-20-2-2=456；我们来看看效果吧

我们先来看看第一个div和第三个div的效果吧，第二个div就是一个参照物。

第一个div设置了box-sizing:border-box;也就是说将padding和border纳入整个div的高和宽中，怎么理解我们来看看下面的图

 可以看到该div自身的高度只剩下20px，原因是什么？因为用了border-box属性，将padding和border纳入了高度中，也成为为了高度的一部分。宽度同理。我们可以去算算offsetWidth和clientwidth的值

      offsetWidth = 500； clientWidth = 500-20-20 = 460

第三个div设置了box-sizing:content-box;这个属性的意思就是padding和border不纳入div的高和宽中。我们来看看下面这张图

看到div自身的高宽就是style设置的500*100，其实content-box也就是默认的属性。

      offsetWidth = 500+50+50+20+20=640    clientWidth = 500+50+50 = 600；

下面我们对border-box的值得理解进行加深一下，若我们把div:nth-child(1)的padding改为300px会怎么样呢？

结果就是div自身的宽高都没有了 都是0，并且实际显示的效果也要更大，也就是说自身的宽高可以没有，但是border和padding的设置的值必须有效，可以得出border和padding的优先级大于自身的宽高

min-width/max-width

其实这两个属性很好理解，就是设置了视图的最大和最小的宽度，这样就算浏览器被无限放大，那么最大也就显示到max-width的值，同理缩小到很小，最小也只能缩小到min-width的值

    div {
        width: 60%;    
        height: 120px;
        margin: 0 auto;
        min-width: 360px;
        max-width: 600px;
    }   

 

图片等比例变化

等比例缩放，顾名思义就是图片的宽高会随着父亲宽高的变化而变化。

有几种方法呢？下面来讲解一下

第一种是通过img设置auto属性去自适应父亲的宽高。

第二种是通过设置背景图片搭配paddingTop去自适应。

    
    
    
    
    


    
//方法1
        
    
    
//方法2          

方法1：

我们通过给父亲div设置了百分比的宽度，百分比布局也是一种自适应的方法，孩子img的宽度撑满父亲，高度随着宽度去自适应。这里我们可以看到多了一个display:block的属性，为什么要添加该属性，因为img是一个行内元素，当行内元素在块级元素内部的时候，默认对齐方式是baseline，所以会留有空隙，那么脱标是可以解决空隙的方案之一，还有一种就是设置vertical-align:top/bottom都可以。

方法2：

我们可以通过设置背景图片的方式去自适应，同样的都是利用百分比，也就是说利用width和padding-top去显示背景图片的宽和高，这次需要注意的是padding-top的值要根据图片的宽高比去设置。

js动态计算宽/高去自适应

一样的，我们通过window的一个监听浏览器大小变化的方法onresize，当浏览器大小发生变化是去动态的设置高度，从而达到自适应的效果。

由于篇幅有限在css3布局(3)中还会介绍其他知识点如display:box、em、rem、媒体等，若表达有误请指出，望共同进步。