DAY04--07.27

1、,css,课程,主讲人：徐瑶萍,04,css背景属性,CSS(Cascading Style Sheets) 层叠样式表，css又叫级联样式表，简称样式表,背景色background-color:,background-color : 属性用于为元素设置背景色 接受任何合法的颜色值 可取值为 transparent（默认值为透明） 为元素背景设置一种纯色 会填充元素的内容，内边距和边框区域 如果边框有透明色部分，会透过这些透明部分显示出背景色 div width: 200px; height: 100px; border: 3px dashed darkred; background: #cc

2、c;,背景图片 background-image,默认值是 none 表示背景上没有放置任何图像 如果需要设置一个背景图像，需要用起始字母 url 附带 - 一个图像的 url 值 - 可以是相对 url 或者绝对url body background-image : url(image/bg.gif); ,背景图片 background-repeat,默认情况下，背景图像在水平和垂直方向上重复出现（平铺）创建一个称为“墙纸”的效果 可以使用background-repeat 属性控制背景图像的平铺效果 background-repeat 可取值为 - repeat 在垂直方向和水平方向重复，

3、为默认值 - repeat-x 仅在水平方向重复 - repeat-y 仅在垂直方向重复 - no-repeat 仅显示一次,背景图片 background-repeat（续1）,div width: 200px; height: 100px; background-image:url(bg.jpg) ; background-repeat: repeat-x; 创建渐变色的背景效果,背景图片尺寸 background-size,规定背景图像的尺寸，可取值为 - value1 value2 宽度 高度 - value1% value2% 百分比 - cover 把背景图像扩展至足够大，以使背景

4、图像完全覆盖背景区域，图片的某些部分也许无法显示 - contain 把背景图像扩展最大尺寸，以使其宽度和高度完全适应内容区域,背景图片尺寸 background-size（续1）,div width: 200px; height: 100px; border:1px solid black; background-image : url(flower.jpg) ; background-repeat: no-repeat;,背景图片尺寸 background-size（续2）,background-size:100px 50px ; background-size:50% ;,backgro

5、und-size:cover ; background-size:contain ;,background-size的cover和contain的区别,cover的效果：图片同比缩放、塞满整个容器，而图片多余的部分则被剪掉了； contain的效果：图片同比缩放至图片能完全显示在容器中，故容器有留白。,背景定位background-position:,background-position：属性改变图像在背景中的位置 该属性取值为下图：,背景定位background-position（续1),背景定位background-position（续2）,样式表中 p background-image

6、: url(“xiaohua.jpg”);background-position: center; background-repeat: no-repeat; height:100px; border:1px dashed #ddd; html文档中 这是一朵风信子,背景属性background,background 属性在一个声明中设置所有背景属性 语法结构是： - background: color url(图像URL) repeat attachment position 注意：如果不设置其中的某个值，将使用默认值 body background：url (“ image/bg.jpg”

7、) no-repeat fixed left top; background-attachment :定义背景图片随滚动轴的移动方式 取值: scroll | fixed | inherit scroll: 随着页面的滚动轴背景图片将移动 fixed: 随着页面的滚动轴背景图片不会移动 inherit: 继承初始值: scroll,课后练习,创建如下图所示的页面。,创建如下图所示的页面。,创建如下图所示的页面,创建如下图所示的页面,03,css浮动定位,CSS(Cascading Style Sheets) 层叠样式表，css又叫级联样式表，简称样式表,浮动概述,浮动定位是指 - 将元素排除在

8、普通流之外，即元素将脱离标准文档流 - 元素将不在页面占用空间 - 将浮动元素放置在包含框的左边或者右边 - 浮动元素依旧位于包含框之内 浮动元素表现的特性 1. margin不会出现重叠现象 2. 没有高度,浮动定位规则,1、浮动元素的左边界不能超出包含块的左边界 2、浮动元素互相不重叠。 2、左浮动元素的左边界必须是原文档中之前出现的左浮动元素的右边界，除非浮动元素顶端在先出现浮动元素的底端下面。 3、浮动元素的顶端不能比父元素的顶端更高。 4、浮动元素不能比之前所有浮动元素或块级元素顶端更高。 5、浮动元素必须尽可能的高的放置。 6、左浮动元素必须向左尽可能远。,浮动定位（续1）,包含框

9、中有三个元素框，如果把框1向右浮动，则它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘,浮动定位（续2）,如果把所有三个框都向左浮动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框，三个框同一行上显示 在需要设置多个块级元素同行排列的情况下非常有用,浮动定位（续3）,如果包含框太窄，那么其它浮动块会自动向下移动，直到有足够的空间 如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡在”,浮动定位（续4）,浮动元素的外边缘不会超过其父元素的内边缘 浮动元素不会互相重叠 浮动元素不会上下浮动,float 属性,如果需要设置框浮动在包含框的左边或者右边

10、，可以通过float 属性来实现 float 属性定义元素在哪个方向浮动 - 在CSS 中，任何元素都可以浮动 - float ：none/left/right 样式表中 div border:1px solid #000; width:100px;height:80px; float:left;,clear 属性,clear 属性用于清除浮动所带来的影响 clear : none/left/right/both; - 定义了元素的哪边上不允许出现浮动元素 div textp text 清除浮动带来的影响 div textp text,浮动引发的问题及解决方案,问题：浮动可能会导致父元素高度塌

11、陷 解决方法： 1、父元素添加清除浮动的子元素 2、父元素overflow：hidden 3、利用伪元素清除浮动,float 与overflow,包含框内的元素被应用了float 之后，包含框的高度会发生变化 样式表中 div.parent width:150px;border:1px solid #000; overflow:hidden;div.parent div border:1px solid red; background: #fdedd2; float:left; width:50px;height:50px;,Html文档 son son,05,css溢出控制,CSS(Casc

12、ading Style Sheets) 层叠样式表，css又叫级联样式表，简称样式表,溢出,使用尺寸属性控制框的大小时，如果内容所需的空间大于框本身的空间，会导致内容溢出 - overflow : 当内容溢出元素框时如何处理 - visible - hidden - scroll - auto - overflow-y - overflow-x,溢出（续1）,divwidth:130px;height:50px;border:1px solid #ddd; div.hiddenoverflow: hidden div.scrolloverflow: scroll div.autooverflow: auto If you would hit the mark, you must aim a little above it.Every arrow that flies feels the attraction of earth. Henry Wadsworth Longfellow. ,溢出（续2）,文本内容超出尺寸，隐藏文本不显示 If you 总显示滚动条 If you 不超出不显示，文本内容超出尺寸，则显示滚动条 If yo