小埋摸鱼学习法 - CSS
type: channel
link: https://www.topzhang.cn/category/css/
items: 网站适配方案
items: CSS文字省略
items: React中书写css代码
items: 仿照网易云window桌面端首页轮播图
items: CSS实现圆环镂空嵌套
items: flex布局中align-items 和align-content的区别
items: HTML和CSS初步总结

网站适配方案
type: item
date: 2022-12-14T02:43:00+00:00
description: 网站适配方案最近在做一些官网类的门户页面，发现这些页面布局大都类似，而且都有移动端的适配样式，按照我以往样的经验是写两套CSS代码进行维护，但这样每次修改都很麻烦，需要改很多地方。所以我就去请教了组内大佬，看看（CV）他们是怎么进行适配开发。PC的网页一般都是上中下结构，类似圣杯布局 顶部一个功能tab，中间内容有个固定宽度和两边保持一个边距：移动端的一般就是这样：PC布局PC上一般宽度变化不是非常明显，所以设计为了保持内容的大小在屏幕中有个合适的占比往往会对一些常见的宽度进行单独设计，所以UI图可能有好几个。当然我们不可能每个都分一个CSS文件进行书写，这样工作量就成倍增长了，所以我们可以利用CSS的媒体查询和LESS进行书写提高我们的效率。媒体查询变量定义媒体查询我们可以使用LESS变量进行定义，这样在不同的地方就可以书写变量来简化工作量了。根据设计图来定义多种媒体查询：@small-size: ~'(max-width: 910px)'; @middle-size: ~'screen and (min-width: 911px) and (max-width: 1199px)'; @large-size: ~'screen and (min-width: 1200px) and (max-width: 1792px)'; @biggest-size: ~'(min-width: 1793px)';布局方案使用栅格布局，所以我们需要定义一个基本的栅格系统：// 栅格的数量及宽度根据ui图来定，标准的ui图每个块的宽度一般和栅格是成整数倍的。 @col-width:40px; @col-gap:40px; @col-width-l:32px; @col-gap-l:32px; //这里设计18个栅格，另外有17个gap // 从1循环到18 @selectors:range(18); // 定义不同屏幕尺寸下不同的格栅大小变量，以及宽度类，这里只写了两个尺寸的 :root { each(@selectors, { --col-@{value}:(@value * @col-width + (@value - 1) * @col-gap) }); } each(@selectors, { .col-@{value}{ width:(@value * @col-width + (@value - 1) * @col-gap); } }); :root { each(@selectors, { --col-@{value}-l:(@value * @col-width-l + (@value - 1) * @col-gap-l) }); } each(@selectors, { .col-@{value}-l{ width:(@value * @col-width-l + (@value - 1) * @col-gap-l); } }); ...这样定义好之后我们就可以根据内容块是几个栅格之间的宽度进行书写，效率提升大大的。// 比如该盒子的宽度为10个栅格之间的宽度 .box{ width: var(--col-10); } @media @large-size { .box { width: var(--col-10-l); } }移动端布局移动端布局一般推荐VW布局进行适配各种宽度的屏幕所以我们可以根据UI图进行定义变量，比如UI图移动端的宽度为780px我们就可以以这个为基准来定义：@vw:(100 / 780vw);这样我们在UI图里量的多少px，就按照如下写法就行了@media @small-size { // 在ui图里为100px .box { width: 100*@vw; } }综上我们按照栅格+VW的方式就比较简洁高效的完成了多端布局

CSS文字省略
type: item
date: 2022-03-16T03:18:00+00:00
description: 单行省略首先书写以下代码块 文字换行 单行换行 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum. 效果如下：可以看到文字换行了，但是有些较长的单词没有换行，如果你要求这些过长的单词也换行可以使用这个属性：word-wrap(该属性在css3修改为了overflow-wrap，当然目前还是能使用前面的那个属性名)。我们来为p标签设置属性：p{ overflow-wrap: break-word; }效果：另外还有一个换行属性：word-break，这些在不同文字间有不同的换行效果。回到正题，我们要求单行省略，那就不需要换行。所以这里设置不换行：这里需要一个属性white-spacep{ white-space: nowrap; }效果：可以看到没有换行，接下来设置溢出文本省略：p{ white-space: nowrap; overflow:hidden; }添加省略号样式：通过text-overflow设置。p{ white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }多行省略多行省略就和单行有点不一样，首先在样式上，设置不换行的属性white-space就不用了,需要额外的三个属性：display: -webkit-box 将对象作为弹性伸缩盒子模型显示。-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式。text-overflow: ellipsis 用省略号“…”隐藏超出范围的文本。overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;/*设置换行的行数*/ -webkit-box-orient: vertical;目前多行的省略部分样式有兼容性问题，所以遇到兼容性问题还是需要另寻找方案了。比如使用伪元素来设置个省略号。

