【CSS】13.页面切图和布局实现

news2024/11/24 11:59:00

页面切图和布局实现

1. 浮动布局

1.1 页面布局

LOGO 部分

NAV 布局

LEFT - SIDEBAR：左边栏布局

CONTENT：内容布局

RIGHT - SIDEBAR：右边栏布局

在这里插入图片描述

1.2 流式布局

块的默认布局叫做流式布局

但流式布局并不能满足对页面的需要，需要左边栏、内容栏、右边栏，因此需要让块浮动

在这里插入图片描述

1.3 浮动布局

要想让块浮动起来需要设置块的Float属性

在这里插入图片描述

2. 定位布局

position：static、relative、absolute、fixed、sticky

2.1 static 静态定位

position的默认值，css的默认布局方式

在这里插入图片描述

2.2 relative 相对定位

确定元素的位置之后，通过 left、top、right、bottom 的属性来设置元素位置的偏移

在这里插入图片描述

2.3 absolute 绝对定位

会把元素移出文档流，会被别的元素挤占空间，但是会显示在挤占的元素的上方，通过 left、top、right、bottom 的属性来设置元素位置的偏移，而且 absolute 是以相对于包含它的元素来偏移

在这里插入图片描述

2.4 fixed 固定定位

以浏览器的可视窗口为参照点移动元素，当设置好 left、top、right、bottom 的属性偏移后，无论怎么滚动都不会移动

在这里插入图片描述

2.5 sticky 粘性定位

通过 left、top、right、bottom 的属性来设置元素位置的偏移，当滚轮滑到设置偏移位置时，就会固定，其他元素不变，随滚轮动

在这里插入图片描述

2.6 z-index

相重叠的盒子，设置方向的偏移

若两个相重叠的盒子不同父级盒子，则取决于父级盒子的方向的偏移

在这里插入图片描述

3. display&visibility

display: none; 隐藏（空间释放）

<!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>display</title>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            background-color: khaki;
            display: none;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>

在这里插入图片描述

display: inlline;

行级元素

1 多个元素占一行

2 不可以设置宽高

span a strong

<!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>display</title>
    <style>
        .div2 {
            width: 100px;
            height: 100px;
            background-color: khaki;
            display: inline;
        }
    </style>
</head>
<body>
    <div class="divs">
        <div class="div2">222</div>
        <div class="div2">333</div>
        <div class="div2">444</div>
    </div>
</body>
</html>

在这里插入图片描述

display: block;

块级元素

1 自己占一行

2 可以设置宽高

div h1-h6 ul li table

<!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>display</title>
    <style>
        span {
            width: 100px;
            height: 100px;
            background-color: khaki;
            display: block;
        }
    </style>
</head>

<body>
    <div class="divs">
        <span>111</span>
        <span>222</span>
        <span>333</span>
    </div>
</body>

</html>

在这里插入图片描述

display: inline-block;

行级块元素

1 多个元素占一行

2 可以设置宽高

img input button 既可以跟其他元素共占一行，又可以设置宽高

<!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>display</title>
    <style>
        input {
            width: 100px;
            height: 30px;
        }

        button {
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="divs">
        <img src="../img/1.png" alt=""><img src="../img/2.png" alt=""><br><br>
        <input type="text" name="" id=""><input type="password" name="" id=""><br><br>
        <button>提交</button><button>注册</button>
    </div>
</body>

</html>

在这里插入图片描述

visibility: hidden;

元素不可以见（但空间占着)

visibility: visible;

元素可见

<!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>display</title>
    <style>
        .div3 {
            width: 100px;
            height: 100px;
            background-color: khaki;
            visibility: hidden;
        }
        .div4 {
            width: 100px;
            height: 100px;
            background-color: khaki;
            visibility: visible;
        }
    </style>
</head>

<body>
    <div class="divs">
        <div class="div3">3434</div>
        <div class="div4">3434</div>
    </div>
</body>

</html>

在这里插入图片描述

4. CSS 盒子模型(Box Model)

盒子模型有内容、内边距、边框、外边距

padding-top : 上内边距

padding-right : 右内边距

padding-bottom : 下内边距

padding-left : 左内边距

border-top : 上边框

border-right : 右边框

border-bottom : 下边框

border-left : 左边框

margin-top : 上外边距

margin-right : 右外边距

margin-bottom : 下外边距

margin-left : 上外边距

在这里插入图片描述

4.1 两种盒子模型类型

box-sizing: content-box (默认)
- 元素的 width = content 的宽度
box-sizing: border-box
- 元素的 width = content的宽度+ padding + border

<!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>box-sizing</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: khaki;
            border: 5px solid red;
            margin: 10px;
            padding: 10px;
        }

        .div1 {
            /* 盒子默认值 */
            box-sizing: content-box;
        }

        .div2 {
            box-sizing: border-box;
            
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <br>
    <div class="div2"></div>
</body>

</html>

在这里插入图片描述

注意：这一切跟margin没有关系

4.2 行级元素的注意点

行级元素，margin-top和margin-bottom无效

于行级元素，padding-top和padding-bottom显示上有效果，但是对周围元素没有影响

<!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>行级元素</title>
    <style>
        span {
            margin-top: 100px;
            margin-bottom: 100px;
        }

        a {
            padding-top: 100px;
            padding-bottom: 100px;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: khaki;
        }
    </style>
</head>
<body>
    <span>span</span>
    <a href="www.baidu.com">百度</a>
    <div>123</div>
</body>
</html>