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《前端技术开发》