React中书写css代码
type: item
date: 2022-03-07T13:57:45+00:00
description: React中书写css代码React本身就是一个支持组件化的框架，但是React并没有对css处理好组件化。相较于Vue，Vue这个一块就处理的很好，css放置在style标签中，而且可以设置scope作用域，防止样式覆盖，也可以设置css预处理器。在组件化开发中我们需要书写局部的css，全局的css，动态的css(根据状态来设置css)。React中书写css就没有那么的方便，下面介绍一些在React中css的书写方式。内联样式官方推荐的一种写法。export default class componentName extends Component { render() { return ( 你好 世界 ); } }css中短横线链接的属性需要转为小驼峰的形式来书写，以对象的形式书写css样式，同时可以引入state中的属性来动态引入属性。当然缺点很明显，如果需要书写大量的代码，那这种方式一定不方便，没有代码提示等。另外一些样式也不能书写，伪元素等选择器是不能书写的。普通的css引入我们将css单独写在一个文件中，在引入到文件中。import React, { Component } from "react"; import './index.css' export default class componentName extends Component { render() { return ( 你好 世界 ); } }但这样引入的css没有组件之间的作用域，是作用在全局的，属于全局css，会相互影响。所以适合写一些基本的全局样式。css module 写法该方法不是React自带的方法，只要在类似webpack配置打包环境下都可以使用。如果在其他项目中使用我们需要自己配置，配置webpack.config.js中的属性modules:true等。React脚手架已经配置了css modules的配置。我们书写的.css/.less/.scss都需要修改为.module.css/.module.less/.module.scss。引入方式，需要一个变量来接受，className需要以{style.className}形式来书写import React, { Component } from "react"; import style from './index.module.css' export default class componentName extends Component { render() { return ( 你好 世界 ); } }这样就避免了作用域问题，渲染出来的className如下：当然缺陷也有，比如引入的类名不能是短横线连接，不方便修改属性。但这方法也是不错的css书写方式。CSS in JS通过js来增强React中css书写的一种方式。当然我们学些这个方式前先了解下ES6的一种语法，ES6标签模板字符串我们使用该方法需要引入第三方库，这里推荐以下几个库：styled-componentsemotionglamorous我们以styled-components这个库来演示，这个库在社区中是很流行的。安装方式：//npm方式 npm install styled-components -S //yarn方式 yarn add styled-components该库本质上是调用函数来创建一个组件，组件会添加不会重复的class。该方式支持css预处理器的嵌套写法，支持css的各类写法。基本用法：import styled from "styled-components";//创建一个组件 const TitleWrapper = styled.div` color: yellow; .title { background-color: tomato; &::after { content: "---aaa"; } } `;这个函数中根元素为div，其中的样式只作用于该组件中export default class CssInJS extends Component { state = {color:'pink'} render() { return ( <TitleWrapper> 我是谁 hahah </TitleWrapper> ); } } 渲染结果：props,attr属性props可以穿透，直接作用在元素上const InputWrapper = styled.input` background-color: red; `; export default class CssInJS extends Component { state = {color:'pink'} render…

仿照网易云window桌面端首页轮播图
type: item
date: 2021-11-29T09:10:41+00:00
description: 我在使用ant-design-vue的开发的时候用到轮播组件，但是需求要求轮播效果是类似网易云window桌面端首页轮播图效果，有视差的效果，ant-design-vue提供的滚动效果有限，但是就这一个需求我又不太希望引入其他的轮播组件，就想着原生实现一个，然后在网上找了点资料，参照了一个博主的文章链接。了解了这个效果的实现，这里主要记录下实现过程以及原理。博主主要采用的还是css为主的方式来实现轮播展示和切换的效果。我主要做了一些功能的添加。完整代码如下： <slot name="item" :item="item"></slot> <slot name="arrow-left"> <</slot> <slot name="arrow-right">></slot> {{ item }} 后续添加上展示的gif，后续优化切换的动画，以及跨级切换动画层级问题。

CSS实现圆环镂空嵌套
type: item
date: 2020-07-07T14:34:00+00:00
description: 实现效果如下：我在做相机界面时遇到了这样的按钮需求我的思路是两个圆环的嵌套，最里面的大圆环是透明色，然后嵌套其中的小圆环中央居中，最后再给大圆环设置一个边框，这样就实现了了这样的样式。实例代码如下

