前端 定位

 

一 ,相关知识点补充

1,浮动的盒子居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 400px;
            height: 300px;
            background-color: red;
        }
        .main{                               #浮动的盒子外面加一层父盒子
            width: 100px;
            overflow: hidden;                   #在标准文档流下,子父盒子均布浮动,就用 margin:0 auto
            margin: 0 auto;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0 auto;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="main">
            <div class="child">
            
            </div>
        </div>
    </div>
    
</body>
</html>

2, 文本属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            text-decoration: underline;
        }
        div{
            width: 200px;
            height: 240px;
            /*line-height: 200px;*/
            background-color:red;
            /*text-align: right;*/
            /*两端对齐*/
            /*text-align: justify;*/
            /*首行缩进*/
            /*text-indent: 2em;*/
            /*font-size: 14px;*/
            /*text-decoration: inherit;*/
            /*font-weight: 800;*/
            /*font-family: "Microsoft Yahei"*/
            /*font-family: '华文行楷'*/
            font: 12px/240px '华文行楷';    #字体大小  行高   字体样式

        }
        a{
            text-decoration: none;           #取消下划线
        }
        a:hover{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div>
        武小猪武小猪
    </div>
    <a href="#">百度一下</a>
</body>
</html>

3 ,行高,单行,和多行文本居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 40px;
            font-size: 20px;
            background-color: red;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div>国家国家国家国家国家国家国家国家国家国家国家</div>    #如果是英文的话,不会换行,中文一行写不完,就换行
    
</body>
</html>


*************单行文本居中    让line-height=height
*************多行文本居中     先知道 font-size   line-height   raws=几行文字     则  a=height-(line-height*raws)/2    ,padding-top a    ,height=height-a

4 background  

　　1 ,颜色一共有三种表示方法:单词  rgb表示法,  十六进制表示法

　　rgb :红色  绿色 蓝色   每个值的取值范围是 0-255.如果某一项是255,代表此项是纯色rgb(255,255,255)表示白色

　　十六进制表示法:所有#开头的表示颜色的就是十六进制的     

　　#ff0000:红色   ,也是两位两位的看,

　　2, background-color  属性表示背景颜色

　　3, background-img属性表示该元素的背景照片

　　4, background-repeat:表示设置该元素的平铺方式

　　　

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
height:500px;
width:500px;
/*默认说平铺和垂直平铺*/
/*background-image: url(https://img04.sogoucdn.com/v2/thumb/resize/w/120/h/120/ir/3/zi/on/iw/90/ih/90/crop/x/0/y/0/w/120/h/120?t=2&appid=200524&url=http%3A%2F%2Fimg01.sogoucdn.com%2Fapp%2Fa%2F10010016%2F93944261729acb9d03ce394e3699be0c);*/
/*加上background-repeat: no-repeat;,就只显示一个图片*/
/*background-repeat: no-repeat;*/
/*往左移动 值为正*/
/*background-position-x: 20px; */
/*向下移动,值为正*/
/*background-position-y: 20px*/
/*值为负可以用来剪切*/
/*background-position-y: -20px*/
/*设置固定的话,图片不随滚轮滚动变化,不设置的话,会随滚轮变化位置*/
/*background-attachment: fixed;*/

/*下面这一句和最上面的一句作用完全一样,引号可加可不加*/
/*background: url("https://img02.sogoucdn.com/v2/thumb/resize/w/120/h/120/ir/3/zi/on/iw/90/ih/90/crop/x/0/y/0/w/120/h/120?t=2&appid=200524&url=http%3A%2F%2Fimg02.store.sogou.com%2Fapp%2Fa%2F10010016%2F72f53f201c4c88a1e349a44c35ed03c0");*/
/*background-repeat: no-repeat;*/
/*单个图片位于盒子的位置 上 左*/
/*background-position:left top;*/
/*阔以进行缩写 就下面 这一句就设置了盒子颜色 背景图片,不平铺和垂直铺,图片位于盒子的位置*/
background: #ff6700 url("https://img02.sogoucdn.com/v2/thumb/resize/w/120/h/120/ir/3/zi/on/iw/90/ih/90/crop/x/0/y/0/w/120/h/120?t=2&appid=200524&url=http%3A%2F%2Fimg02.store.sogou.com%2Fapp%2Fa%2F10010016%2F72f53f201c4c88a1e349a44c35ed03c0") no-repeat left bottom;
}

#标注红色的是图片下面的背景色

</style>
</head>
<body>
<div class="box1">

</div>

</body>
</html>

background 实例

5,精灵图技术---

6, 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;   将box2 设置成相对定位
            /*在相对定位中可以使用 top left right bottom表示方向*/
            top: 20px;    #向下移动20px,
            left: 100px;  #想做移动100px
            z-index: 5;   #相当于权重的作用但不是权重
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: blue;
            position: relative;
        }
    </style>
</head>
<body>

    <!--  -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

    
</body>
</html>
###由练习得知 1 将一个盒子设置相对定位,并没有,脱离标准文档流.移动之后,还会在老家留下原样的位置,且会覆盖不设置相对定位的盒子.如果,被覆盖的盒子,在下面(如果在上面,即使设置成相对,还是原样)
,也设置相对定位,则会覆盖上一个设置相对定位的盒子
2 z-index:数值,那个盒子设置的值大,谁就覆盖谁

7, 绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;   #设置绝对定位.
            top:40px;
            left:0;
        }
        .box3{
            width: 250px;
            height: 200px;
            background-color: blue;
        
        }
    </style>
</head>
<body style="height: 2000px;">

    <!--  -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

    
</body>
</html>
有上述例子得知:绝对定位脱离了标准文档流,且不再占位置,

8 参考点

参考点：
      相对定位的盒子都是以自己所在位置为参考点
　　　　绝对定位,以屏幕为参考点定位            
      父子盒子之间
　　　 如果父辈盒子设置相对定位。子盒子设置绝对定位，以父辈盒子的0,0为参考点

　　
　　


 9 子绝父相

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 992px;
            height: 460px;
            background-color: red;
            float: right;
            position: relative;
        }
        .prev{
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            position: absolute;
            background-color: #000;
            color: #fff;
            top: 50%;
            left: 0px;


        }
        .next{
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            position: absolute;
            background-color: #000;
            color: #fff;
            top: 50%;
            right: 0;
        }

        /*.box{
            width: 100%;
            height: 120px;
            background: url(http://i1.mifile.cn/a4/cms_15373613801205_jTFBI.jpg)  center  top;
        }*/
    </style>
</head>
<body>
    <!-- <div class="box">
        
    </div> -->
    
        <div class="father">
            <span class="next">></span>
            <span class="prev"><</span>
        </div>
    
</body>
</html>
View Code

10 一些小总结

　　a ,css中有三种方法,脱标:

　　　　浮动   绝对定位  固定定位 

        b,浮动和绝对定位,要想使盒子居中 margin:0 auto都不管用了.

　

 

posted @ 2018-09-20 18:04  团子emma  阅读(445)  评论(0)    收藏  举报