响应式设计：固定比例（弹性盒子）

来源：互联网发布：洪恩软件开天辟地6 编辑：程序博客网时间：2024/05/01 03:22

1.固定的百分比（聚划算的手机站点）

2.决绝两边盒子宽度固定，中间盒子宽度随浏览器的大小而变化的问题（固比固的方法）

示例代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>固比固的方法</title>    <style>        /*        清空所有的margin和padding        */        *{            margin:0;            padding: 0;        }        div{            width: 100%;        /*浏览器的百分之百*/            height: 100px;            margin:100px auto;            background-color: #bc4f70;            position: relative;        }        div p:nth-of-type(1){            width: 100px;            height: 100px;            background-color: #02ff1c;            position: absolute;       /*采用绝对定位，不占用父盒子的宽度，实际上是会占用body的宽度的，也就是浏览器的宽度*/            /*            把这个盒子绝对定位到最左边            */            top:0;            left: 0;        }        div p:nth-of-type(2){            width: 100%;            /*               此时，中间的盒子占有的是浏览器去掉盒子1和盒子2占的宽度后剩余部分的百分之百，该宽度会随浏览器窗口的大小而变化             */            height: 100px;            background-color: red;            padding-left: 100px;       /*盒子1遮住了盒子2的内容，通过padding来解决*/            box-sizing: border-box;    /*添加了padding后，盒子2的宽度会增加100px,浏览器会出现滚动条，通过box-sizing来解决*/        }        div p:nth-of-type(3){            width: 120px;       /*该盒子的宽度保持固定宽度，不会随浏览器窗口的大小而改变*/            height: 100px;            background-color: #fff534;            position: absolute;            /*            把该盒子绝对定位到浏览器的最右边            */            top:0;            right: 0;        }    </style></head><body><div>    <p>1</p>    <p>2</p>    <p>3</p></div></body></html>

运行结果：

当浏览器的窗口发生变化时：

3.弹性盒属性：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>弹性盒子属性</title>    <style>       *{           margin:0;           padding:0;       }        div{            width: 800px;            height: 200px;            background-color: #bc4f70;            margin: 100px auto;            display: -webkit-box;   /*要把盒子变成弹性盒子显示，-webkit是适用于Chrome浏览器的*/        }        /*所有的p既没有设置宽度，也没有设置浮动*/       div p:nth-child(1){           background-color: #2e51ff;           -webkit-box-flex:1;        /*此处的数字可以为任何数字，不用考虑这些所有的数字加起来的总和为多少*/       }        div p:nth-child(2){            background-color: #bc1011;            -webkit-box-flex: 1;        }        div p:nth-child(3){            background-color: green;            -webkit-box-flex: 1;        }        p:n    </style></head><body>  <div>      <p>1</p>      <p>2</p>      <p>3</p>  </div></body></html>

运行结果：

如果将-webkit-box-flex的值进行调整，如下：

div p:nth-child(1){    background-color: #2e51ff;    -webkit-box-flex:100;        /*此处的数字可以为任何数字，不用考虑这些所有的数字加起来的总和为多少*/} div p:nth-child(2){     background-color: #bc1011;     -webkit-box-flex: 20; } div p:nth-child(3){     background-color: green;     -webkit-box-flex: 45; }

则会有如下效果：

4.CSS3弹性盒子属性中，给父盒子设置display:-webkit-box，用来说明它的子盒子是弹性盒；给子盒子设置-webkit-box-flex属性，用数字来表示所占的比例。

5.弹性盒子的方式来解决固比固的问题，示例代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>-webkit-box的 方式解决固比固问题</title>    <style>        *{            margin:0;            padding:0;        }        div{            width: 100%;            height: 200px;            margin:100px auto;            background-color: #bc4f70;            display: -webkit-box;        }        div p:nth-child(1){            width: 120px;       /*这个盒子的宽度是固定的，不参与-webkit-box*/            height: 200px;            background-color: #2e51ff;        }        div p:nth-child(2){            height: 200px;            background-color: #fdff1f;            -webkit-box-flex: 10; /*由于只有这一个盒子是弹性盒子，参与宽度的按比例分配，所以该数字可以是任意数字，但效果一样*/        }        div p:nth-child(3){            width: 120px;      /*该盒子也是固定宽度，不需要做成弹性盒子，不参与-webkit-box*/            height: 200px;            background-color: green;        }    </style></head><body><div>    <p>1</p>    <p>2</p>    <p>3</p></div></body></html>

运行结果：

改变窗口大小，效果如下：

注意：p标签表示的是文本集，所有它的里面只能放文本和图片，不能放别的内容

把上面的代码稍作调整：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>-webkit-box的 方式解决固比固问题</title>    <style>        *{            margin:0;            padding:0;        }        div{            width: 100%;            height: 200px;            margin:100px auto;            background-color: #bc4f70;            display: -webkit-box;        }        div p:nth-child(1){            width: 120px;       /*这个盒子的宽度是固定的，不参与-webkit-box*/            height: 200px;            background-color: #2e51ff;        }        div p:nth-child(2){            height: 200px;            background-color: #fdff1f;            -webkit-box-flex: 10; /*由于只有这一个盒子是弹性盒子，参与宽度的按比例分配，所以该数字可以是任意数字，但效果一样*/            display: -webkit-box;      /*让它的子盒子变为弹性盒子*/        }        div p:nth-child(3){            width: 120px;      /*该盒子也是固定宽度，不需要做成弹性盒子，不参与-webkit-box*/            height: 200px;            background-color: green;            display: -webkit-box;        }        div p:nth-child(2) span{            display: block;    /*span是行标签，将其转换为块标签，后面的高度和-webkit-box-flex才会起作用*/            -webkit-box-flex: 1;    /*三个span按照1:1:1的比例显示*/            height: 200px;            background-color: pink;        }        /*        第三个p盒子的子盒子没有必要处理成弹性盒子，因为p盒子的宽度是固定不变的，它的子盒子有没有弹性，显示都一样        */        div p:nth-child(3) span{            display: block;            height: 200px;            background-color: orange;            /*float: left;*/            -webkit-box-flex: 1;        }    </style></head><body><div>    <p>1</p>    <p>        <!--span{test$}*3+Tab键  快速写出下面的代码的方法-->        <span>test1</span>        <span>test2</span>        <span>test3</span>    </p>    <p>        <span>nihao1</span>        <span>nihao2</span>    </p></div></body></html>

效果如下：

（超出的部分为截图时截到的浏览器的边框）

6.高度按比例缩放的弹性盒：

示例代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>高度也随着窗口变化</title>    <style>        .content ul{            /*清除ul的样式*/            list-style: none;        }        .content ul li{            width: 30%;            height: 0;     /*此处高度为0，它的高度实际上是靠padding来撑起来的*/            float: left;    /*添加浮动，让色块都排在水平方向上*/            margin-right: 3%;       /*注意此处是用百分比表示的，如果用像素，有可能窗口比较小的时候会有色块掉下来*/            /*最终图片是呈递在padding里面的*/            padding-bottom: 22.50%;      /*占有父盒子的百分比，实际操作中要按填充的内容的比例换算而来的。比如是一个已知宽度为260px            的图片，高度为187，那就有260/187=30%/换算的比例   计算可以得出实际的百分比*/            /*background-color: #e9c7b1;*/            background: url("daiyu.jpg") no-repeat;       /*注意一定要加上no-repeat(不要平铺)*/            /*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。*/            background-size: cover;    /*如果不添加这句的话，当窗口缩小的很小的时候，只能看见内容的一部分了而看不到全部*/            border: #97ff9b solid 1px;            box-sizing: border-box;   /*因为添加了border以后，会使得内容掉下来，所以添加该代码*/            border-radius: 20px;          /*添加圆角*/        }    </style></head><body><!--div.content+Tab快速输入下面的内容--><div class="content">    <ul>        <li></li>        <li></li>        <li></li>    </ul></div></body></html>

运行效果：

窗口缩小后：

7.nth-child

规定属于其父元素的第二个子元素的每个 p 的背景色：

p:nth-child(2){background:#ff0000;}

8.nth-of-type的说明：

规定属于其父元素的第二个 p 元素的每个 p：

p:nth-of-type(2){background:#ff0000;}

0 0