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