CSS装饰 前端开发

垂直对齐方式

属性名：vertical-align
属性值：

属性值 效果
baseline 默认、基线对齐
top 顶部对齐
middle 中部对齐
bottom 底部对齐

光标类型

场景：设置鼠标光标在元素上时显示的样式
属性名：cursor
常见属性值：

属性值 效果
default 默认值，通常是箭头
pointer 小手效果，提示用户可以点击
text 工字形，提示用户可以选择文字
move 十字光标，提示用户可以移动

边框圆角

场景：让盒子变得圆润
属性名：border-radius
常见取值：数字+px、百分比

溢出部分显示效果

溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条......
属性名：overflow
常见属性值：

属性值 效果
visible 默认值，溢出部分可见
hidden 溢出部分隐藏
scroll 无论是否溢出，都显示滚动条
auto 根据是否溢出，自动显示或隐藏滚动条
标签: css
吾峰 发布于  2023-3-3 19:39 
评论(0)  浏览(297)

CSS元素层级问题 前端开发

元素层级问题

不同布局方式元素的层级关系

标准流<浮动<定位

不同定位之间的层级关系

相对、绝对、固定默认层级相同

此时HTML中写在下面的元素层级更高，会覆盖上面的元素

标签: css
吾峰 发布于  2023-3-3 18:48 
评论(0)  浏览(314)

CSS定位 前端开发

使用定位的步骤

1、设置定位方式

属性名：position
常见属性值：

定位方式 属性值
静态定位 static
相对定位 relative
绝对定位 absolute
固定定位 fixed

2、设置偏移量

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
选取的原则一般是就近原则（离那边近用哪个）

方向 属性名 属性值 含义
水平 left 数字+px 距离左边的距离
水平 right 数字+px 距离右边的距离
垂直 top 数字+px 距离上边的距离
垂直 bottom 数字+px 距离下边的距离
标签: css
吾峰 发布于  2023-3-1 16:15 
评论(2)  浏览(334)

通过命令行更新Ubuntu

1、命令：sudo apt update && sudo apt upgrade -y

在终端中，输入命令：

sudo apt update && sudo apt upgrade -y

会提示输入密码。在终端中输入密码时，你不会在屏幕上看到字符，因此请继续输入密码并按 Enter。这将更新 Ubuntu 中的软件包。

它实际上不是单个命令，而是两个命令的组合。&& 是一种在 Linux中运行多个命令的方式，使得第二个命令仅在前一个命令成功执行时再执行。

当命令“apt upgrade”在安装更新之前要求确认时，最后的“-y”会自动输入“yes”。

注意，你也可以单独使用这两个命令，一一使用：

sudo apt update
sudo apt upgrade

它会花费更长的时间，因为你必须等待一个命令完成，然后再输入第二个命令。

2、说明：sudo apt update

此命令更新可用包的本地数据库。如果不运行此命令，本地数据库将不会更新，你的系统将不知道是否有任何新版本的软件包可用。

这就是为什么当运行“sudo apt update”命令时，会在输出中看到很多 URL。该命令从相应的存储库（即在输出中看到的 URL）获取包信息。

在命令的末尾，它会告诉可以升级多少个包。可以通过运行以下命令来查看这些包：

apt list --upgradable

3、说明：sudo apt upgrade

此命令将已安装软件包的版本与本地数据库相对比，然后它会列出那些有更新版本可用的包。此时，它会询问是否要将已安装的软件包升级到较新的版本。

输入“yes”或“y”，或者直接按回车键确认安装更新。

所以区别是“sudo apt update”检查新软件包版本的可用性，而“sudo apt upgrade”实际上是安装新版本。

吾峰 发布于  2023-2-25 10:56 
评论(0)  浏览(909)

CSS解决外边距塌陷/清除浮动双伪元素 前端开发

  • 外边距塌陷：父子标签，都是块级，子级加margin会影响父级位置。
  • 父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，显示到上面。
.clearfix::before,
.clearfix::after {
    content: ''
    display: table;
}
.clearfix::after {
    clear: both;
}

清除浮动的方法-给父元素设置overflow：hidden

overflow:hidden
标签: css
吾峰 发布于  2023-2-24 15:53 
评论(0)  浏览(229)

CSS 书写顺序 前端开发

CSS书写顺序：浏览器执行效率更高
1、浮动 / display
2、盒子模型：margin borde padding 宽度高度背景色
3、文字样式

标签: css
吾峰 发布于  2023-2-23 16:53 
评论(0)  浏览(232)

CSS-盒子模型-外边距折叠现象-塌陷现象 前端开发

场景：互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上

结果：导致父元素一起往下移动

解决方法：

  1. 给父元素设置border-top 或者 padding-top （分隔父子元素margin-top）
    2.给父元素设置overflow：hidden（推荐）
    3.转换成行内块元素
    4.设置浮动
<!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>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            overflow: hidden;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin-top: 50px ;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>
</html>
标签: css
吾峰 发布于  2023-2-16 21:50 
评论(0)  浏览(286)

Blender基础入门练习-瓶盖

吾峰 发布于  2023-1-11 17:34 
评论(0)  浏览(314)

Blender基础入门练习-锤子，骰子

吾峰 发布于  2023-1-9 18:24 
评论(0)  浏览(331)

Blender挤出面的技巧

在Blender中，同时选择两个面挤出，如果要达到分开的挤出的效果，要选择:“挤出选区”（快捷键：E）->“挤出各个面”。
同时，在缩放的时候，选择:“变换轴心点”（快捷键：/）"，然后选择“各自的原点”。

测试版本：blender3.3.2

吾峰 发布于  2023-1-9 13:53 
评论(0)  浏览(644)

个人资料

blogger
吾峰
业务技术群：132768713

搜索

标签

ai Stable diffusion blender pygame python css html

微语

  • Python会忽略[ ] { } ( )内部的换行。因此，列表、列表推导式、元祖、字典等结构完全可以分成几行来写，无须使用续行转义符\。

    吾峰 2024-04-29 13:11

最新文章

热门文章

最新评论

链接

日历

存档