day 40 文本属性 常用css属性 定位

 

一. 浮动的特性

　　1.浮动的元素脱标

　　2.浮动的元素互相贴靠

　　3.浮动的元素由"字围"效果

　　4.收缩的效果

    前提是标准文档流，margin的垂直方向会出现塌陷问题。
    
    如果盒子居中：margin: 0 auto;如果盒子浮动了，margin: 0 auto;就不起任何作用
    
    需求：让浮动的盒子居中
        给浮动盒子，加一个父盒子，设置宽度跟浮动盒子一样大小，并且overflow:hidden; 设置该盒子margin: 0 auto;
            .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;
            }
    文本水平居中：text-align:center; 
    文本垂直居中：行高=盒子的高度
    
    盒子如果浮动了，那么垂直方向上不会出现塌陷问题。
    
    
 css中有三种方式让盒子'脱表'
    1.浮动float
    2.绝对定位
    3.固定定位

 

二、常用css的属性

    中心对齐
        text-align: center;
    两端对齐
        text-align: justify;
    首行缩进
        text-indent: 2em;  em代表1个字
    字体大小
        font-size: 14px;
    修饰文本
        text-decoration
            none;没有线
            underline;有下划线
    文本的行高
　　　　line-height:
    
        设置文本居中的方式
            单行文本垂直居中： line-height =  height
            
            多行文本居中：
                行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。
                    第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px
                    第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;
            
    ff:
        15*16+15 255
　　background-repeat:no-repeat
　　　　背景图片将仅设置显示一次

3.background-image
精灵图技术

四、定位

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