Positioning exercise of CSS learning notes 3.10

1 Sina advertising column

1.1 layout

Requirements: the advertising picture is fixed on both sides of the browser visual window, will not roll with the window, and should be close to the edge of the page center.

The above figure shows the idea of the box. The difficulty of this exercise is how to make the advertising board close to the edge of the layout center. Just set left to 50% and then set

Margin left is negative (half of the layout center + the width of the box itself + 1px gap)

1.2 code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
			margin: 0;
			padding: 0;
		}
		.w {
			width: 1002px;
            height: 10000px;
			margin: 0 auto;
            /* background-color: #aaa; */
		}
        .box1{
            position: fixed;
            left: 50%;
            top: 155px;
            margin-left: -616px;
            width: 111px;
            height: 274px;
        }
        .box1 .pic{
            width: 111px;
            height: 257px;

        }
        .box1 img{
            width: 100%;
            height: 100%;
        }
        .box1 .close{
            width: 40px;
            height: 17px;
            /* background-color: red; */
            margin-left:71px ;
            background: url(images/1571581438470_09.png);

        }
    </style>
</head>
<body>
    <div class="w"></div>
    <div class="box1">
        <div class="pic">
            <img src="images/1571581438470_03.png" alt="">
        </div>
        <div class="close"></div>
    </div>
</body>
</html>

2 picture enlargement

2.1 layout

Requirements: positioning enables the mouse to slide over the picture and zoom in to the same scale, which is displayed above the original size picture.

Start state:

Implementation status:

Implementation method: when the current div is covered, make the width and height of the current img image larger

2.2 code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        img {
            width: 100px;
            height: 75px;
        }
        .box {
            position: relative;
            width: 600px;
            height: 300px;
            margin: 100px auto;
        }
        .box div {
            float: left;
            width: 106px;
            height: 81px;
            text-align: center;
        }
        
        .box div:hover img{
            position: absolute;
            width: 200px;
            height:150px;
            margin-top: -25px;
            margin-left: -100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div><img src="images/photo01.png"></div>
        <div><img src="images/photo02.png"></div>
        <div><img src="images/photo03.png"></div>
        <div><img src="images/photo04.png"></div>
        <div><img src="images/photo05.png"></div>
        <div><img src="images/photo06.png"></div>
        <div><img src="images/photo07.png"></div>
        <div><img src="images/photo08.png"></div>
        <div><img src="images/photo09.png"></div>
        <div><img src="images/photo10.png"></div>
        <div><img src="images/photo11.png"></div>
        <div><img src="images/photo12.png"></div>
        <div><img src="images/photo13.png"></div>
        <div><img src="images/photo14.png"></div>
        <div><img src="images/photo15.png"></div>
        <div><img src="images/photo16.png"></div>
        <div><img src="images/photo17.png"></div>
        <div><img src="images/photo18.png"></div>
        <div><img src="images/photo19.png"></div>
        <div><img src="images/photo20.png"></div>
    </div>
</body>
</html>

3 short answer questions

From the reference object of positioning and whether it occupies the position, summarize the difference between relative positioning, absolute positioning and fixed positioning?

1) When the element with relative positioning moves its position, it is relative to its original position. It continues to occupy the original position of the standard flow, and the back box still treats it in the way of the standard flow. Therefore, the relative positioning is not off standard

2) absolute absolute positioning element moves relative to the parent with positioning when moving the position. If the parent has no positioning, it moves the position with reference to the browser. Elements with absolute positioning are completely off standard and out of position.

3) When the fixed fixed positioning element moves the position, it moves the element with the visual window of the browser as the reference point, does not scroll with the scroll bar, the fixed positioning does not occupy the original position, and the fixed positioning is also off standard.

Added by DeadlySin3 on Thu, 10 Mar 2022 09:31:18 +0200

Programming VIP