web考试内容1
background-attachment：定义背景图片随滚动轴的移动方式
| 属性值 | 描述 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
background-repeat：设置是否及如何重复背景图像（默认背景图像在水平和垂直方向上重复）
| 属性值 | 描述 |
|---|---|
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。 |
| no-repeat | 背景图像将仅显示一次。 |
| inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
background-size：规定背景图像的尺寸
| 属性值 | 描述 |
|---|---|
| length |
设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 |
| percentage |
以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 |
| cover |
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
flex-direction：决定主轴的方向（即项目的排列方向）
属性值
- row（默认值）：主轴为水平方向，起点在左端
- row-reverse:主轴为水平方向，起点在右端
- column:主轴为垂直方向，起点在上沿
- column-reverse:主轴为垂直方向，起点在下沿
以上菜鸟皆有
栗子：
要求：弹性布局设置
设置页面背景图片自动适应屏幕大小。
body { background-image: url("img/timg2.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }
设置3列DIV水平弹性布局效果，宽度比例为1：2：1。
.div1, .div3 { flex: 1; position: relative; } .div2 { flex: 2; display: flex; //中间的3个div flex-direction: column; position: relative; }
中间一列添加3个DIV垂直方向显示，为这3个DIV添加阴影效果。
.div21,.div23{ flex: 1; border: 2px solid white; height: 50px; } .div22 { flex: 2; position: relative; border: 2px solid white; text-align: center; height: 50px; }
当浏览器窗口宽度改变时，按比例自动调整布局宽度。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background-image: url("img/a1.jpg");
/*background-position: center;*/
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.bigdiv {
display: flex;
height: 800px;
width: 100%;
border: 2px solid white;
}
.div1,
.div3 {
flex: 1;
position: relative;
/*text-align: center;*/
/*background-color: yellow;*/
}
.div2 {
flex: 2;
display: flex;
flex-direction: column;
position: relative;
/*text-align: center;*/
/*background-color: #CCCCCC;*/
}
.div21,.div23{
flex: 1;
border: 2px solid white;
height: 50px;
}
.div22 {
flex: 2;
position: relative;
border: 2px solid white;
text-align: center;
height: 50px;
}
</style>
</head>
<body>
<div class="bigdiv">
<div class="div1"></div>
<div class="div2">
<div class="div21"></div>
<div class="div22"></div>
<div class="div23"></div>
</div>
<div class="div3"></div>
</div>
</body>
</html>
