文档流
文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。
关于定位
我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下:
- relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移。
- absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素(一般设置为相对的)来进行定位,如果找不到,则相对于body元素进行定位。
先找到上一个父级元素进行定位,如果父级元素如果没有position(设置绝对或者相对都可以),那么就相对于再上一个层级定位。比如body之类的都是有默认定位的。
!!相对位置可以为负值。 - fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。
- static 默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性。
定位元素层级
定位元素是浮动的正常的文档流之上的,可以用z-index属性来设置元素的层级。后面跟的是一个数字,数字越大层级越大。
小技巧
设定圆角和圆
- 层级样式:设置圆角和圆,如果圆的半径为宽度的一半,那么就会变成一个圆。
/* 设置元素圆角,将元素四个角设置4px半径的圆角 */
border-radius:4px;
固定元素居中
- 让固定元素居中,这样就是浮动在上面的弹窗。
让顶条凑够页面50%开始显示,然后再往回走长条宽度的一半。
/* 设定固定定位元素 自动转换为固定块元素*/
position: fixed;
width: 960px;
top: 0;
/* 定位元素用margin: auto;是不起作用的 */
left: 50%;
margin-left: -480px;
设置透明度
- 制作弹窗技巧:
写弹窗,放置在页面中间,设置层级最顶。
写背景,设置全黑,设定透明度,设置层级为弹窗-1。
.popup{
width: 500px;
height: 300px;
border: 1px solid black;
background-color: white;
color: white;
position: fixed;
left: 50%;
margin-left: -251px;
top: 50%;
margin-top: -151px;
z-index: 9999;
}
.popup h2{
background-color: gold;
margin: 10px;
height: 40px;
}
/* 制作暗下去的效果 */
.mask{
background-color: black;
width: 100%;
height: 100%;
position:fixed;
left: 0;
top: 0;
opacity: 0.1;
z-index: 9998;
}
</div>
<div class="popup">
<h2>弹框标题</h2>
</div>
<div class="mask"></div>
background 属性
- background-color 设置背景颜色
- background-image 设置背景图片地址
background-image: url(../../images/1.jpg);
- background-repeat设置背景图片如何重复平铺
/* repeat-x:平铺x轴方向;
repeat-y:平铺y方向;
no-repeat:不平铺;
repeat:缺省值,平铺所有的; */
background-repeat: no-repeat;
- background-position 设置背景图片的位置
background-position: right center;
background-position: 10px 10px;
- background-attachment设置背景图片是固定还是随着页面滚动条滚动
这个属性用的不是很多
可以合并来写:
实际应用中,我们可以用background属性将上面所有的设置项放在一起,而且也建议这么做,这样做性能更高,而且兼容性更好,比如:“background: #00FF00 url(bgimage.gif) no-repeat left center fixed
”,这里面的“#00ff00
”是设置background-color
;“url(bgimage.gif)
”是设置background-image
;“no-repeat
”是设置background-repeat
;“left center”
是设置background-position
;“fixed
”是设置background-attachment
,各个设置项用空格隔开,有的设置项不写也是可以的,它会使用默认值。