02_CSS3

盒模型

关于盒模型存在两种形式，分别是W3C标准盒模型和IE盒模型，如下图所示，其区别主要在于宽度和高度的计算方式，CSS3对盒模型做出了新的定义，即允许开发人员指定盒子宽度和高度的计算方式。


IE盒模型只会出现在IE5版本和IE6+的怪异模式中。

box-sizing：content-box | border-box

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div1{
            width: 100px;
            height: 100px;
            padding: 20px;
            margin: 20px;
            border: 20px solid red;
            /*border-box：width和height包含padding和border*/
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .div2{
            width: 100px;
            height: 100px;
            padding: 20px;
            margin: 20px;
            border: 20px solid red;
            /*content-box：width和height不包含padding和border*/
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

背景

背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
　　cover 会使“最大”边，进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。
　　contain 会使“最小”边，进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片。
　　background-size会以background-clip设定的盒模型计算
　　背景图片尺寸在实际开发中应用十分广泛。

例：background-clip属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            float: left;
        }
        .div1{
            width: 200px;
            height: 200px;
            padding: 20px;
            margin: 10px;
            border:5px dashed red;
            background-color: yellow;

            /*默认的背景填充区域*/
            /*可以修改我的背景区域*/
            background-clip: content-box;
        }
        .div2{
            width: 200px;
            height: 200px;
            padding: 20px;
            margin: 10px;
            border:5px dashed red;
            background-color: yellow;

            /*可以修改我的背景区域*/
            background-clip: padding-box;
        }
        .div3{
            width: 200px;
            height: 200px;
            padding: 20px;
            margin: 10px;
            border:5px dashed red;
            background-color: yellow;

            /*可以修改我的背景区域*/
            background-clip: border-box;
        }

    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

例：background-origin和background-size属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            float: left;
        }
        .div1{
            width: 200px;
            height: 200px;
            padding: 50px;
            margin: 10px;
            border: 10px dashed red;
            background-image: url(images/bg.jpg);
            background-color: yellow;
            background-repeat: no-repeat;
            background-origin: border-box;
        }
        .div2{
            width: 200px;
            height: 200px;
            padding: 50px;
            margin: 10px;
            border: 10px dashed red;
            background-image: url(images/bg.jpg);
            background-color: yellow;
            background-repeat: no-repeat;
            background-origin: padding-box;
        }
        .div3{
            width: 200px;
            height: 200px;
            padding: 50px;
            margin: 10px;
            border: 10px dashed red;
            background-image: url(images/bg.jpg);
            background-color: yellow;
            background-repeat: no-repeat;
            background-origin: content-box;
        }
        .div4{
            width: 200px;
            height: 200px;
            padding: 50px;
            margin: 10px;
            border: 10px dashed red;
            background-image: url(images/bg.jpg);
            background-color: yellow;
            background-repeat: no-repeat;
            background-origin: padding-box;
            background-clip: content-box;
        }
        .div5{
            width: 100px;
            height: 200px;
            padding: 50px;
            margin: 10px;
            border: 10px dashed red;
            background-image: url(images/bg.jpg);
            background-color: yellow;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .div6{
            width: 100px;
            height: 200px;
            padding: 50px;
            margin: 10px;
            border: 10px dashed red;
            background-image: url(images/bg.jpg);
            background-color: yellow;
            background-repeat: no-repeat;
            background-size: 100% auto;
        }
        .div7{
            width: 100px;
            height: 200px;
            padding: 50px;
            margin: 10px;
            border: 10px dashed red;
            background-image: url(images/bg.jpg);
            background-color: yellow;
            background-repeat: no-repeat;
            background-size: cover;
        }
        /*contain 会使“最小”边，进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片。*/
        .div8{
            width: 100px;
            height: 200px;
            padding: 50px;
            margin: 10px;
            border: 10px dashed red;
            background-image: url(images/bg.jpg);
            background-color: yellow;
            background-repeat: no-repeat;
            background-size: contain;
        }
        .div9{
            width: 130px;
            height: 130px;
            margin: 20px;
            position: relative;
            background-image: url("images/bg.jpg");
            background-repeat: no-repeat;
        }
        .div9::before,
        .div9::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            padding: 30px;
            box-sizing: border-box;
        }
        .div9::after{
            background-color: red;
            background-clip: content-box;
            background-origin: padding-box;
            left: 100px;
            background-image: url("images/bg.jpg");
            background-repeat: no-repeat;
        }
        .div9::before{
            background-clip: content-box;
            background-color: #FFF;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
<div class="div8"></div>
<div class="div9"></div>
</body>
</html>

例：多重背景

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {
            background-color: #CCC;
        }
        .duo{
            width: 623px;
            height: 417px;
            margin: 100px auto;
            background: url("images/bg1.png") left top  no-repeat,
                        url("images/bg2.png") right top no-repeat,
                        url("images/bg3.png") right bottom no-repeat,
                        url("images/bg4.png") left bottom no-repeat,
                        url("images/bg5.png") center center no-repeat;
            background-color: #FFF;
        }
    </style>
</head>
<body>
    <div class="duo"></div>
</body>
</html>

渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
　　可分为线性渐变、径向渐变、重复渐变。
　　线性渐变指沿着某条直线朝一个方向产生渐变效果。
　　径向渐变指从一个中心点开始沿着四周产生渐变效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板</title>
    <style>
        body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #F7F7F7;
        }

        .wrapper {
            width: 1000px;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }

        header {
            padding: 20px 0;
            margin-bottom: 20px;
            text-align: center;
        }

        header h3 {
            line-height: 1;
            font-weight: normal;
            font-size: 28px;
        }

        .main {
            /*overflow: hidden;*/
        }

        .main:after {
            content: '';
            clear: both;
            display: block;
        }

        .main .item {
            width: 210px;
            height: 210px;
            margin: 0 30px 30px 0;
            display: flex;
            position: relative;
            background-color: #FFF;
            float: left;
            box-shadow: 2px 2px 5px #CCC;
        }

        .main .item:after {
            content: attr(data-brief);
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 210px;
            position: absolute;
            top: 0;
            left: 0;
            color: #FFF;
            font-family: '微软雅黑';
            font-size: 18px;
            background-color: rgba(170, 170, 170, 0);
            z-index: -1;
            transition: all 0.3s ease-in;
        }

        .main .item:hover:after {
            background-color: rgba(170, 170, 170, 0.6);
            z-index: 100;
        }

        .main .item:nth-child(4n) {
            margin-right: 0;
        }

        /*.main .item:nth-last-child(-n+5) {
            margin-bottom: 0;
        }*/

        /* 以上是骨架样式 */

        .linear-gradient {
            width: 180px;
            height: 50px;
            margin: auto;
        }
        /*标准写法*/
        .item:nth-child(1) .linear-gradient{
            background-image: linear-gradient(yellow,red);
        }
        /*多个颜色渐变*/
        .item:nth-child(2) .linear-gradient{
            background-image: linear-gradient(yellow , green , red , blue);
        }
        /*角度确定方向*/
        .item:nth-child(3) .linear-gradient{
            background-image: linear-gradient(0deg, yellow, red);
        }
        /*角度确定方向*/
        /*水平方向渐变*/
        /*正上方为0度，顺时针旋转*/
        .item:nth-child(4) .linear-gradient{
            background-image: linear-gradient(90deg, yellow, red);
        }
        .item:nth-child(5) .linear-gradient{
            background-image: linear-gradient(20deg, yellow, red);
        }
        /*关键字确定方向*/
        .item:nth-child(6) .linear-gradient{
            background-image: linear-gradient(to top, yellow, red);
        }
        .item:nth-child(7) .linear-gradient{
            background-image: linear-gradient(to top left, yellow, red);
        }
        .item:nth-child(8) .linear-gradient{
            background-image: linear-gradient(to left top, yellow, red);
        }
        /*控制渐变*/
        /*
            0-20：黄色
            20-40：红黄渐变色
            40-100：红色
        */
        .item:nth-child(9) .linear-gradient{
            background-image: linear-gradient(to left, yellow 20%, red 40%);
        }
        .item:nth-child(10) .linear-gradient{
            background-image: linear-gradient(to left, yellow 50%, red 50%);
        }
        .item:nth-child(11) .linear-gradient{
            background-image: linear-gradient(to left, yellow 5%,blue 50%, red 95%);
        }
    </style>
