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

佚名 6年前 (2019-04-24) 随笔 663人围观抢沙发百度已收录

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

实际占有的宽 = 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> <html lang="en"> <head> 　　<meta charset="UTF-8"> 　　<meta name="viewport" content="width=device-width, initial-scale=1.0"> 　　<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="11.css"> </head> <body> 　　<div id="d0">d0</div> 　　<div id="d1">d1</div> 　　<div id="d2">d2</div> 　　<div id="d3">d3</div> 　　<div id="d4">d4</div> 　　<div id="d5">d5</div> 　　<div id="d6">d6</div> </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*/ }