web基礎2

02-display屬性–元素互相轉換
代碼


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        /*<!--通常會去掉標籤自帶的內外邊距, *表示所有標籤-->*/
        *{margin: 0;padding: 0}

        .box01{
            width: 100px;
            height: 100px;
            border: 1px solid red;

            /*1. 把div轉爲行內塊*/
            display: inline-block;

            /*轉爲行內元素*/
            /*display: inline;*/

            font-size: 16px;
        }

        /*2. 把span轉爲行內塊*/
        span{

            /*轉爲行內塊*/
            display: inline-block;

            /*轉爲塊元素*/
            /*display: block;*/

            /*隱藏*/
            /*display: none;*/


            width: 100px;
            height: 100px;
            border: 1px solid red;

            font-size: 16px;
        }

        .box{
            /*font-size: 0;*/
            letter-spacing: 0;
        }





    </style>

</head>
<body>

<div class="box">


<!--解決行內塊,外邊距去不掉問題-->
<!--由換行符引起的,把換行符變成了空格-->
<!--解決方式一:不換行-->
<!--解決方式一:把父元素字體大小設爲0,子元素重新設置字體大小-->
<div class="box01">1111</div>
<span>2222</span>

</div>



</body>
</html>

運行結果
在這裏插入圖片描述
03-標籤轉換–佈局練習


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音樂網站</title>

    <style>
        *{
            margin: 0;padding: 0;
            /*去掉li標籤樣式*/
            list-style: none;
        }

        ul{
            width: 400px;
            border: 1px solid red;

            /*去掉行內塊之間的空格*/
            font-size: 0;

            /*利用外邊距margin,實現水平居中,並且窗口縮放,任然居中*/
            margin: 0px auto;

        }

        ul>li{
            width: 100px;
            height: 50px;
            border: 1px solid red;

            /*轉爲行內塊*/
            display: inline-block;

            font-size: 16px;

            /*保證盒子大小,不受邊框和padding影響*/
            box-sizing: border-box;

            /*設置行高等於父元素高度,實現垂直居中*/
            line-height: 50px;

            /*設置文本,水平居中*/
            text-align: center;
        }

        /*僞類選擇器,鼠標進入時,改變樣式*/
        ul>li:hover{
            background-color: #5e5e5e;
        }


        .box{
            width: 600px;
            height: 100px;
            background-color: #5bc0de;

            /*默認隱藏*/
            display: none;
        }

        /*鼠標進入後,顯示隱藏的塊*/
        ul>li:hover .box{
            display: block;
        }



    </style>

</head>
<body>


<ul>

    <li>歐美
        <div class="box"></div>
    </li>

    <li>日韓
        <div class="box"></div>
    </li>

    <li>港臺
        <div class="box"></div>
    </li>

    <li>大陸
        <div class="box"></div>
    </li>

</ul>


</body>
</html>

在這裏插入圖片描述

04-overflow處理溢出


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>

        .box{
            width: 150px;
            height: 150px;
            border: 1px solid red;

            /*圖片溢出,清除內部元素對外部元素的影響*/

            /*設置hidden隱藏, 把溢出部分剪切*/
            overflow: hidden;

            /*設置爲auto自動,判斷是否溢出,有溢出則添加滾動條*/
            /*overflow: auto;*/

            /*設置scroll滾動,添加滾動*/
            /*overflow: scroll;*/

            /*默認值visible,可見*/
            /*overflow: visible;*/

        }

    </style>




</head>
<body>


<div class="box">
    <img src="./images/timg.jpg" alt="">
    <!--<img src="./images/111.jpg" alt="">-->
</div>




</body>
</html>

在這裏插入圖片描述

05-浮動float


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .box01{
            width: 400px;
            height: 300px;
            border: 1px solid red;

            margin-left: 100px;
        }

        .box02{
            width: 100px;
            height: 100px;
            background-color: #a94442;

            /*添加浮動*/
            /*1.可以設置左浮動,或者右浮動*/
            /*2.浮動會脫離文檔流,會將後面的元素覆蓋*/
            /*3.不會覆蓋文字*/
            /*4.碰到父元素或者前面右浮動元素,則停止浮動*/
            /*5.浮動元素排在一行,總寬度超過父元素,則自動換一行*/
            /*6.如果前面有未浮動的元素 會另起一行進行浮動*/
            float: left;
        }

        .box03{
            width: 110px;
            height: 110px;
            background-color: #5bc0de;

            float: left;
        }

        .box04{
            width: 110px;
            height: 110px;
            background-color: red;

            float: left;
        }



    </style>

</head>
<body>


<div class="box01">
    <div class="box02">1111</div>
    <div class="box03">2222aeehtsrjytuyg</div>

    <div class="box04">3333</div>
</div>


</body>
</html>

在這裏插入圖片描述

