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

第十二节：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 属性接受长度值或百分比值，但不允许使用负值。 单边内边距属性（分别设置上、右、下、左内边距）例：h,p,div标签 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