css定位篇

1.浮动的特性：

　　1.浮动的元素脱标

　　2.浮动的元素互相贴靠

　　3.浮动的元素有“字围”效果

　　4.收缩的效果

　　前提是标准文档流，margin的垂直方向会出现塌陷问题。

　　如果盒子居中：margin：0 auto；如果盒子浮动了，margin：0 auto；就不起作用了

　　需求：让浮动的盒子居中

　　　　　　给浮动的盒子，加一个父盒子，设置宽度和浮动盒子一样，并且overflow：hidden；设置该盒子margin：0 auto；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 400px;
            height: 300px;
            background-color: red;
        }
        .main{
            width: 100px;
            overflow: hidden;
            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>
View Code

文本水平居text-align：center；

文本垂直居中：行高=盒子的高度

text-indent:2em; 首行缩进两个字符

font-weight:800;字体粗细（100-900）

font-family：“华文行楷”

font：12px/240px "华文行楷"

盒子如果浮动了，那么垂直方向上不会出现塌陷问题

css中有三种方式让盒子“脱标”

　　1.浮动float

　　2.绝对定位

　　3.固定定位

一些知识点

backkground-image：精灵图技术

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 24px;
            height: 35px;
            background: url(https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png);
            /*图片默认水平平铺，垂直平铺，这样就不平铺了*/
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position-x:0;
            background-position-y: -162px;
            /*固定定位*/
            /*background-attachment: fixed;*/
            background: url(https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png) no-repeat 0 -162px;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>
View Code

2.定位

默认：position:static; 静态定位
            
                position: relative; 相对定位
                          absolute;绝对定位
                          fixed;固定定位
                          
                          
            - ralative:
                如果仅仅设置标准文档流的盒子为相对定位，那么跟普通的盒子没有任何区别
                不脱标
                参考点：
                    相对于原来的位置
                
                形影分离
                
                
                作用：
                    1.层级提高，做压盖（不建议）
                    2.布局方案 "子绝父相"的参考
                    
            - absolute
                
                1.脱标：不占位置 
                2.层级提高
                
            
            参考点：
                单个盒子
                如果以top描述，是以页面的左上角为参考点（跟浏览器的左上角区分）
                
                如果以bottom描述，是以浏览器的左下角为参考点
                
                
                父子盒子之间
                
                如果父辈盒子设置相对定位。子盒子设置绝对定位，以父辈盒子的0,0为参考点
懒得打字

 

posted @ 2018-09-20 18:45  被嫌弃的胖子  阅读(167)  评论(0)    收藏  举报