html5怎么自动填充父类框

本篇内容介绍了“html5怎么自动填充父类框”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

　　小米布局案例1:产品模块布局分析

　　类似于这样的产品模块,使用css+html布局来完成.

　　MI

　　*{

　　margin: 0;

　　padding: 0;

　　}

　　body{

　　background-color: #f5f5f5;

　　}

　　.box{

　　width:1100px;

　　height:400px;

　　margin: 200px auto;

　　}

　　.box1{

　　width:200px;

　　height:350px;

　　background-color: white;

　　margin: 10px 10px 10px 20px;

　　display:inline-block;

　　padding: 10px;

　　overflow: hidden;

　　transition: all 1s;

　　}

　　.box1:hover{

　　transform: scale(1.07);

　　}

　　.box1 img{

　　width: 100%;

　　}

　　.box1 h6{

　　text-indent: 25px;

　　}

　　.box1 p{

　　font-family: 宋体;

　　font-size: 10px;

　　color: #9e9494;

　　margin-top: 20px;

　　}

　　.box1 h5{

　　font-family: 微软雅黑;

　　color:red;

　　margin-top: 20px;

　　text-indent: 2em;

　　float: left;

　　}

　　#lgprice{

　　margin-top: 20px;

　　color: #9e9494;

　　}

　　圆角边框

　　border-radius:length;//数值越大,越圆.可以跟四个值,顺时针方向.

　　border-top-left-radius:xxpx;//设置左上角.

　　盒子阴影

　　box-shadow:h-shadow v-shadow blur spread color inset;//严格按照顺序来写

　　值

　　描述

　　h-shadow

　　必须,水平阴影的部分,可以是负值.

　　v-shadow

　　必须,垂直阴影的部分,可以是负值.

　　blur

　　可选,模糊距离.

　　spread

　　可选,阴影尺寸的位置.

　　color

　　可选,阴影的颜色.

　　inset

　　可选,可将外部阴影改为内部阴影,但是默认outset但是没必要写 .

　　小米布局案例2:增加阴影效果

　　box-shadow: 10px 10px 10px rgba(0,0,0,0.3);

　　很明显阴影的效果会出来.

　　浮动

　　为什么需要浮动?

　　使用行内块会出现空隙.

　　网页布局的第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动.

　　什么是浮动?

　　float属性用于创建浮动窗,将其移到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘.

“html5怎么自动填充父类框”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！