标签: html,css

CSS样式隔离方案

本文主要讲css各种解决方案，包括，BEM、css modules、Css in Js、预处理器、Shadow DOM，Vue Scoped通过分析各项方案的产生背景、带来的好处以及存在的一些问题来帮助大家判断自己的项目中适合使用哪种那方案

zzf2022/10/21大约 13 分钟

HTML5

一、语义化标签

<header></header>
<nav></nav>
<container></container>
<article></article>
<section></section>
<footer></footer>
<aside></aside>
<dialog></dialog>

zzf2021/7/2大约 2 分钟

CSS杂项补充

😉精灵图😉

通过对精灵图进行切割，获取某个图片的大小和坐标，使用background-position显示出指定位置的图片

字体图标

阿里巴巴iconfont图标库，icomoon.io库(下载，font文件粘贴，style内引入，html复制与使用；import icon 导入新图标，selection.json,下载并替换)

CSS三角


<style>
	.div {   //1
  	width: 0;
  	height: 0;
  	border: 10px solid transparent;  //透明
  	border-top-color: red;
	}
   .sanjiao {  //2 直角三角形
     width: 0;
     height: 0;
     border-width: 90px 30px 0 0;  //只设置上边框90px,右边框30px
     border-style: solid;  //实线边框
     border-color: red transparent transparent transparent;  //上边框为红，其余透明
   }
</style>

zzf2021/5/11大约 5 分钟

html5-css

html/css 知识回顾

1.无序列表与有序列表

无序列表：
<ul>
  <li></li>
  <li></li>
</ul>
有序列表：
<ol>
  <li></li>
  <li></li>
</ol>
<style>
  li{
    list-style:inside;  //消除li的.
  }
</style>

zzf2021/4/24大约 16 分钟