guizi0809的博客

本质：一个矩形在两个矩形互相重叠遮盖形成的缝隙中旋转形成

css中简单的展开与收缩

css实现数字滚动效果

修改select样式

修改radio默认样式

修改checkbox默认样式

css修改滚动条样式

1. 导航菜单下划线效果 <nav> <div class="nav-item">菜单A</div> <div class="nav-item">菜单BBB</div> <div class="nav-item">菜单CC</div> <div class="nav-item">菜单DDDDDDD</div> <div cla

在写Tab组件时（每一项的数据都从后台获取，width宽度不定，使用padding隔开），下划线时通过计算每一项的宽度实现滑动效果，字体加粗标记当前项，且当鼠标hover时，对应项的字体也加粗，此时由于字体加导致粗宽度变化了，所以滑块位置也偏移了，想到用鼠标的mouseenter和mouseleave重新计算宽度，但是比较麻烦，有没有好的方法处理，使字体加粗不影响宽度的改变？在网上查阅了很多资料，发现用伪元素处理效果最好。下面是一个demo ul > li { disp

animation 属性是一个简写属性，用于设置六个动画属性：语法：animation: name duration timing-function delay iteration-countdirection属性可选值描述animation-name规定需要绑定到选择器的 keyframe 名称animation-duration规定完成动画所花费的时间animation-timing-functionlinear | ease | ease-in

一、css三角形的原理将一个div的宽度和高度设置为0，然后设置边框样式.triangle{ width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid blue; border-bottom: 100px solid orange; border-left: 100px solid green;}得到一个由四个三角形组合形成的正方形将对应位置的边框颜色设

一、标签定义一个完整的table包含thead、tbody、tfoot这些语义化标签，方便对表格中的行进行分组，这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。其中th(table head) 一般用于定义表头，也可用于定义单元格，文本会默认加粗tr(table row) 定义表格中的行td(table data) 定义表格中单元格 <table> <!-- 表头部--> <thead>

语法：auto | none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]定义：flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 。flex-shrink: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 。flex-basis: 定义了在分配多余空间之前，项目占据的空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本.

<div class="card"> <div class="item"> <div class="item-label">研究条目研究条目研究条目</div> <div class="item-value">市桥人寂寂，古寺竹苍苍。 鹳鹤来何处，号鸣满夕阳。</div> </div> <div class="ite...

单行文本溢出显示省略号 <div id="box"> 君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。 </div> <style> /* 四个关键属性 */ #box { width: 200px; /* 定宽度 */ white-space: nowrap; /* 文本不换行 */ overflow: