css的简单问题-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_79568779/article/details/142914462

1.display:none;和visibility:hidden;的区别

相同点：都可以让元素不可见

区别：

display:none;可以让元素完成在渲染树中消失，渲染时不占任何空间；visibility:hidden;不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见。

修改元素的display通常会造成文档重排，修改isibility属性只会造成本元素的重绘

2.外边距折叠

相邻两个或多个普通流中的块元素在垂直方向上的margin会折叠。

浮动元素或行内块元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠

创建了块级格式化上下文BFC的元素，不会和它的子元素发生margin折叠

3.z-index是什么？

z-index属性设置元素的堆叠顺序。仅在定位元素上有效果。在position的值是relative,absolute,fixed，sticky时候可以触发

4.盒模型

内容（Content）,内边距（Padding）,边框（Border）,外边距（Margin）

box-sizing:content-box|border-box|inherit;

CSS有两种不同的盒模型：

标准盒模型（W3C Box Model）（默认）：在这个模型中，元素的width和height只指内容区域的宽度和高度。内边距、边框和外边距会加在内容的宽度和高度上。
IE盒模型（也称为“怪异盒模型”）：在IE浏览器中，元素的width和height包括了内边距和边框的宽度。也就是说，设置的宽度和高度实际上是元素的外部尺寸。

5.移动端适配

a.meta viewport视口

b.图片适配

c.媒体查询

d.动态rem方案

<!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,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/05.css">
    <link rel="stylesheet" href="zuqiuFont/iconfont.css">
</head>

<body>
    <header>
        <div>热点</div>
        <div>关注</div>
    </header>
    <nav>
        <div>xx现场</div>
        <div>xx生活</div>
        <div>xx美女</div>
    </nav>
    <main>
        <figure>
            <img src="img/1.jpg" alt="">
            <figcaption>小丸子啊</figcaption>
        </figure>
        <figure>
            <img src="img/1.jpg" alt="">
            <figcaption>小丸子啊</figcaption>
        </figure>
        <figure>
            <img src="img/1.jpg" alt="">
            <figcaption>小丸子啊</figcaption>
        </figure>
        <figure>
            <img src="img/1.jpg" alt="">
            <figcaption>小丸子啊</figcaption>
        </figure>
        <figure>
            <img src="img/1.jpg" alt="">
            <figcaption>小丸子啊</figcaption>
        </figure>
        <figure>
            <img src="img/1.jpg" alt="">
            <figcaption>小丸子啊</figcaption>
        </figure>
        <figure>
            <img src="img/1.jpg" alt="">
            <figcaption>小丸子啊</figcaption>
        </figure>
        <figure>
            <img src="img/1.jpg" alt="">
            <figcaption>小丸子啊</figcaption>
        </figure>
        <figure>
            <img src="img/1.jpg" alt="">
            <figcaption>小丸子啊</figcaption>
        </figure>
        <figure>
            <img src="img/1.jpg" alt="">
            <figcaption>小丸子啊</figcaption>
        </figure>
    </main>
    <footer>
        <div>
            <span class="iconfont icon-shouye"></span> 首页
        </div>
        <div>
            <span class="iconfont icon-shouye"></span> 首页
        </div>
        <div>
            <span class="iconfont icon-xiangji"></span>
        </div>
        <div>
            <span class="iconfont icon-shouye"></span> 首页
        </div>
        <div>
            <span class="iconfont icon-shouye"></span> 首页
        </div>
    </footer>
</body>
</html>
<!-- 
    1.该项目的设计稿总宽度是640px,所以对应在iPhone5上做,该设备的真实大小是320,所以dpr = 2
    2.改视口
    3.考虑适配(vw+rem实现实时适配)
    假设基准字号为100px
    html的字号需要写vw,就需要把100px转成vw
    如果我们基于iPhone5做,100vw=320px 1vw=3.2px 100px=100/3.2=31.25vw
    记住:改工具里面的设置
    4.在body里面让字号回归为默认字号16px
    5.正常书写布局代码
 -->

html {
    font-size: 31.25vw;
}

html,
body {
    height: 100%;
}

body {
    font-size: 16px;
    display: flex;
    flex-direction: column;
}


/* =====================header */

header {
    height: .44rem;
    background-color: green;
    display: flex;
    justify-content: center;
    align-items: center;
}

header div:nth-child(1) {
    width: .6rem;
    height: .24rem;
    background-color: #63d985;
    border-radius: .12rem 0 0 .12rem;
    text-align: center;
    line-height: .24rem;
    color: white;
    font-size: .12rem;
}

header div:nth-child(2) {
    width: .6rem;
    height: .24rem;
    background-color: #54cc76;
    border-radius: 0 .12rem .12rem 0;
    text-align: center;
    line-height: .24rem;
    color: white;
    font-size: .12rem;
}

nav {
    height: .35rem;
    border-bottom: 1px solid gray;
    display: flex;
    /* justify-content: space-around; */
}

