[04-05]box框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式

实际占有的宽 = width + 2padding(内边距) + 2border(边框) + 2margin(外边距)

实际占有的高 = height + 2padding + 2border + 2margin

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

设置一个P元素的填充：

p {

　　padding:10px 5px 15px 20px; /*上填充是 10px ,右填充是 5px ,下填充是 15px ,左填充是 20px*/

　　padding:10px 5px 15px; /*上填充是 10px ,右填充和左填充是 5px ,下填充是 15px */

　　padding:10px 5px; /* 上填充和下填充是 10px ,右填充和左填充是 5px */

　　padding:10px; /* 所有四个填充都是 10px */

}

border ,设置四个边框样式：

p
{
border:5px solid red;
}

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

　　margin:10px 5px 15px 20px;/*上边距是 10px ,右边距是 5px ,下边距是 15px ,左边距是 20px*/

　　margin:10px 5px 15px;/* 上边距是 10px ,右边距和左边距是 5px ,下边距是 15px */

　　margin:10px 5px; /* 上边距和下边距是 10px ,右边距和左边距是 5px */

　　margin:10px;/* 所有四个边距都是 10px */

}

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

div{

　　border: 1px solid red;

　　width: 100px;

　　height: 100px;

}

#d0{

　　float: none;

}

#d1{

　　float: right;

　　padding: 20px;

}

#d2{

　　padding: 20px; /*四个边设置相同的边框*/

　　margin: 20px;

}

#d3{

　　padding: 10px 20px 30px 50xp;/*四个边设置不同的边距(上右下左)*/

　　margin: 10px 20px 30px 40px;

}

#d4{

　　padding-left: 20px;/*单个边设置边距（left/right/top/bottom）*/

　　margin-bottom: 40px;

}

#d5{

　　/*对边设置相同的边距,上下、左右*/

　　padding: 20px;

　　margin: 20px;

}

#d6{

　　/*对边设置边距的特例:在设置外边时，若左右外边距值为auto，则该元素水平居中*/

　　margin: 20px 40px;/* 左右20px，上下40px*/

}

巴特西

[04-05]box框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式

最新文章

热门文章