CSS
关注
分享
扫一扫
文章平均质量分 64
火星飞鸟
学习前端ing...
展开
-
一次移动端适配实践 —— rem布局
最近把之前写的 TodoList 小项目重构了一遍。比起之前的版本，重构后的项目改用 Hook，使用 Scss 作为 CSS 预处理器，react-router-dom升级到 V6 版本，同时使用了rem的移动端适配方案。本文就这次重构，总结这次的rem移动端适配实践。1. 几个概念1. 物理像素物理像素又叫设备像素，指的是屏幕上的显示单元，设备实际的像素点，由设备本身的屏幕决定。一个物理像素就是屏幕上一个最小的显示单元，每个显示单元都有自己的颜色和亮度。例如，某屏幕设备在宽度方向有 750 个像素点原创 2022-01-01 18:02:28 · 766 阅读 · 0 评论 -
CSS 文字溢出部分用省略号代替
1. 单行文字溢出省略只需添加三行代码即可：overflow: hidden; /* 超出的文本隐藏 */text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本。 */white-space: nowrap; /* 文本不换行 */举例：CSS：.demo { width: 200px; height: 20px; border: 2px solid #000; overflow: hidden; text-overf原创 2021-07-19 13:24:19 · 384 阅读 · 0 评论 -
学习flex布局，看这篇就够了！
Flex是Flexible Box的缩写，表示弹性布局，用来为盒子模型提供最大的灵活性。任何一个容器都可以设定为flex布局：.box { display: flex;}设定为flex布局之后，子元素的float、clear和vertical-align属性将失效！采用flex布局的容器叫作flex容器，简称容器。容器里的所有子元素成为flex项目，简称项目。采用了flex布局以后，容器和项目分别有各自的属性。为了更好地理解采用了flex布局后，容器不同属性的作用，我写了一个实时演示原创 2021-05-25 16:48:37 · 493 阅读 · 2 评论 -
一文学会用CSS画三角形，简单易懂！
1. 原理其实很简单，利用给div加边框来实现。下面这个正常的盒子，以示区分，四条边框颜色不同，宽度加粗。减小div的宽度、高度，并增加边框的宽度：继续减小div的宽度、高度，并增加边框的宽度：当div的宽度、高度减小到 0 时，三角形的形状就出来啦！只显示一个三角形，将另外三条边框隐藏（颜色改为transparent即可）：这样，一个简单的三角形就画出来了！2. 总结上述最后一个三角形的代码：<div class="triangle"></div>.原创 2021-05-18 14:26:02 · 331 阅读 · 2 评论 -
CSS 实现绝对底部，页脚始终在最下方
1. 什么是绝对底部最近在做一个小项目时，对底部Footer组件有如下需求：当页面内容少于浏览器窗口时，Footer固定在浏览器窗口底部不动；随着页面内容增多，超出浏览器窗口时，Footer紧跟在内容的最下方。后来了解到，这是一种名叫Sticky Footer（绝对底部）的方法。内容在浏览器窗口之内，页脚固定在窗口底部：内容超出浏览器窗口，页脚紧跟在内容最下方：2. 实现绝对底部话不多说，先上代码：布局：<div class="main"> <div class=原创 2021-05-17 10:59:14 · 2097 阅读 · 0 评论 -
CSS选择器、选择器优先级计算方法
CSS选择器的优先级是：内联样式 > ID选择器 > 类选择器 > 标签选择器到具体的计算层⾯，优先级是由A、B、C、D的值来决定的，其中它们的值计算规则如下：（有些并不是选择器，但为了更好地说明问题，暂且将其列入）选择器权重计算公式 {A,B,C,D}继承 或 *{}{0,0,0,0}每一个标签选择器 或 每一个伪元素选择器{0,0,0,1}每一个类选择器 或 每一个属性选择器 或 每一个伪类选择器{0,0,1,0}每一个ID选择器{0原创 2020-11-16 17:09:12 · 433 阅读 · 0 评论 -
CSS 清除浮动的4种方法
1. 为什么要清除浮动因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。2. 清除浮动的方法（1）额外标签法在浮动元素末尾添加一个空的标签例如：<div style="clear:both"></div>（2）父级添加overflow属性可以给父级添加overflow属性为hidden或auto或scroll：.Father { overflow: hidden; /* overfl原创 2020-11-11 22:31:38 · 1239 阅读 · 10 评论 -
使用 CSS 实现盒子水平垂直居中的方法
原始代码：center.html：<!DOCTYPE html><html lang="Zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Center</title> <link rel="styleshe原创 2020-11-09 22:45:27 · 1817 阅读 · 7 评论 -
CSS 简易3D旋转相册
实现效果：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body原创 2020-10-28 20:24:37 · 998 阅读 · 2 评论 -
常用的CSS命名
1. 注释的写法:/* Footer */内容区/* End Footer */2. id的命名:(1)页面结构容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center(2)导航导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sideb原创 2020-10-23 12:57:52 · 1533 阅读 · 1 评论