怪异盒模型及其他

2023-12-29 13:32

文章标签 模型怪异

本文主要是介绍怪异盒模型及其他，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

转自：http://blog.csdn.net/Erosvan/article/details/52648210

一、怪异盒模型

[html]  view plain  copy
<!doctype html>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <title>怪异盒模型</title>  
        <style type="text/css">  
            .reddiv {  
                width: 200px;  
                height: 200px;  
                background-color: red;  
                box-sizing: border-box;  
                border: 20px blue solid;  
                padding-left: 50px;  
                /*怪异盒模型    
                 * box-sizing: border-box  
                    和标准盒模型不一样的地方在于 padding 和 border 不会让整体宽度增加  
                */  
            }  
        </style>  
    </head>  
    <body>  
        <div class="reddiv">1</div>  
    </body>  
</html>  

二、弹性盒模型

[html]  view plain  copy
<!doctype html>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <title>弹性盒模型</title>  
        <style type="text/css">  
            .bigdiv {  
                width: 600px;  
                height: 400px;  
                border: blue 5px solid;  
                /*  
                    可以通过 display: -webkit-box 设置一个容器为弹性盒模型。弹性盒模型里面的元素默认从左往右排列，可以给子元素设置 -webkit-box-flex 来分配这个子元素所占空间的份数(比例)  
                */  
                display: -webkit-box;  
                /*排列顺序  
                    reverse 反向  
                */  
                -webkit-box-direction: reverse;  
                /*分配方式  
                    vertical 竖直分配  
                */  
                -webkit-box-orient: vertical;  
            }  
            .reddiv {  
                background-color: red;  
                -webkit-box-flex: 5;  
            }  
            .bluediv {  
                background-color: blue;  
                -webkit-box-flex: 3;  
            }  
        </style>  
    </head>  
    <body>  
        <div class="bigdiv">  
            <div class="reddiv">1</div>  
            <div class="bluediv">2</div>  
        </div>  
    </body>  
</html>  

三、倒影

[html]  view plain  copy
<!doctype html>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <title>倒影</title>  
        <style type="text/css">  
            img {  
                margin-left: 300px;  
                  
                /*  
                    倒影  
                    1、above方向  
                    2、倒影和实像的距离  
  
                */  
                -webkit-box-reflect: below 10px linear-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,1) 100%);  
            }  
        </style>  
    </head>  
    <body>  
        <img width="300" src="http://img3.imgtn.bdimg.com/it/u=2180620476,2444084311&fm=206&gp=0.jpg" alt="">  
        <img src="http://file.fh21.com.cn/fhfile1/M00/20/5F/o4YBAFXQMsSAHDcjAA7HEUK5pa8060.gif" alt="">  
    </body>  
</html>  

四、阴影

[html]  view plain  copy
<!doctype html>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <title>阴影</title>  
        <style type="text/css">  
            .reddiv {  
                width: 200px;  
                height: 200px;  
                background-color: red;  
                /*  
                    box-shadow 代表一个容器的阴影：  
                    第一个值：阴影X方向的位移  
                    第二个值：阴影Y方向的位移  
                    第三个值：阴影的模糊程度  
                    第四个值：阴影的颜色  
                */  
                box-shadow: 10px 10px 10px green,-10px 10px 10px blue,10px -10px 10px black;  
                text-shadow: 10px 10px 10px pink;  
                font-size: 30px;  
            }  
        </style>  
    </head>  
    <body>  
        <div class="reddiv">文字文字文字文字文字<span>文字文字文字文字</span></div>  
    </body>  
</html>  