06-浮動後父元素高度撐不開問題–4種解決方案


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .box01{
            width: 300px;

            /*1. 解決撐不開問題方案一:父元素添加高度*/
            /*缺點:高度往往不能寫死*/
            /*height: 300px;*/

            border: 5px solid red;

            /*2.解決撐不開問題方案二:父元素添加 overflow: hidden;*/
            /*設置隱藏,把溢出部分剪切*/
            /*父元素沒有高度,沒有剪切的標準,以子元素高度去剪切*/
            /*找到子元素的高度,父元素又能撐開了*/
            /*overflow: hidden;*/

        }

        .box02{
            width: 100px;
            height: 100px;
            background-color: #5bc0de;

            /*浮動後,如果父元素沒有設置高度,則導致父元素撐不開*/
            float: left;
        }

        /*!*3.解決撐不開問題方案三:添加空白標籤,清除兩邊浮動影響*!*/
        /*!*缺點:添加了一個多餘的空標籤*!*/
        /*.box03{*/
            /*!*清除2邊浮動影響*!*/
            /*!*left right both*!*/
            /*clear: both;*/
        /*}*/


        /*4. 解決撐不開問題方案四:給父元素添加僞元素 after*/
        /*原理和方案3相同,但是不會添加多餘的空標籤*/
        .box01:after{
            /*在box01後面添加一個空字符*/
            content: '';

            /*把空字符變爲塊元素*/
            display: block;

            /*清除兩邊浮動影響*/
            clear: both;
        }


    </style>


</head>
<body>



<div class="box01">


    <div class="box02">1111</div>

    <!--<div class="box03"></div>-->


</div>



</body>
</html>

在這裏插入圖片描述

07-相對定位


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{margin: 0;padding: 0}

        .box01{
            width: 300px;
            height: 300px;
            border: 1px solid red;

            margin-left: 100px;
        }

        .box02{
            width: 100px;
            height: 100px;
            background-color: gold;

            /*定位屬性: 相對定位*/
            /*1.相對定位,沒有脫離文檔流*/
            /*2.參考點:是原來位置的起始點,相對於父元素*/
            position: relative;
            top: 50px;
            left: 20px;


        }

        .box03{
            width: 100px;
            height: 100px;
            background-color: red;

            /*添加定位屬性*/
            position: relative;
            /*定位層級/權重, 值越大,顯示在最上面*/
            z-index: 1;

        }


    </style>




</head>
<body>


<div class="box01">

    <div class="box02">1111</div>

    <div class="box03">2222</div>

</div>


</body>
</html>

在這裏插入圖片描述

08-絕對定位


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{margin: 0;padding: 0}

        .box01{
            width: 300px;
            height: 300px;
            border: 1px solid red;

            margin-left: 100px;

            /*給父元素添加定位屬性*/
            /*position: relative;*/

        }

        .box02{
            width: 100px;
            height: 100px;
            background-color: gold;

            /*絕對定位:*/
            /*1.絕對定位:脫離了文檔流*/
            /*2.參考點:如果父元素有定位屬性,則相對父元素的起始位置*/
            /*如果父元素沒有定位屬性,找父元素的上一級,找到body爲止*/
            position: absolute;
            top: 20px;
            left: 50px;

        }


        .box03{
            width: 100px;
            height: 100px;
            background-color: red;

            position: relative;
            z-index: 2;

        }




    </style>




</head>
<body>


<div class="box01">

    <div class="box02">1111</div>


    <div class="box03">2222</div>


</div>


</body>
</html>

在這裏插入圖片描述

10-小米側邊欄練習–絕對定位


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        *{margin: 0;padding: 0;list-style: none}


        ul{
            width: 200px;
            background-color: rgba(105, 101, 101, 0.6);

            /*給ul設置定位屬性,把ul作爲參考點*/
            position: relative;

            margin-left: 50px;
            margin-top: 50px;

        }

        ul>li{
            width: 200px;
            height: 80px;
            border: 1px solid red;

            /*保證盒子大小不變,不受padding和border影響*/
            box-sizing: border-box;

            line-height: 80px;

            text-align: center;
        }

        .box{
            width: 500px;
            height: 320px;
            background-color: #5bc0de;

            /*絕對定位*/
            position: absolute;
            top: 0px;
            left: 200px;

            display: none;

        }

        ul>li:hover{
            background-color: green;
        }



        /*僞類選擇器,顯示box*/
        ul>li:hover .box{
            display: block;

        }



    </style>

</head>
<body>


<ul>

    <li>手機
        <div class="box"></div>
    </li>

    <li>電視
        <div class="box" ></div>
    </li>

    <li>空調
        <div class="box"></div>
    </li>

    <li>掃地機器人
        <div class="box"></div>
    </li>

</ul>


</body>
</html>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章