nav div {
    width: 33.33%;
    text-align: center;
    line-height: .35rem;
}

nav div:hover {
    border-bottom: 2px solid green;
    color: green;
}

main {
    flex: 1;
    background-color: pink;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: auto;
}

main figure {
    border: 1px solid gray;
    width: 48%;
    margin-top: .1rem;
}

main figure img {
    width: 100%;
    vertical-align: middle;
}

main figure figcaption {
    border-top: 1px solid gray;
    padding: .05rem 0 .05rem .1rem;
}

footer {
    height: .44rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

footer div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer div:nth-child(3) {
    border: 1px solid gray;
    width: .52rem;
    height: .52rem;
    border-radius: 50%;
    text-align: center;
    line-height: .52rem;
    /* margin-top: -8px; */
    /* position: relative;
    top: -7px; */
    transform: translateY(-0.05rem);
    background-color: #fff;
}

footer div:nth-child(3) .icon-xiangji {
    font-size: .3rem;
}

6.css3的transform，transition过渡,animation动画

transform属性用于在2D或3D空间中对元素进行变换。可以通过旋转、缩放、倾斜和移动等效果来改变元素的形状和位置。

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transform: translate(50px, 50px) rotate(45deg);
}

transition用于创建平滑的变化效果，使CSS属性的变化更加自然。它定义了当元素状态变化时，过渡效果的持续时间、效果和延迟。从一种效果逐渐改变为另一宗效果。通常需要由事件来触发。transition是一次性的，不能重复发生，除非再次触发。

属性：

transition-property: 指定需要应用过渡效果的CSS属性。
transition-duration: 定义过渡效果的持续时间。
transition-timing-function: 定义过渡效果的速度曲线（如ease、linear、ease-in等）。
transition-delay: 定义过渡效果的延迟时间。

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: background-color 0.5s ease, transform 0.5s ease;
}

.box:hover {
    background-color: red;
    transform: scale(1.2);
}

animation用于创建更复杂的动画效果。与transition不同，animation可以控制关键帧，允许在多个状态之间进行变化。

属性：

animation-name: 指定动画的名称，通常与@keyframes一起使用。
animation-duration: 定义动画的持续时间。
animation-timing-function: 定义动画的速度曲线。
animation-delay: 定义动画的延迟时间。
animation-iteration-count: 指定动画的循环次数（如infinite）。
animation-direction: 定义动画的播放方向（如normal、reverse、alternate等）。

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(100px);
    }
    100% {
        transform: translateX(0);
    }
}

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: slide 2s infinite;
}

7.父元素和子元素宽高不固定，如何实现水平处置居中

方法一：使用 Flexbox

    <style>
        .parent {
            display: flex; /* 启用 Flexbox */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中（可选） */
            height: 100vh; /* 高度设为 100% 视口高度，便于查看效果 */
            border: 2px solid #333; /* 添加边框以显示父元素 */
        }
        .child {
            padding: 20px;
            background-color: lightblue;
            border: 1px solid #007bff; /* 添加子元素的边框 */
        }
    </style>

方法二：使用绝对定位

    <style>
        .parent {
            position: relative; /* 使父元素成为定位上下文 */
            height: 100vh; /* 高度设为 100% 视口高度 */
            border: 2px solid #333; /* 添加边框以显示父元素 */
        }
        .child {
            position: absolute; /* 使用绝对定位 */
            left: 50%; /* 移动到父元素的 50% */
            top: 50%; /* 移动到父元素的 50% */
            transform: translate(-50%, -50%); /* 将元素中心移动到该点 */
            padding: 20px;
            background-color: lightcoral;
            border: 1px solid #007bff; /* 添加子元素的边框 */
        }
    </style>

方法三：使用 Margin 自动设置

    <style>
        .parent {
            width: 80%; /* 设置父元素宽度 */
            margin: 0 auto; /* 使父元素居中 */
            height: 100vh; /* 高度设为 100% 视口高度 */
            border: 2px solid #333; /* 添加边框以显示父元素 */
        }
        .child {
            width: fit-content; /* 宽度根据内容自适应 */
            margin: 0 auto; /* 子元素水平居中 */
            padding: 20px;
            background-color: lightgoldenrodyellow;
            border: 1px solid #007bff; /* 添加子元素的边框 */
        }
    </style>

8.假设默认高度100px，写三栏布局，左右栏300px,中间自适应

<style>
    .container {
        display: flex; /* 使用Flexbox布局 */
        height: 100px; /* 设置容器高度 */
    }

    .left-column, .right-column {
        width: 300px; /* 左右栏固定宽度 */
        background-color: #f0f0f0; /* 背景色 */
        padding: 10px; /* 内边距 */
        text-align: center; /* 居中对齐文本 */
    }

    .center-column {
        flex: 1; /* 自适应宽度 */
        background-color: #d0e0f0; /* 背景色 */
        padding: 10px; /* 内边距 */
        text-align: center; /* 居中对齐文本 */
    }
    </style>