CSS盒子模型与浮动分解.ppt

Clear属性—3个属性值，left 清除元素左侧浮动 ，right 清除元素右侧浮动 ,both 清除元素两侧浮动 设置宽度值+溢出属性原理：修复IE浏览器bug，使受到浮动影响的元素获得布局，以此来消除浮动影响 * 横向两列布局的两种实现方式：1.两div均设置左浮动，使用margin设置两者间间距 2.一div设置左浮动，另一div设置右浮动 * CSS盒子模型与定位 主讲教师：李勤实 数字媒体技术系 主要内容 1 2 3 知识回顾 CSS盒子模型 4 CSS网页布局与定位 总结 知识回顾 1 什么是CSS？ CSS（Cascading Style Sheets）：层叠样式表，一种定义样式的语言，用于描述如何格式化和显示网页中的信息。真正的表现与内容完全分离，代码可读性强，样式可重复应用 2 CSS基本语法 CSS规则：选择器 属性1：属性值1; ...;属性n：属性值n; CSS选择器：基本选择器（标签、类和ID） 复合选择器（交集、并集、后代、伪类等等） CSS的盒子模型 为什么叫盒子？ 一切皆为盒子 0 CSS的盒子模型 盒子模型是CSS的基石之一，它指定元素如何显示以及盒子之间的关系。 页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。 网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。 Web标准的核心—内容与表现分离。 CSS的盒子模型 CSS的盒子模型 每个HTML元素都可以看作是一个装了东西的盒子 盒子里面的内容到盒子的边框之间的距离即填充 padding ,盒子本身有边框 border ,而盒子边框外和其它盒子之间，还有边界 magin ,如图所示 默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子 content padding-top padding-bottom padding-left padding-right border-top border-bottom border-right border-left margin-right margin-left margin-top margin-bottom width height CSS的盒子模型 尺寸计算： 盒子模型尺寸 边框+外边距+内边距+盒子中的内容尺寸 一个div的边框为3px，内边距为2px，右外边距为10px，往它的内部插入一张宽度为120px的图片，该div的宽度是多少？ div宽度 2xborder+2xpadding+margin+图片宽度 140px 盒子模型尺寸 #MyBox margin:10px; padding:2px; border:dotted; border-width:3px; border-color:#0F0; width:120px; //内容的宽度 对盒子模型的思考 边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的，我们只能看到他们对元素的影响 盒子模型中只能设置两类颜色，即边框颜色和背景颜色 盒子模型可设置三类距离，即外边界距离margin，内填充距离padding和边框值border CSS中，存在3种的定位机制： 标准文档流（Normal flow） 浮动（Floats） 绝对定位（Absolute positioning） CSS中的定位机制 特点 从上到下，从左到右，输出文档内容 由块级元素和行级元素组成 标准文档流 块元素 从左到右撑满页面，独占一行； 触碰到页面边缘时，会自动换行 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非用width设定宽度； , , , , 和 是块元素的例子。 行级元素 inline 和其他元素都在一行上； 高，行高及顶和底边距不可改变； 宽度就是它的文字或图片的宽度，不可改变； , , , , , 和 是inline元素的例子 ； 块级元素和行级元素都是盒子模型； 标准流下的盒子排列分析 style type text/css * border: 2px dashed #FF0066; padding: 10px; margin: 2px; body border:2px solid blue; a border:2px dotted blue; 网页的banner（块级元素） a href # 行内元素1 a href # 行内2 a href # 行内3 这是无名块 这是盒子中的盒子 标准流下定位的应用 #nav a font-size: 14px; color: #333333;