css的简单问题

news2024/10/18 21:10:12
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有两种不同的盒模型：

  1. 标准盒模型（W3C Box Model）（默认）：在这个模型中，元素的width和height只指内容区域的宽度和高度。内边距、边框和外边距会加在内容的宽度和高度上。

  2. 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2218023.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【学习】word保存图片

【学习】word保存图片

word中有想保存的照片 直接右键另存为的话&#xff0c;文件总是不清晰&#xff0c;截屏的话&#xff0c;好像也欠妥。 怎么办? 可以另存为 网页 .html 可以得到&#xff1a; 原图就放到了文件夹里面
阅读更多...
在线白板：为远程课堂注入活力的协作工具

在线白板：为远程课堂注入活力的协作工具

在线白板作为一种协作平台&#xff0c;极大地丰富了远程教学的互动性和创造性。在即时白板的帮助下&#xff0c;教师能够与学生共同在虚拟空间中创作和交流&#xff0c;实现知识的共享与思维的碰撞。 https://js.design/?sourcecsdn&planjh1018 首先&#xff0c;在线白板…
阅读更多...
Spring Security 基础配置详解（附Demo）

Spring Security 基础配置详解（附Demo）

目录 前言1. 基本知识2. Demo3. 实战 前言 基本的Java知识推荐阅读&#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&#xff09;【Java项目】实战CRUD的功能整理&#xff08;持续更新&#xff09; 1. 基本知识 HttpSecurity 是 Spri…
阅读更多...
【计算机网络 - 基础问题】每日 3 题（四十五）

【计算机网络 - 基础问题】每日 3 题（四十五）

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞…
阅读更多...
基于Spring Cloud的电商系统设计与实现——用户与商品模块的研究（上）

基于Spring Cloud的电商系统设计与实现——用户与商品模块的研究（上）

操作系统&#xff1a;Windows Java开发包&#xff1a;JDK1.8 项目管理工具&#xff1a;Maven3.6.0 项目开发工具&#xff1a;IntelliJIDEA 数据库&#xff1a;MySQL Spring Cloud版本&#xff1a;Finchley.SR2 Spring Boot版本&#xff1a;2.0.6.RELEASE 目录 用户模块—user-…
阅读更多...
机器学习-RBF

机器学习-RBF

径向基函数内核 – 机器学习 内核在将数据转换为更高维空间方面发挥着重要作用，使算法能够学习复杂的模式和关系。在众多的内核函数中，径向基函数（RBF）内核作为一种多功能且强大的工具脱颖而出。在本文中，我们深入探讨了RBF内核的复杂性，探讨了它的数学公式、直观理解、…
阅读更多...
【分布式知识】MapReduce详细介绍

【分布式知识】MapReduce详细介绍

文章目录 MapReduce概述1. MapReduce编程模型Map阶段Reduce阶段 2. Shuffle和Sort阶段3. MapReduce作业的执行流程4. MapReduce的优化和特性5. MapReduce的配置和调优 MapReduce局限性相关文献 MapReduce概述 MapReduce是一个分布式计算框架&#xff0c;它允许用户编写可以在大…
阅读更多...
使用串口中断接收时遇到的小问题(单字节接收，固定多字节接收，不定长字节接收)

使用串口中断接收时遇到的小问题(单字节接收，固定多字节接收，不定长字节接收)

单字节接收 在cubemx初始化串口1&#xff0c;打开串口中断 在usart。c文件中修改中断回调函数 //串口接收回调函数 void HAL_UART_RxCpltCallback(UART_HandleTypeDef *huart) { if( huart &huart1)//判断中断源 { if(g_ucUsart1ReceiveData 0x01) { …
阅读更多...
Java使用原生HttpURLConnection实现发送HTTP请求

Java使用原生HttpURLConnection实现发送HTTP请求

1、HttpURLConnection 类的介绍 HttpURLConnection 是 Java 提供的原生标准的用于发送 HTTP 请求和接收 HTTP 响应的一个类&#xff0c;它位于 java.net 包下&#xff0c;并继承了 URLConnection 类。 HttpURLconnection 是基于 HTTP 协议的&#xff0c;支持 get&#xff0c;…
阅读更多...
Flink有状态计算

Flink有状态计算

前言 状态是什么&#xff1f;状态就是数据&#xff0c;准确点说&#xff0c;状态是指 Flink 作业计算时依赖的历史数据或中间数据。如果一个 Flink 作业计算依赖状态&#xff0c;那它就是有状态计算的作业&#xff0c;反之就是无状态计算的作业。 举个例子&#xff0c;服务端…
阅读更多...
【高阶数据结构】揭开红黑树‘恶魔’的面具：深度解析底层逻辑