flex布局中align-items 和align-content的区别
type: item
date: 2020-03-27T17:20:00+00:00
description: 最近刚学了flex，这个非常方便的方法，但是里面的align-items 和align-content这两个属性在属性值上有很多相似的地方，而且它们的含义解释看似也比较相似，所以我就有点混淆它们的用法。align-itemsalign-items属性适用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式。align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。align-contentalign-content属性只适用于多行的flex容器，并且当侧轴上有多余空间使flex容器内的flex线对齐。看到上述的意思后感觉又懂了，但是还是有些懵逼，所以我们来代码演示下基本代码 实体 这时的效果加上align-items: center;去掉align-items: center;加上align-content:center;这时我们改变下子元素的宽度，并设置换行这时我们再加上align-items:center;然后再去掉align-items:center;加上align-content:center;由上述我们发现，align-content在单行的情况下不会生效，它是针对flex容器里面多轴(多行)的情况，而且是对整个容器进行操作。align-items属性适用于所有的flex容器，是针对每一行的元素进行排列，而不是整体进行排列。

HTML和CSS初步总结
type: item
date: 2020-03-26T10:36:00+00:00
description: [scode type="share"]概述：HTML(Hypertext Markup Language)，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。CSS(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。网页大致可以分为结构（HTML）表现（CSS）行为 (JS)。元素和标签是一样的，元素就是标签，标签就是元素。[/scode]HTML部分[collapse status="false" title="1.html的基本结构"] Title [/collapse][collapse status="false" title="2.实体"]在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格，同时在HTML中有些时候，我们不能直接书写一些特殊符号，比如：多个连续的空格，比如字母两侧的大于和小于号。如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符） 实体的语法： &实体的名字;一些常用的实体 空格 > 大于号 < 小于号 © 版权符号[/collapse][collapse status="false" title="3.meta，title标签"]在html的head中我们经常看到这类标签 meta主要用于设置网页中的元数据，其中有些属性和属性值含义如下：charset 指定网页的字符集 name 指定数据的名称， content 指定数据的内容keywords 表示网站的关键字 description 用于网站的描述，会显示在搜索引擎的搜索结果中 title标签的内容会作为搜索结果的超链接上的文字显示(网页的标题) document 其他标签中常见的标签 定义CSS样式 链接外部CSS文件或脚本文件 定义脚本语言 定义页面所有链接的基础定位（用得很少）[/collapse][collapse status="false" title="4.语义化标签"]在使用标签时，还需要关注的是标签的语义，而不只是它的样式h1~h6 标题标签，重要性逐级减小。h1在网页中重要性仅此于title标签，h6最不重要，当然一般只会用到h1~h3标题标签都是块元素，在页面中独占一行的元素称为块元素 标签一 标签二 标签三 标签四 标签五 标签六 p标签表示页面中的一个段落,p也是一个块元素hgroup用来为标题分组，可将一组相关的标题放入当中 <hgrpup> 回乡偶书 其一 </hgrpup>em标签用于表示语义语音的加重，在页面中不会独占一行的元素交内联元素（行内元素），em标签就是内联元素 今天天气不错 strong表示重要的内容强调，也是内联元素blockquote 表示一个长引用，是一个块元素q 表示短语引用，是一个内联元素鲁迅说： 这句话我从来都没说过！ 鲁迅说:这句话我从来都没说过！br标签表示换行，是一个自结束标签 div 无语义标签，目前页面的主要布局标签span 行内元素，主要用于套文字总结一些语义化标签hr 表示水平线cite 表示cite（引用），表现为斜体(常用来引用网站url)sup 表示superscripted(上标)sub 表示subscripted(下标)del 表示删除线H5新增的一些语义化标签header 表示网页头部main 表示网页的主体(一个页面只有一个)footer 表示网站的底部nav 表示网页中的导航aside 和主题相关的其他内容（侧边栏）article 表示独立的文章section 表示一个独立的区块，如上的标签都不能用时使用section标签元素的一些特点块元素，在网页中一般通过块元素对页面进行布局常见块元素：div ，p ，ul , li ,h1-h6…行内元素，行内元素主要用来包裹文字常见行内元素：span ,a ,strong ,em ,b ,s ,i ,font…一般会在块元素内放行内元素，而不会在行内元素里放内联元素注意：p标签中不能放任何的块元素[/collapse][collapse status="false" title="5.列表"]列表（list），在html中可创建列表，有三种有序列表无序列表定义列表有序列表，使用ol标签来创建列表，使用li来表示列表项 无序列表，使用ul标签来创建列表，使用li来表示列表项定义列表，使用dl来创建列表，使用dt来表示定义的内容，使用dd来表示对内容的说明另外，列表之间可以互相嵌套写法： 结构 表现 行为 1 2 3 结构 …