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;
}