发表于： 2019-09-28 19:51:23
1 846
遇到问题:父元素高度塌陷
解决:微幅元素设置bfc
原因:子元素浮动属性
思考:相对定位只是配合绝对定位,不能捕捉所有的脱离文档流元素;
高度塌陷,仅仅是高度塌陷,并不是脱离父元素,子元素还会继承父元素的其他属性
遇到问题:插入图片,无法根据父元素自适应改变大小,宽度设置100%,:显示背景重复
解决:设置background-repeat:no-repeat;属性,禁止背景重复
遇到问题:显示原尺寸大小,紧贴父元素左侧
解决:设置背景尺寸填充background-size: 100%;
遇到问题:受到高度局限,只能显示一部分,
解决:高度取消固定值,设置100%
图片会根据父元素自适应大小,来改变自己的大小
background-size 属性
指定背景图像的大小
标签定义及使用说明
background-size属性指定背景图片大小。
默认值: auto
继承: no
版本: CSS3
语法
background-size: length|percentage|cover|contain;
值 | 描述 |
length | 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动) |
percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)" |
cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
延伸background-image属性
CSS3中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
可以给不同的图片设置多个不同的属性
允许在元素上添加多个背景图像
background-size 属性
background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
实例 1
重置背景图像：
实例 2
伸展背景图像完全填充内容区域：
CSS3的background-Origin属性
background-Origin属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
div
{
border:1px solid black;
padding:35px;
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
}/*边框样式*/
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
：hover选择器
定义和用法
：悬停在鼠标移到链接上时添加的特殊样式。
提示：： hover选择器器可用于所有元素，既是链接。
提示：： 链接选择器设置了未访问过的页面链接样式，：访问的选择器设置访问过的页面链接的样式 ：主动选择器设置当您点击链接时的样式。
注意：为了产生预期的效果，在CSS定义中，：hover必须位于：link和：visited之后！！
注意：在IE中必须声明<！DOCTYPE>才能保证：hover选择器能够有效。
<style>
a:link {color:green;}
a:visited {color:green;}
a:hover {color:red;}
a:active {color:yellow;}
</style>
CSS有几个不同的单位用来表示长度。
一些设置CSS长度的属性有width，margin，padding，font-size，border-width等。
长度有一个数字和单位组成如10px，2em，等。
数字与单位之间不能出现空格。如果长度增量0，则可以省略单位。
对于一些CSS属性，长度可以是负数。
有两种类型的长度单位：相对和绝对。
相对长度
相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。
绝对长度
绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器，分辨率，操作系统等）。
返回列表
评论