css

如何让浮动的盒子居中:

1 给浮动的盒子设置一个父盒子,大小与浮动盒子一致

2 给父盒子设置overflow:hidden,margin:0 auto;

3 给该盒子设置margin:0 auto;

文字相关操作:

font:12px/240px '华文行楷'

设置整体文字:字体大小12px/文字行高240px 文字风格华文行楷

1 文字水平居中: text-align:center;

2 文字垂直居中: 行高(inline-heigth)=盒子的高度

3多行文本居中: 前提:行高一定要大于字体的大小(字体大小默认12px),不然上下文之间会挨紧在一起

1 假如一个300px*300px的盒子,盒子中一共有5行文字,细看一下行高 line-heigth:30px,那么总的行高就为30px*5 =150px


2 ( 盒子的高度-150px)/2,那么设置盒子的padding-top:75px,同时为了保证盒子的高度为300px,那么将盒子的高度就改为225px.

3设置文字大小: font-size:Xpx;

4首行缩进: text-ident:2em; 锁紧两字符

脱离标准文档流:3种方法

标准文档流是什么? 说白了就是css默认的一种状态.文档流是指元素排版布局过程中,元素会自动从左往右,从上往下的流式排着,最终显示的时候也是自上而下的分成行或者块,并在每行中从左往右的顺序排放元素.

脱标方法: 1 浮动 float

2 绝对定位

3 固定定位

定位操作:

默认: position:static; 静态定位

position:relative; 相对定位

position:absolute; 绝对定位

position:fixed; 固定定位

　　relation:相对定位:

如果仅仅设置标准文档流的盒子为相对定位,那么跟普通的盒子没有任何区别,不脱标

 <style>
        *{
            padding:0;
            margin:0;
        }
        .box1{
            200px;
            height: 200px;
            background-color: #fdb;
        }
        .box2{
             200px;
            height: 220px;
            background-color: #edf;
            position: relative;
            top: 30px;
            left: 50px;
            z-index: 1;
        }
        .box3{
             200px;
            height: 230px;
            background-color: #efc;
        }
    </style>
</head>
<body>
    <div class="box1">第一个孩子</div>
    <div class="box2">第二个孩子</div>
    <div class="box3">第三个孩子</div>
</body>

相对定位

作用:1层级提高做压盖 (z-index),不建议使用

　　　2 布局方案父相子绝的参考

　　absolute:绝对定位

1脱标不占位置 2层级提高

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
             200px;
            height: 200px;
            background-color: red;
        }
        .box2{
             200px;
            height: 200px;
            background-color: green;
            position: absolute;
            top:40px;
            left:0;
        }
        .box3{
             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>

绝对位置

　　父相子绝:

父子盒子之间如果父辈盒子设置相对定位。子盒子设置绝对定位，以父辈盒子的0,0为参考点

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
             992px;
            height: 460px;
            background-color: red;
            float: right;
            position: relative;
        }
        .prev{
             50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            position: absolute;
            background-color: #000;
            color: #fff;
            top: 50%;
            left: 0px;


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

    </style>
</head>
<body>
    
        <div class="father">
            <span class="next">></span>
            <span class="prev"><</span>
        </div>
    
</body>

父相子绝实例

z-index的使用:

   1、z-index 值表示谁压着谁，数值大的压盖住数值小的，
   2、只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
   3、z-index值没有单位，就是一个正整数，默认的z-index值为0，如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
   4、从父现象：父亲怂了，儿子再牛逼也没用