【高阶数据结构】揭开红黑树‘恶魔’的面具：深度解析底层逻辑

高阶数据结构相关知识点可以通过点击以下链接进行学习一起加油&#xff01;二叉搜索树AVL树 大家好&#xff0c;我是店小二&#xff0c;欢迎来到本篇内容&#xff01;今天我们将一起探索红黑树的工作原理及部分功能实现。红黑树的概念相对抽象&#xff0c;但只要我们一步步深入…
阅读更多...
单链表算法题(二）（超详细版）

单链表算法题(二）（超详细版）

前言 : 通过算法题 &#xff0c; 学习解决问题的思路 &#xff0c; 再面对类似的算法题时 &#xff0c; 能快速定位解决方案 一 . 链表的回文结构 链表的回文结构 : 链表的回文结构_牛客题霸_牛客网 思路一 : 创建新链表 &#xff0c; 对原链表进行反转&#xff0c;结果存储在…
阅读更多...
计算机毕业设计Python深度学习房价预测 房源可视化 房源爬虫 二手房可视化 二手房爬虫 递归决策树模型 机器学习 深度学习 大数据毕业设计

计算机毕业设计Python深度学习房价预测 房源可视化 房源爬虫 二手房可视化 二手房爬虫 递归决策树模型 机器学习 深度学习 大数据毕业设计

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 房地产是促进我国经济持续增…
阅读更多...
Google play开发者账号被封，申诉就有机会，别不信

Google play开发者账号被封，申诉就有机会，别不信

在谷歌上架&#xff0c;开发者账号被封对很多开发者来说已经是家常便饭了&#xff0c;虽说一直都有在流传申诉没有用。别灰心啊&#xff0c;申诉就有机会&#xff0c;不少开发者都申诉成功了。 尤其是用一个少一个、价值好几个w的老号&#xff0c;不申诉就认栽实在是太亏了&…
阅读更多...
Bootstrap 弹出框（Popover）插件

Bootstrap 弹出框（Popover）插件

弹出框&#xff08;Popover&#xff09;与工具提示&#xff08;Tooltip&#xff09;类似&#xff0c;提供了一个扩展的视图。如需激活弹出框&#xff0c;用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API&#xff08;Bootstrap Data API&#xff09…
阅读更多...
Mysql底层原理详细剖析

Mysql底层原理详细剖析

1. 索引数据结构 索引是帮助mysql 是帮助数据排序 且高效获取数据的数据结构 索引的数据结构有&#xff1a; 二叉树红黑树hash表b树 1.1 二叉查找树 二叉查找树 如果要查找&#xff0c;通过二分查找的复杂度进行查找数据&#xff0c;确实优化了性能&#xff0c;减少了io的…
阅读更多...
【中危】Oracle TNS Listener SID 可以被猜测

【中危】Oracle TNS Listener SID 可以被猜测

一、漏洞详情 Oracle 打补丁后&#xff0c;复测出一处中危漏洞&#xff1a;Oracle TNS Listener SID 可以被猜测。 可以通过暴力猜测的方法探测出Oracle TNS Listener SID&#xff0c;探测出的SID可以用于进一步探测Oracle 数据库的口令。 建议解决办法&#xff1a; 1. 不应该使…
阅读更多...
机器学习—特性缩放

机器学习—特性缩放

特性缩放的技术能使梯度下降运行得更快&#xff0c;让我们先来看看功能大小之间的关系&#xff0c;这就是该特性的数字和相关参数的大小&#xff0c;作为一个具体的例子&#xff0c;让我们用两个特征来预测房子的价格&#xff0c;X1代表一个房子的大小&#xff0c;X2代表两个卧…
阅读更多...
python爬取themoviedb电影网站信息

python爬取themoviedb电影网站信息

python爬取themoviedb电影网站信息 一、寻找数据接口二、解析主页数据，获取详情页url三、向详情页url发送请求、获取并解析数据四、完整代码一、寻找数据接口 打开网站首页，F12打开开发者工具，刷新页面。 向下滑动页面，点击页面上的“Load More”图标。 寻找到数据接口，…
阅读更多...
掘金2.计算位置 x 到 y 的最少步数（简单01）

掘金2.计算位置 x 到 y 的最少步数（简单01）

public class Main {public static int solution(int xPosition, int yPosition) {int diff (yPosition - xPosition);// 计算差值if(diff < 0)diff * -1;int steps 0; // 初始化步数int begin 0;// 初始化当前位置int step 1;//初始化步长// 循环直到到达目标位置while…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023