- 1、本文档共12页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
Div+Css网页布局第三课DIV+CSS网页布局
主讲:张鹏邮箱:seo100@126.com
目标
网页元素分类
CSS盒子模型
常见的DIV+CSS布局方式
什么是div
一、 div是什么
div是一个容器,能够放置内容,例如:div内容/div
说明:XHTML页面中的每一个标签对象几乎都可以称得上是一个容器,例如:h1这是一段标题/h1
div是XHTML中指定的,专门用于布局设计的容器对象。CSS布局中,div是这种布局的核心对象,做一个简单的布局只需要两样东西div与CSS
因此也有人称CSS布局为div+css布局。
CSS盒子模型
W3C组织建议把所有网页上的对像都放在一个盒(box)中,-----盒子模型
设计师可以通过创建定义来控制这个盒子的属性,这些对像包括段落、列表、标题、图片以及层div。
盒模型主要定义四个区域:内容(content)、填充(padding)、边框(border)和边界(margin)。
这里的边界我们也称之为:外边距、外补丁;填充也叫:内边距、内补丁
整个盒模型在页面中所占的宽度是由
左边界+左边框+左填充+内容+右填充+右边框+右边界组成
CSS盒子模型
CSS盒子模型
由“盒子”堆出来的网页版面
CSS中元素的分类
元素分类:不同的元素在文档类型定义DTD(Document Type Definition)内有默认的分类,可以通过CSS修改分类的定义。
1、块级元素:{display:block}
每个块级元素都从一个新行开始,而且其后的元素也需另起一行开始,如:div[层]、标题、段落、表格、body等。
块级元素只能作为其他块级元素的子元素,而且需要一定的条件。
2、内联[内嵌]元素:{display:inline}
内联[内嵌]元素不需要在新行内显示,而且也不强迫其后的元素换行,如:a、em、span等。
内联元素可以为任何元素的子元素。
3、隐藏元素{display:none}
当某个元素被设置为display:none的时候,浏览器会完全忽略掉这个元素,此元素将不会被显示,虽然存在于HTML文档内,
但是屏幕上不会被显示出来,也不会占据位置。
浮动float
什么是浮动?
浮动(float)是CSS实现布局的一种方式,包括div在内的任何元素都可以以浮动的方式进行显示。
值:
none:不浮动
left:对象向左浮动,而右侧的内容流向对象的右侧
right:对象向右浮动,而左侧的内容流向对象的左侧
深入布局技巧
浮动的清理(clear):清理是浮动的另一个有用的工具,实现拒绝浮动对象对后面对象的影响。
技巧:当浮动了许多元素之后,突然需要另起一行时,可以制作一个空白的div标签,为其设置 clear:both;清除左右的浮动。
深入布局技巧
CSS 中溢出的使用
功能
语法
设置当对象的内容超过其指定高度及宽度时如何管理内容
overflow: visible[默认值。不剪切内容也不添加滚动条] , auto[在必需时对象内容才会被裁切或显示滚动条], hidden[不显示超过对象尺寸的内容],scroll[总是显示滚动条]
定位:position
属性:position
描述:设置对象的定位方式
值:
static 静态定位:页面中的每一个对象的默认值。
absolute 绝对定位:将对象从文档流中分离出来,通过设置left,right,top,bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。
relative 相对定位:对象不从文档流中分离,通过设置left,right,top,bottom四个方向相对于自身位置进行相对定位。
您可能关注的文档
最近下载
- 摩托罗拉XiR_M3688_ServerManual维修手册.pdf VIP
- 奥西替尼杂质研究总结.pdf VIP
- 2024《格兰仕电器公司成本管理问题调查研究》8600字.docx VIP
- 中小学英语教师语音语调训练.ppt
- 《严格规范涉企行政检查》知识培训.pptx VIP
- MODS(多器官功能障碍综合征).ppt VIP
- 高中政治统编版必修一:(综合探究二)方向决定道路 道路决定命运.pptx
- VW75210-2 2011 (LV216-2) CN-电动汽车的高压屏蔽电缆要求和试验.pdf VIP
- 2022版小学《体育与健康课程标准》考试复习题库资料(含答案).pdf VIP
- 人工智能在邮政业的应用前景.pptx VIP
文档评论(0)