</head>
<body>
<div class="wrapper">
    <header>
        <h3>CSS3渐变</h3>
    </header>
    <div class="main">
        <div class="item" data-brief="标准写法">
            <div class="linear-gradient"></div>

        </div>
        <div class="item" data-brief="多个颜色渐变">
            <div class="linear-gradient"></div>
        </div>
        <div class="item" data-brief="角度确定方向">
            <div class="linear-gradient"></div>
        </div>
        <div class="item">
            <div class="linear-gradient"></div>
        </div>
        <div class="item">
            <div class="linear-gradient"></div>
        </div>
        <div class="item">
            <div class="linear-gradient"></div>
        </div>
        <div class="item">
            <div class="linear-gradient"></div>
        </div>
        <div class="item">
            <div class="linear-gradient"></div>
        </div>
        <div class="item">
            <div class="linear-gradient"></div>
        </div>
        <div class="item">
            <div class="linear-gradient"></div>
        </div>
        <div class="item">
            <div class="linear-gradient"></div>
        </div>
    </div>
</div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS3
    1、属性选择器：id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,657评论 0赞 7
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    wzhiq896阅读 1,805评论 0赞 2
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,338评论 0赞 11
  • HTML5+CSS3整体回顾
    转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳，这里只是一个提...
    前端进阶之旅阅读 9,108评论 22赞 225
  • CSS3的正确打开方式（详解|持续更新）
    话题背景：如今网页展示的姿势是这样的 图片来自：设计之家 炫酷的网页展示，支撑它的正是强大的CSS3，还有什么理由...
    aliensq阅读 2,057评论 0赞 2