老雷html/css开发视频教程之学习css的尺寸与补白样式
老雷html/css开发视频教程之尺寸与补白
一、宽度
width 宽度
min-width 最小宽度
max-width 最大宽度
width：<length> | <percentage> | auto
.w{
width:200px;
width:10rem;
width:20%;
max-width:500px;
}二、高度
height：<length> | <percentage> | auto
height 高度
min-height 最小高度
max-height 最大高度
.h{
height:200px;
height:20%;
}三、外补白margin
外补白是对外的，两个盒子之间的距离
可拆分
margin-top
margin-right
margin-bottom
margin-left
margin：像素|百分比
.box{
margin:10px;
margin:20px 10px 5px 6px;
margin-top:10px;
}四、内补白 padding
内补白是对内的，一个盒子壳的厚度
可拆分
padding-top
padding-right
padding-bottom
padding-left
padding：像素|百分比
.box{
padding:10px;
padding:10% 10px 5px 6px;
padding-top:10px;
}五、box-sizing
设置或检索对象的盒模型组成模式
box-sizing：content-box | border-box
content-box 默认值，padding和border不被包含在定义的width和height之内，会被padding撑开
border-box padding和border被包含在定义的width和height之内。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>尺寸与补白</title>
<style>
.box1,.box2{
width:200px;
height:100px;
border:1px solid #0F8E82;
box-sizing: border-box;
}
.box1{
margin-bottom: 10px;
}
.box2{
padding: 10px;
}
.box3{
min-width:200px;
min-height:100px;
max-width:400px;
max-height:200px;
border:1px solid #0F8E82;
box-sizing: border-box;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box1">老雷</div>
<div class="box2">老雷</div>
<div class="box3">老雷</div>
</body>
</html>