2025-01-16Login Page body { font-family: Arial, sans-serif; background-color: #f7f7f7; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { width: 400px; background-color: #fff; padding: 20px; border-rad

https://www.qianduange.cn//article/20555.html 分类：前端知识

2024-09-09这个时候可能会有人想说用两个盒子包裹着，使用 justify-content: space-between 来，但是使用这个后，对于一级导航的样式就需要在两个盒子中各自设计，那么有没有一种方式就能实现一个大盒子里面装的所有的小盒子是在同一级的，但是个人信息又能跑到最后边呢？这样的话就能很明显看出来最后那个盒子是沾满了剩下的盒子了的，再配合text-align: right;一般布局在使用flex布局的时候，我们是希望一级导航是左边是所有的导航，但是个人信息按钮是在最右边对齐的。_flex 右对齐

https://www.qianduange.cn//article/17993.html 分类：前端知识

2024-07-29CSS使用浮动、清除、固定em、rem前端程序员必须要掌握的前端知识父元素没有高度，内容由子元素撑开，子元素浮动后，导致父元素高度为0，造成高度塌陷，解决方法有：1.给父元素一个高度。2.在标签结构的末尾添加一个空的块级标签，添加clear：both；的声明3.给父元素添加overflow：hidden；声明4.万能清楚法;父盒子：：after{content:"";clear:both;display:block;visiblity:hidden;}......_前端调样式

https://www.qianduange.cn//article/14465.html 分类：前端知识

2024-06-24flex布局，弹性盒子，css使用及理解_justify-content:revert;

https://www.qianduange.cn//article/13455.html 分类：前端知识

2024-06-11注：inline-block 可替换成 inline-grid / inline-table / inline-flex(inline-flex额外加上justify-content: space-around / space-evenly)_css 使用grid实现一行三个多行

https://www.qianduange.cn//article/11904.html 分类：前端知识

2024-06-09水平居中的方案行内级元素：设置父元素的 text-align:center块级元素：设置当前块级元素(要有宽度) margin:0 auto绝对定位：元素有宽度的情况下，设置left0、right0、margin:0 auto；flex布局：通过设置justify-content: center;垂直居中的方案绝对定位： 元素要有高度的情况下，设置top0、bottom0、margin:auto 0;flex布局 通过设置align-_transform css

https://www.qianduange.cn//article/11610.html 分类：前端知识

2024-05-30它们可以用于装饰（`:first-line`，`:first-letter`）或将元素添加到标记中（与 content:...组合），而不必修改标记（`:before`，`:after`）。1、伪元素使用 2 个冒号，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder 等；伪类使用1个冒号，常见的有：:hover，:link，:active，:target，:not()，:focus等。

https://www.qianduange.cn//article/10095.html 分类：前端知识

2024-05-24一、设置主轴子元素排列方式 : justify-content 样式说明二、代码示例1、代码示例 - 子元素从头部开始排列2、代码示例 - 子元素从尾部开始排列3、代码示例 - 子元素在主轴方向上居中对齐4、代码示例 - 子元素平均分配剩余空间5、代码示例 - 两侧的子元素贴两边 / 其它元素平分剩余空间_justify-content: flex-end;

https://www.qianduange.cn//article/9232.html 分类：前端知识

2024-05-15} hljs css复制代码.wheel { margin-top: px; position: relative; width 300px; height: 300px border: 5px solid #333 border-radius: 50%; } .wheel:before { content: ''; position: absolute; top: 45%; : ```html Lucky Wheel .container { display: grid;

https://www.qianduange.cn//article/8720.html 分类：前端知识

2024-05-09This code creates a simple heart shape using CSS. The heart shape is made up of two pseudo-elements, ::before ::after, which are styled to form the top halves of the heart. The main heart element has a width and height set to create the overall shape of the heart. When you open this

https://www.qianduange.cn//article/7562.html 分类：前端知识