当前位置：首页 > news >正文

css的简单问题

news 2025/8/19 21:13:35

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 = 22.改视口3.考虑适配(vw+rem实现实时适配)假设基准字号为100pxhtml的字号需要写vw,就需要把100px转成vw如果我们基于iPhone5做,100vw=320px 1vw=3.2px 100px=100/3.2=31.25vw记住:改工具里面的设置4.在body里面让字号回归为默认字号16px5.正常书写布局代码-->

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>

查看全文

http://www.lryc.cn/news/461959.html