CSS浮动的正式版

CSS浮动效果设计 l 标准流、文档流、脱标流等技术术语 l 学习边框、轮廓等块级元素设置，盒子模型 课程目标 l 浮动的设置、浮动的特点 l 使用浮动技术进行特效制作 课程安排 块级和行级元素区别、div的作用、调整div大 小、背景、换行、滚动条设置 div 盒子模型概念、用途、设置盒子的间距盒子模型 浮动的重要作用、包裹和崩塌、特效制作、清 除浮动 浮动 块级元素和行级元素的相互转换块、行转换 DIV简介 l 什么是DIV DIV是层叠样式表中的定位技术，全称DIVision 有时把div称为图层，更多时候称为“块” DIV样式设置 l div大小、背景设置 l div溢出效果演示、换行、滚动条显示 l div边框、轮廓设置 l 盒子模型 DIV设置大小、位置、背景 DIV溢出处理效果 l 超出div宽度高度的文字或图片进行隐藏处理 l 超出div宽度高度的文字或图片增加滚动条 overflow属性设置 属性作用 1visible默认值。内容不会被修剪，会呈现在元素框之外。 2hidden超出的部分被隐藏。 3scroll不论是否需要，都显示滚动条。 4auto按需显示滚动条以便查看其余的内容。 outline 作用 绘制于元素周围的一条线，位于边框边缘的外围， 可起到突出元素的作用 示例outline: dashed;/*虚线轮廓*/ 小贴士还有：dotted(点状轮廓) solid(实线) double(双线)等 border-left、border-right、border-top、border-bottom 作用 设置div边框的边线宽度、颜色、虚线、实线等样 式css属性 示例border-bottom:solid;/*设置下边框为实线*/ 小贴士 还有：none (无边框) 、 double(双线边框)等 制作只有下边框的文本框 示例 盒子模型 width、height、border、margin、padding 作用 在进行页面布局时，盒子模型非常重要 示例 margin:10px 10px 10px 10px; padding:10px 10px 10px 10px; padding margin 盒子模型 box-sizingpadding的距离由哪里产生 属性值1 content-box：在宽度和高度之外绘制元素的内边 距和边框 属性值2 border-box：已设定的宽度和高度分别减去边框 和内边距才能得到内容的宽度和高度 1、将文字居中 2、将对象居中 文字居中 就是让自己容器中的元素居中，常作用于文本 或图片等内联元素。 对象居中 就是让容器中的自己居中，常作用于块元素， 且需要配合宽度使用。 编码实现盒子模型效果 Next：浮动 行内元素和其他行内元素都会在一条水平线 上排列，都是在同一行的 a标签、label、img、span等 行级元素 块级元素在默认情况下，会独占一行 div 、h标签、li、table等 块级元素 (标准)文档流、 脱标流(float、 position:absolute) 空白折叠现象 高矮不齐,底边对齐 自动换行，一行写满，换行写 文档流特点 float属性设置 属性作用 1left元素向左浮动。 2right元素向右浮动。 3none默认值。元素不浮动。 编码实现效果 Next：float初衷？包裹？崩溃？ Next：float清除浮动 为什么清除浮动 l 为了父元素不会出现“高度崩塌” l 如果强制规定外层容器的尺寸，则显得就不 那么灵活了，高度就不能自动适应了 l 从某个元素开始，不在需要浮动效果了 CSS浮动学习结束 CSS定位即将开始