<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>postion</title>
<style>
.box1{
/*
*使用width来设置盒子内容的宽度
* height来设置盒子内容的高度
* width和height
*/
width:200px;
height:200px;
background: greenyellow;
/*设置边框*/
border:3px red solid;
/*
*内边距（padding）：指定盒子的内容区与盒子边框之间的距离
* 一共有四个方向的内边距，可以通过：
* padding-top
* padding-bottom
* padding-left
* padding-right
* 来设置四个方向的内边距
*
* 内边距会影响盒子可见框的大小，元素的背景会延伸到内边距
* 盒子的大小由内容区、内边距和边框共同决定
* 盒子的可见框的宽度=border-left-width+padding-left+width+padding-right+border-right-width
* .............高度=...........
*/
/*padding:20px;*/
padding:20px 30px 40px;
/*上、右左、下 （顺时针）*/
padding:20px 200px 100px 40px;
/*上、右、左、下*/
padding:20px 200px;
/*上下、左右*/
}
/*创建一个子元素box2来占满box1*/
.box2{
height:100%;
width:100%;
background: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">我是box2</div>
</div>
</body>
</html>
盒模型——内边距
猜你喜欢
转载自www.cnblogs.com/goodgirl----xiaomei/p/9782157.html
今日推荐
周排行