盒模型——Five
作者:互联网
盒模型
.box{
/*
width\height 默认规定内容区域大小
内容区域放置文字或子标签
max-width : 800px;最大宽度是800px(0-800),会随设备增大而增大,但最大800px。
min-width : 800px;最小宽度是800px(800-无限大),会随设备缩小而缩小,但最小800px。
max-height: 300px;最大高度是300px(0-300),会随内容(文字或子标签)增大而增大,但最大300px。
min-height: 800px;最小高度是300px(300-无限大),会随内容(文字或子标签)缩小而缩小,但最小300px。
*/
width: 200px;
height: 200px;
background-color: violet;
/*
padding 内边距
内边距规定内容到边框的距离
一个值:四个边内编辑
两个值:上下,左右
三个值:上,左右,下
四个值:上,右,下,左(顺时针)
*/
padding: 20px 30px 40px 50px;
}
/*
边框
边框宽度 border-width
边框样式 border-style
solid 实线
dashed 虚线
double 双线
dotted 点状线
边框颜色 border-color
*/
/*
box-shadow 可以设置多个阴影
1、水平位置 必需
2、垂直位置 必需
3、模糊距离
4、阴影尺寸
5、阴影的颜色 默认黑色
6、阴影的内外部 默认外部 内部inset
*/
box-shadow: -1px -1px 5px white,1px 1px 5px black;
.box{
width: 200px;
height: 200px;
background-color: red;
/*
resize 调整盒子大小 必须配合overflw属性使用,不为默认的visible
none 默认
horizontal 可以调整宽度
vertical 可以调整高度
both 宽高都可以调整
*/
resize: both;
overflow: hidden;
}
.box{
/* 默认情况宽高指的是内容区域 */
width: 200px;
height: 200px;
background-color: blue;
/*
content-box 内容区域
border-box 内容,内边距,边框总和
*/
box-sizing: border-box;
}
/*
外边距塌陷问题
解决:
1、给父标签加边框或内边距
2、给父标签加溢出隐藏(overflow:hidden;)
*/
盒子隐藏:
display:none;不占位置
visibility:hidden;占用位置
标签:box,模型,边框,width,Five,800px,height,200px 来源: https://www.cnblogs.com/hgy-siyuewu/p/14209642.html