Web前端开发技术项目教程课件 7.1.3知识点2：盒子模型.pptxVIP

CSS核心-盒子模型信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》

前端技术开发知识储备创建层1盒子模型2设置填充3设置边距4

01创建层前端技术开发

01层元素层标记元素语法：div…/div说明：div标记可定义网页文档中的区块或节（division/section），把文档内容分割为独立的、不同的部分，它可以看作是一个包容网页元素的容器。div是一个块级元素，只有前后换行样式，是一个非常“干净”的双标记。

div直接放文本/divdivahref=“index.html”首页/a/divdivid=navulliahref=#target=_blank首页/a/liliahref=#target=_blank机构/a/liliahref=#target=_blank资讯/a/liliahref=#target=_blank调研/a/liliahref=#target=_blank指南/a/li/ul/div01创建层HTML代码：网页效果：div做为容器使用

02盒子模型概念前端技术开发

02盒子模型什么是盒子模型？盒子模型（boxmodel）是CSS的核心知识点之一。网页上的每个元素（标记）都被看成是一个矩形盒子，这个盒子由里往外的顺序为：内容（content）、填充（padding）、边框（border）、边距（margin）这四个要素组成。

03设置填充前端技术开发

03设置填充填充（padding）也称内边距，在盒子模型中用于调整元素内容到边框的距离。设置填充的CSS属性内容属性说明上内边距padding-top长度|百分比，其中，百分比是相对于上级元素宽度width的百分比，随着上级元素width的变化而变化，和高度height无关右内边距padding-right下内边距padding-bottom左内边距 padding-left组合属性内边距 padding取1~4个值。可参考border-style设置

h2{text-align:center;}p{border:5pxsolidgreen;}.b2{ padding:35px10px15px25px}03设置填充CSS代码：网页效果：h2设置填充属性/h2p该段文字内容和边框之间没有设置空白距离/ppclass=b2该段文字内容应用填充复合属性，设置了与边框上右下左之间的空白距离为35像素、10像素、15像素和25像素。/pHTML代码：

04设置边距前端技术开发

04设置边距边距（margin）也称外边距，用于网页元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。内容属性说明上边距margin-top长度|百分比，其中，百分比是相对于上级元素宽度width的百分比，随着上级元素width的变化而变化，和高度height无关。右边距margin-right下边距margin-bottom左边距 margin-left组合属性边距 margin取1~4个值。可参考border-style设置设置边距的CSS属性

04设置边距如果把网页元素看成是一个个盒子，盒子与盒子之间的距离通过设置边距进行控制。img{ margin-left:10px; margin-right:10px;}img{ margin:0px10px;}增加或减少两个元素之间的距离，调整边距增加图片之间距离

04设置边距网页中有些元素自带边距样式，常见的如body元素、p段落元素、h1~h6标题元素，我们通过浏览器的开发工具模式查看body元素的默认样式。右侧样式视图中看到有CSS代码是在“useragentstylesheet”中，即当前浏览器解析body元素时的默认样式。将默认样式清零：*{padding:0;margin:0;}

总结前端技术开发

感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》