本文共 3966 字，大约阅读时间需要 13 分钟。
1.文档流
文档流，是指盒子按照HTML标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，每个盒子都占据自己的位置。
2.关于定位
我们可以使用css的position属性来设置元素的定位类型，设置如下：
（1）relative生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
.box01{
background-color: yellow;position: relative;left: 50px;}
（2）absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相当于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
（3）fixed生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
（4）static默认值，没有定位，元素出现在正常的文档流种，相当于取消定位属性或者不设置定位属性。
（5）inherit 从父元素继承position属性的值
3.定位元素的偏移
定位的元素还需要用left，right，top，bottom来设置相对于参照元素的偏移值。
代码
<head>
<meta charset="utf-8"><title>定位例子</title><style type="text/css">.con{ width: 80px; height: 80px; background-color: gold; margin: 50px auto; position: relative; border-radius: 14px;}.box{ width: 28px; height: 28px; background-color: red; text-align: center; line-height: 28px; position: absolute; left: 70px; top: -15px; border-radius: 14px;} </head>
<body>
5
</body>
代码2
<head>
<meta charset="utf-8"><title>定位02</title><style type="text/css">.meun{ width: 800px; height: 100px; position: fixed; /*fixed内容悬浮在浏览器上*/ top: 0px; left: 50%; margin-left: -400px; /*margin: 50px auto;*/ background-color: gold;}p{ text-align: center;}.popup{ width: 500px; height: 300px; background-color: aqua; border: 1px solid #000000; position: fixed; left: 50%; margin-left: -250px; top: 50%; margin-top: -150px; z-index: 100;}.mask{ width: 100%; height: 100%; background-color: #000000; position: fixed; left: 0; top: 0; opacity: 0.5; /*opacity透明度*/ z-index: 98;}.pupcon{ display: block; /*调整display值隐藏或显示弹框*/} </head>
<body>
<div class="meun">菜单</div><div class="pupcon">标题
</body>
4.background属性
是CSS应用较多且重要的一个属性，负责给盒子设置背景图片和背景颜色的，background是一个复合属性，
（1）background-color 设置背景颜色
（2）background-image 设置背景图片地址
（3）background-repeat 设置背景图片如何重复平铺
（4）background-position 设置背景图片的位置
（5）background-attachment 设置背景图片是固定还是随着页面滚动条滚动
body{
background: url("image/夏8.png");background-attachment: fixed;}推荐用法：background：#000 url(bgimage.gif) no-repeat left center fixed
代码
<head>
<meta charset="utf-8"><title>背景图定位</title><style type="text/css">.box,.box01{ width: 120px; height: 160px; border: 1px solid #000; background: url("image/夏8.png"); background-position: -150px -60px; position: absolute;}.box{ left: 100%;}.boxcon{ height: 162px; /*border: 1px solid #000;*/}.boxcon h1{ display: inline-block; position: absolute; left: 50%; margin-left: -80px; font-size: 50px; color: pink;}.box02{ width: 620px; height: 720px; border: 1px solid #000; background: url("image/夏8.png"); background-position: -580px -50px; position: absolute; left: 50%; margin-left: -250px;}body{ margin: 0px;} </head>
<body>
夏目友人帐
</body>
代码2
<head>
<meta charset="utf-8"><title>雪碧图列表</title><style type="text/css">.list{ list-style: none; width: 300px; height: 305px; margin: 50px auto; padding: 0; /*background-color: aqua;*/}.list li{ /*类名越长，权重越高*/ height: 60px; border-bottom: 1px dotted #000; line-height: 60px; /*垂直居中*/ text-indent: 60px; /*首行缩进*/ background: url("/image/序号.png") no-repeat left 3px;}.list .sty02{ /*类的权重值高于标签*/ background-position: 0px -62px;}.list .sty03{ /*类的权重值高于标签*/ background-position: 0px -117px;}.list .sty04{ /*类的权重值高于标签*/ background-position: 0px -182px;}.list .sty05{ /*类的权重值高于标签*/ background-position: 0px -243px;} </head>
<body>
- 美国队长
- 惊奇队长
- 蝙蝠侠
- 海王
- 钢铁侠
</body>
转载于:https://blog.51cto.com/13742773/2334071