[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*/

}

转载于:https://www.cnblogs.com/cainiaobufei/p/10761065.html

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

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式...
CSS 框模型概述术语翻译 element : 元素. padding : 内边距,也有资料将其翻译为填充. border : 边框. margin : 外边距,也有资料将其翻译为空白或空白边. 在 ...
CSS边框、边距、轮廓（边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移）——万字长文|一文搞懂
目录 CSS边框 CSS 边框属性 CSS 边框样式实例 CSS 边框宽度实例特定边的宽度实例 CSS 边框颜色实例特定边框的颜色实例 HEX 值实例 RGB 值实例 HSL 值实 ...
CSS 框模型元素框处理元素内容、内边距、边框和外边距的方式
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的 ...
CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式
转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http:/ ...
div默认外边距是多少_CSS盒模型之内边距、边框、外边距十九问（持续更新）...
第一问:什么是盒模型? 第二问:两者的区别是什么? 第三问:怎么设置这两种模型呢? 第四问JS怎么获取和设置盒模型的宽高呢,你能想到几种方法第五问:描述一下下面盒子的大小,颜色什么的(content ...
记录--有关CSS盒模型之内边距、边框、外边距的十九问题
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助本篇文章主要探讨盒模型,以及内边距.边框.外边距的面试题与思考,也希望您能把您的思考和遇到的问题以评论的方式补充下,后期,我将会补充到文章 ...
CSS盒模型之内边距、边框、外边距十九问（持续更新）
第一问:什么是盒模型? 第二问:两者的区别是什么? 第三问:怎么设置这两种模型呢? 第四问JS怎么获取和设置盒模型的宽高呢,你能想到几种方法第五问:描述一下下面盒子的大小,颜色什么的(content ...
CSS 框模型( Box module )
框和布局在 KB005: CSS 层叠中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...
【html】盒模型div，边框border，内边距padding，外边距margin
初识盒模型要想学习盒模型,首先要知道什么是盒模型.顾名思义,每个div标签都是一个矩形,像一个盒子,所以HTML页面布局可以理解为多个盒子嵌套排列而成. 盒模型的组成盒模型包括:content(内 ...

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

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

最新文章

热门文章