css重点

单行文本垂直居中（按钮）方法：

1.容器高度height等于行间距line-height 、

2. 加padding

首行缩进text-indent

text-decoration

cursor

a:hover{鼠标进入目标后执行。。。}

行级元素

特点：内容决定元素所占位置，不可以通过css改变宽高

如：<span><a><strong><em><del>

块级元素

特点：独占一行，可以通过css改变宽高

如：<div><p><ul><li><ol><h1>-<h6><form><address>

行级块元素<img>

display可切换 block、inline、inline-block

margin: -8px;浏览器默认外边距8像素

层模型：

绝对定位元素：脱离原来位置进行定位，脱离原层跑上层，变透明；最近的有定位的父级进行定位（子绝父相），如果没有，那么相对于文档进行定位。

相对定位元素：保留原来位置进行定位，跑上层，但是位置不留给其他元素；保留自己原来的位置进行定位

例：

<style>



    .wrapper{

        /*position: relative;*/

        margin-left: 100px;

        width: 200px;

        height: 200px;

        background-color: orange;

    }

    .content{

        /*position: relative;*/

        margin-left: 100px;

        width: 100px;

        height: 100px;

        background-color: green;

    }

    .box{

        position: absolute;

        left: 50px;

        width: 50px;

        height: 50px;

        background-color: yellow;

    }



    .

</style>

<body>

<div class="wrapper">

    <div class="content">

        <div class="box">

        </div>

    </div>

</div>

</body>

盒模型:padding margin border content

层模型：绝对定位相对定位固定定位

两栏布局：并排div，用margin-right

※嵌套父子div 垂直方向margin是绑定一起的取margin最大值进行移动

bfc:block format context块级格式化上下文

如何触发盒子的bfc：

position:absolute
display:inline-block;
float:left/right;
overflow:hidden;

改变渲染规则，解决塌陷问题

例：

.wrapper{

    margin-left: 100px;

    margin-top: 100px;

     100px;

    height: 100px;

    background-color: black;
/* float: left;*/

   /* position: absolute;*/

   /* display: inline-block;*/6662266

    /*overflow: hidden;*/

}

.content{

    margin-left: 50px;

    margin-top: 150px;

     50px;

    height: 50px;

    background-color: green;

}

*凡是position:absolute 或者float:left/right 系统内部自动把元素转换成inline-block;,若无设置宽高，宽高由内容决定。：

<span>123</span>

span{
    position: absolute;//float: left;
     100px;
    height: 100px;
    background-color: red;
}

清除浮动流

.wrapper::after{
        content: "";//加入后伪元素才可生效
        clear: both;//清除浮动流
        display: block;//必须是块级元素才能清除浮动流
    }
    .wrapper{
        border: 1px solid black;
    }
    .content{
        float: left;
         100px;
        height: 100px;
        background-color:green;
    }
</style>
<body>
<div class="wrapper">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
</div>