逆水行舟，不进则退

遇到css last-child 不生效 问题，记录下来子元素需要同一个父元素包裹发现 0.5像素边框实现方法，记录下来<div class="border">0.5像素边框~~~~</div><style> .border { width: 200px; height: 200px; margin: 0 auto; position: relative; } ..

前言「CSS变量」又叫「CSS自定义属性」，为什么会突然提起这个很少人用到的东西呢？因为最近在重构个人官网，不知道为什么突然喜欢用上「CSS变量」，可能其自身隐藏的魅力，让笔者对它刮目相看。谈到为什么会在CSS中使用变量，下面举个栗子，估计大家一看就会明白。/* 不使用CSS变量 */.title { background-color: red;}.desc { background-color: red;}/* 使用CSS变量 */:root { --bg-co

关于display:flex碰上white-space nowrap 影响布局的问题缘由：想用flex实现，右边固定，左边文字自适应，并自动换行。问题：文字撑满不换行布局效果如下图：代码如下：html<div class="row flex"> <div class="col-l"> 服务单号 </div> <div class="col-r flex justify-c-between"> <div class

提升写公共样式的一些写法，灵感来源于 bootstra 框架先在项目中写一些公共样式 common.scss如果没有用 预处理器，可以在线编译成 css 使用.flex-column { display: flex; flex-direction: column;}$flexs: 1,2;@each $i in $flexs { .flex-#{i} { flex: $i }}.block { display: block;}.inline-block

flex 布局flex 布局flex布局是什么？基本概念容器的属性3.1 flex-direction3.2 flex-wrap3.3 flex-flow3.4 justify-content 属性3.5 aligin-items 属性3.6 aligin-content 属性项目的属性orderflex-growflex-shrinkflex-basis...

css 使图片水平垂直居中1.利用display:table-cell，具体代码如下：html代码如下：1 &lt;div class="img_wrap"&gt;2 　　&lt;img src="wgs.jpg"&gt;3 &lt;/div&gt;css代码如下：1 .img_wrap{2 width: 400px;3 height: 300p...

sass是css预处理器sass是基于ruby，使用sass需要安装rubySass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的...

一.水平居中------------------------------------------------------------------------------html中的行内元素和块级元素有哪些。在html中，元素主要分为行内元素和块级元素；行内元素指的是书写完成后不会自动换行，并且元素没有宽和高。块级元素写完后会自动换行，有宽高可以修改。还有一种特殊的元素叫做行内块元素。大致分内是：...

css3 实现背景渐变色与背景图片并存效果先看效果背景是渐变色+浅色透明图案组成，UI没有完全切成一张图，刚好试试看能不能背景渐变+图片的效果。对兼容性要求高的不要这样做，直接叫UI切合成一张完整的背景图html代码<view class="item-card"> <view class="item-card_t"> <tex...