码迷,mamicode.com
首页 > 其他好文 > 详细

5.盒模型

时间:2020-05-23 12:57:15      阅读:54      评论:0      收藏:0      [点我收藏+]

标签:foo   display   enter   pad   空间   应用   eve   border   分布   

# 5.盒模型

- box-sizing:content-box | border-box;
    默认content-box
    一个盒模型的功能强弱,直接决定了布局是否简洁,决定了编程的复杂度。

    正常盒子:
    boxWidth = width + border*2 + padding*2;

    IE6混杂模式的盒子整体宽度
    boxWidth = width;
    contentWidth = width - border*2 - padding*2;

- overflow:visiable | hidden | auto | scroll;

- resize: none | both | horizontal | vertical;
    要配合overflow使用


- flex
    display:flex | inline-flex;
        flex:将对象作为弹性伸缩和显示
        inline-flex:将对象作为内联块级弹性伸缩盒显示。

```html
/*
 * align-content:center;//多行文本居中
*/

/*
 * justify-content:center;
 * align-items:center;//单行文本居中
*/
<style>
    .wrapper{
        width:300px;
        height:300px;
        border:1px solid black;
        display:flex;
        /*flex-direction:row | row-reverse | column | column-reverse;主轴方向*/
        /*flex-wrapper:wrap | nowrap | wrap-reverse;换行
        */
        /*justify-content:flex-start | flex-end | center | space-between | space-around;基于主轴的对齐方式
        */

        /*align-items:flex-start | flex-end | center | baseline | stretch;基于交叉轴的对齐方式,主要还是针对单行元素来处理对齐方式*/

        /*align-content:flex-start | flex-end | center | space-between | space-around;基于交叉轴的对齐方式,主要还是针对多行元素来处理对齐方式*/
    }

    .content{
        width:150px;
        height:150px;
        border:1px solid green;
        box-sizing:border-box;

        /*order:0;默认值为0;数值大的在前面
        */
        /*align-self:auto | flexstart | flex-end | center | baseline | stretch;子项基于交叉轴的对齐方式
        */

        /*flex-grow:1;基于比例瓜分剩余空间,伸展性,0则不参与瓜分*/
        /*flex-shrink:
        */
        /*flex-basis:auto | 100px;用来覆盖子项的width
        */
    }
</style>
<div class="wrapper">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>
```

```html

<style>
/*
    flex-shrink的计算
*/
    .wrapper{
        width:600px;
        height:300px;
        border:1px solid black;
        display:flex;
    }

    .content{
        width:100px;
        height:100px;
        flex-shrink:1;
    }

    .content:nth-of-type(2){
        width:200px;
        flex-shrink:1;
    }
    .content:nth-of-type(3){
        width:400px;
        flex-shrink:3;
    }
    /*
     总长度:各自子元素内容盒的width * 各自子元素的flex-shrink值 的总和:
     (100 * 1) + (200 * 1) + (400 * 3) = 1500;
     
     计算第三个content压缩后的长度:
     要压缩的总长度 = 子元素内容盒的总长度 - 父亲的内容盒长度
     100 + 200 + 400 - 600 = 100;

     子元素压缩的长度 = (子元素的width * 子元素的flex-shrink) / 上面的总长度 * 要压缩的总长度
     (400 * 3)/1500 * 100 = 80

     最终子元素内容盒的width = 子元素内容盒的宽度 - 子元素要压缩的长度
     400 - 80 = 320;
    */
</style>
<div class="wrapper">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

/*
    flex-basis
        只写了flex-basis或者flex-basis大于width,代表元素的最小宽度。
        当不换行内容超过内容区时,容器会被撑开

        设置的width和flex-basis且flex-basis小于width时,代表元素的最小宽度是flex-basis,最大宽度是width。
        当不换行内容超过内容区时,容器会被撑开但是容器宽度不会超过width。

        无论什么情况,被不换行内容撑开的容器,不会被压缩

    word-break:break-word;//元素中内容可以换行
    弹性盒一般都要换行,才能进行正常的压缩。
*/
```

```html
<style>
/*
    弹性盒的应用
*/
/*
    1.单行居中
*/
    .wrapper{
        width:300px;
        height:300px;
        display:flex;
        border:1px solid black;
    }
    .content{
        width:100px;
        height:100px;
        border:1px solid black;
        justify-content:center;
        align-items:center;
    }
</style>
<div>
    <div class="content"></div>
</div>

<style>
/*
    2.多行居中
*/
    .wrapper{
        width:300px;
        height:300px;
        display:flex;
        border:1px solid black;
    }
    .content{
        width:100px;
        height:100px;
        border:1px solid black;
        justify-content:center;
        align-content:center;
    }
</style>
<div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

<style>
/*
    3.可动态增加的导航栏
*/
    .wrapper{
        width:300px;
        height:200px;
        display:flex;
        border:1px solid black;
    }
    .item{
        height:30px;
        flex:1 1 auto;
    }
</style>
<div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

<style>
/*
    4.等分布局
*/
    .wrapper{
        width:400px;
        height:200px;
        display:flex;
        border:1px solid black;
    }
    .content{
        border:1px solid black;
        box-sizing:border-box;
        height:100px;
        flex:1 1 auto;
    }
</style>
<div>
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
</div>

<style>
/*
    4.中间固定,两边自适应
*/
    .wrapper{
        width:400px;
        height:200px;
        display:flex;
        border:1px solid black;
    }
    .content{
        border:1px solid black;
        box-sizing:border-box;
        height:100px;
        flex:1 1 auto;
    }
    .content:nth-of-type(2){
        flex:0 0 200px;
    }
</style>
<div>
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
</div>

<style>
/*
    5.多行换行,一次排列
*/
    .wrapper{
        width:400px;
        height:800px;
        border:1px solid black;
        display:flex;
        flex-wrap:wrap;
        align-content:flex-start;
    }
    .content{
        border:1px solid black;
        box-sizing:border-box;
        height:100px;
        flex:1 1 auto;
    }
    .content:nth-of-type(2){
        flex:0 0 200px;
    }
</style>
<div>
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>
    <div class="content">5</div>
    <div class="content">6</div>
    <div class="content">7</div>
    <div class="content">8</div>
    <div class="content">9</div>
    <div class="content">10</div>
    <div class="content">11</div>
    <div class="content">12</div>
</div>

<style>
/*
    6.圣杯布局
*/
    .wrapper{
        width:300px;
        height:300px;
        border:1px solid black;
        display:flex;
        flex-direction:column;/*垂直布局*/
    }
    .header, .footer{
        border:1px solid black;
        box-sizing:border-box;
        flex:0 0 20%;
    }
    .contain{
        flex:1 1 auto;
        display: flex;
    }
    .left, .right{
        flex:0 0 20%;
    }
    .center{
        flex: 1 1 auto;
    }
</style>
<div>
    <div class="header"></div>
    <div class="contain">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
</div>
```
 
以上是markdown格式的笔记

5.盒模型

标签:foo   display   enter   pad   空间   应用   eve   border   分布   

原文地址:https://www.cnblogs.com/lanshanxiao/p/12941730.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!