css重點

阿新 • • 發佈：2020-07-15

單行文字垂直居中（按鈕）方法：

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;

    width: 100px;

    height: 100px;

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

   /* position: absolute;*/

   /* display: inline-block;*/6662266

    /*overflow: hidden;*/

}

.content{

    margin-left: 50px;

    margin-top: 150px;

    width: 50px;

    height: 50px;

    background-color: green;

}

*凡是position:absolute 或者float:left/right 系統內部自動把元素轉換成inline-block;,若無設定寬高，寬高由內容決定。：

<span>123</span>

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

清除浮動流

.wrapper::after{
        content: "";//加入後偽元素才可生效
        clear: both;//清除浮動流
        display: block;//必須是塊級元素才能清除浮動流
    }
    .wrapper{
        border: 1px solid black;
    }
    .content{
        float: left;
        width: 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>