面经1、html,css

柚子皮皮兔

已于 2022-10-11 14:03:59 修改

阅读量113

点赞数

文章标签： css html 前端

于 2022-07-04 23:01:05 首次发布

本文链接：https://blog.csdn.net/m0_49997078/article/details/125601619

版权

一、垂直居中的方法

（1）flex

<style>
        .outer {
            height: 100px;
            background-color: black;
        }
        
        .inner {
            height: 50px;
            width: 50px;
            background-color: pink;
        }
        
        .outer {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

2、position+transform

<style>
        .outer {
            height: 100px;
            background-color: black;
        }
        
        .inner {
            height: 50px;
            width: 50px;
            background-color: pink;
        }
        
        .outer {
            position: relative;
        }
        
        .inner {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

3、position+margin（inner宽高已知）

（1）

<style>
        .outer {
            height: 100px;
            background-color: black;
        }
        
        .inner {
            height: 50px;
            width: 50px;
            background-color: pink;
        }
        
        .outer {
            position: relative;
        }
        
        .inner {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -25px;
            margin-top: -25px;
        }
    </style>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

（2）

<style>
        .outer {
            height: 100px;
            background-color: black;
        }
        
        .inner {
            height: 50px;
            width: 50px;
            background-color: pink;
        }
        
        .outer {
            position: relative;
        }
        
        .inner {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

二、三栏布局（左右两边定宽，中间自适应）

（1）flex

<style>
        .outer {
            height: 200px;
            background-color: black;
        }
        
        .outer {
            display: flex;
        }
        
        .left {
            width: 200px;
            background-color: pink;
        }
        
        .main {
            flex: 1
        }
        
        .right {
            width: 200px;
            background-color: pink;
        }
    </style>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>

（2）position + margin

    <style>
        .outer {
            height: 200px;
            background-color: black;
            position: relative;
        }
        
        .left {
            position: absolute;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .right {
            position: absolute;
            right: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .main {
            height: 200px;
            margin: 0 200px;
            background-color: cadetblue;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>

（2）float + margin

<style>
        body {
            padding: 0;
            margin: 0;
        }
        
        .outer {
            height: 200px;
            background-color: black;
        }
        
        .left {
            float: left;
            width: 100px;
            height: 200px;
            background-color: pink;
        }
        
        .main {
            height: 200px;
            margin: 0 100px;
            background-color: cadetblue;
        }
        
        .right {
            float: right;
            width: 100px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>

三、两栏布局（左边固定，右边自适应）

1、flex

<style>
        .outer {
            height: 200px;
            background-color: black;
            display: flex;
        }
        
        .left {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .right {
            flex: 1;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

2、position + margin

<style>
        .outer {
            height: 200px;
            background-color: black;
            position: relative;
        }
        
        .left {
            position: absolute;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .right {
            margin-left: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

3、float + margin

<style>
        .outer {
            height: 200px;
            background-color: black;
        }
        
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .right {
            margin-left: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

四、圣杯布局和双飞翼布局

（1）圣杯

<style>
        /* 圣杯布局是一种相对布局，首先设置父元素container的位置： */
        .container {
            padding: 0 300px 0 200px;
        }
        
        .left,
        .main,
        .right {
            /* 把left和right分别移动到这两个留白就可以了。可以使用相对定位移动 left和right部分 */
            position: relative;
            min-height: 130px;
            /* 三个主体都设左浮动 */
            float: left;
        }
        /* 负的margin-left会让元素沿文档流向左移动，如果负的数值比较大就会一直移动到上一行 */
        
        .left {
            background: green;
            width: 200px;
            margin-left: -100%;
            left: -200px;
        }
        
        .main {
            background-color: blue;
            /* 设置main宽度为width:100%,让其单独占满一行 */
            width: 100%;
        }
        
        .right {
            background-color: red;
            width: 300px;
            margin-left: -300px;
            right: -300px;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 注意排列方式 -->
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

（2）双飞燕

    <style>
        .content {
            margin: 0 300px 0 200px;
        }
        
        .main,
        .left,
        .right {
            min-height: 130px;
            float: left;
        }
        
        .main {
            background-color: aqua;
            width: 100%;
        }
        
        .left {
            width: 200px;
            background-color: pink;
            margin-left: -100%;
        }
        
        .right {
            width: 300px;
            background-color: brown;
            margin-left: -300px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main">
            <div class="content">main</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

</body>

不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：
圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

多了1个div，少用大致4个css属性（圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4），个人感觉比圣杯布局思路更直接和简洁一点。

五、画三角形

<style>
        div {
            height: 0;
            width: 0;
            border-color: red blue transparent transparent;
            border-style: solid;
            border-width: 30px;
        }
    </style>

六、画正方形

设置高度为0，width和padding-top的值相等，使用border,设置背景颜色。

面试题：高频前端面试题之CSS篇_The..Fuir的博客-CSDN博客_css 高级面试题

关于Html5新特性及Html语义化_x-yi的博客-CSDN博客