Arry精英战队 - 第十二节：Div盒子模型 - Arry老师

Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,第十二节：Div盒子模型,盒子模型概念 , 盒子示意图示 , 边框(Border) , 轮廓,Arry老师,CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式,元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景,内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。,css盒子模型的概念,概述：,内边距、边框和外边距都是可选的，默认值是零；,margin 和 padding 设置为零来覆盖所有浏览器样式，解决浏览器兼容性 ;,* margin: 0; padding: 0; ,3.在 CSS 中，width 和 height 指的是内容区域的宽度和高度 ;,4.增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸 ;,.box ,width: 70px;,margin: 10px;,padding: 5px 5px;,5.padding : 内边距，也有称为填充,6.border : 边框 ;,7.margin : 外边距，也有称为空白或空白边 ;,内边距、边框和外边距,CSS padding 属性,CCSS padding 属性定义元素的内边距（边框和内容区之间）;,padding 属性接受长度值或百分比值，但不允许使用负值。,单边内边距属性（分别设置上、右、下、左内边距）,CSS 内边距 padding,css边框概括,三方面： 宽度、样式，以及颜色,border,border-style,border-width,border-color,border-bottom,border-left,border-right,border-top,border: 1px solid red;,css边框,CSS margin 属性,CSS margin 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的,“,空白,”,;,margin 属性接受任何长度单位、百分数值甚至负值。,CSS 外边距 margin,外边距合并,当两个垂直外边距相遇时，它们将形成一个外边距。,合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者,CSS 外边距合并,