CSS笔记_css笔记精简-CSDN博客

本文链接：https://blog.csdn.net/dg_xdg/article/details/126131343

CSS开头设置通配符选择器{padding：0；margin：0；}

字体Font

font-style(字体样式)

normal 正常样式
italic 斜体

font-family(字体)

字体名称按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起

line-height(行高)

文字会自动居于行高中线对齐

      @font-face{
       font-family: "自定义字体";
        src: url();
      }
      /* 首字斜体 */
      p::first-letter {
        font-size: 25px;
        font-style: italic;
      }
     /* 首行 */
      p::first-line {
        color: aqua;
      }

颜色Color

十六进制代码

#ccc

单词

rgb(调色板)

格式rgb(number,number,number[0-255])

rgba(调色板+透明度)

格式rgb(number,number,number，a[0-1])

opacity(透明度)

[0-1],可以设置DIV等的透明度
某元素透明，其触发的hover改变若是自身的一部分，也会透明

尺寸

在不确定是否溢出时使用%来分块应尽量使%之和小于100%

width=100%铺满浏览器

一般情况下width100%是相对于其父盒子的宽度

使用position让该盒子相对于其宽度为100%铺满浏览器的祖先进行定位,然后该盒子的100%就相对于祖先了

min-width(最小宽度)

最小宽度保证width的值不小于该值，当min-width的值小于内容实际宽度则元素宽度会等于min-width

max-width(最大宽度)

最大宽度当max-width的值大于内容实际宽度元素的宽度等于max-width

背景

background: url();background-size:cover;可以设置背景图片覆盖铺满容器

background-color(背景颜色)

-color可省略

渐变背景色(线性)

        /* 渐变色 */
        background: linear-gradient(to right, red 40%, #f90 60%);
  	background:linear-gradient(90deg, /* 90度方向上绘制渐变色  */
    /* 0-10%:红色; 10-20%:透明色 ; 20-30%:红色 ;30-50%:由红色逐渐变成透明色透明色; 
        50-70%:红色 ; 70-80%:由透明色逐渐变成红色; 80-100%:红色;*/
      red 10%,transparent 10%,transparent 20%,red 20%,red 30%,
      transparent 50%,red 50%,red 70%,transparent 70%,red 80%);

background-image(背景图片)

格式background-image: url(…/img/sprite.png);
background-repeat(背景平铺) no-repeat 不平铺 repeat-x 在x轴上平铺
background-position(背景位置)，可以用x y坐标偏移表示，也可以用center等

背景图定位以及固定

      div {
        height: 1500px;
        /* 半径50%可以画圆形 */
        border-radius: 10px;        
		/* 背景图定位以及固定 */
        background: url(./img/gitar.png) no-repeat left center #000;
        background-size: 512px 508px;
        background-attachment: fixed;	
      }

多背景图

      /* 多背景图 */
      ul {
        height: 1000px;
        /* 属性一一对应，需要平铺的要放最后，否则可能覆盖其他的 */
        background-image: url(./img/scroll_top.jpg),
          url(./img/scroll_bottom.jpg), url(./img/scroll_middle.jpg);
        background-repeat: no-repeat, no-repeat, repeat-y;
        background-position: center top, center bottom, center;
      }

文本

text-indent(段落首行缩进)

必须是块级或者行内块级标签

line-height(行高)

单行文本设置与容器一致的高度可以垂直居中

letter-spacing(间隔)

vertical-align(垂直对齐方式)

<div>
  <span style="letter-spacing: 5px">文字间隔,文本和图片垂直对齐</span>
  <img src="../img/百度云.png" alt="" style="vertical-align: middle" />
</div>

text-decoration(设置对象中的文本的装饰)

text-decoration: none  去除下划线
                        underline 下划线
                        line-through 贯穿线
                        overline  顶线

文字交互

user-select: none 禁止选中

white-space:nowrap 禁止换行

文字超出省略

/*强制文本在一行内显示*/
 white-space: nowrap; 
 overflow: hidden;
 text-overflow: ellipsis;


overflow: hidden;
  text-overflow: ellipsis;
  /* 将对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 2;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;

选择器

选择器的优先级：id选择器>类选择器>标签选择器>通配符选择器。class=属性=伪类选择器
在同等优先级时，后设置的样式覆盖先前设置的样式

类选择器

    <style>
      .cls1 {
        color: red;
        width: 50px;
        height: 50px;
      }
      .cls2 {
        font-size: 20px;
      }
    </style>

  <body>
    <div class="cls1">DIV1</div>
    <div class="cls1 cls2">DIV2</div>
  </body>

可以给一个元素加多个类名，作样式搭配两个类名用空格隔开

后代选择器

.big span{
color: red;
}

子代选择器

.big>span{
color: royalblue;
}

子代选择器之伪类nth

    <style>
   .big > div:nth-child(1) {
  color: yellow;
}
/* 选big的第1个儿子 ,如果第1个不是DIV,则无效*/
div > div:nth-of-type(1) {
  color: red;
}
/*选big的第一个类型为div的儿子 */

    </style>

  <body>
    <div class="big">
      <p>头部</p>
      <div>
        div1
        <div>div1子代的文字</div>
      </div>
      <div>div2</div>
      <div>div3</div>
      <div>div4</div>
    </div>
  </body>

属性选择器

div[id^=“”]{} 在div中，id从前开始匹配，符合""中内容的
div[id$=“”]{} 在div中，id从后开始匹配，符合""中内容的
div[id*=“”]{} 在div中，匹配符合""中内容的
可以指定某个属性值，比如input[type=“text”]{}

伪选择器

before\after 伪元素选择器

    <style>
      p::before {
        content: '添加在之前';
        color: chartreuse;
      }
      p::after {
        content: '添加在之后';
        color: yellow;
      }
    </style>

<body>
    <p>对我进行伪类选择测试,需配合content</p>
  </body>

伪类选择器nth

.class>div:nth-child(1)

先找到第1个子，再适配前面的类型（此处为DIV），不适配则无效

.class>div:nth-of-type(1)

适配子类型（此处为DIV），从适配的子里面选取第1个子

.class>div:nth-child(1)和.class>div:nth-last-of-type(1)用法同上，只不过是倒数的
参数用n，批量选择.class>div:nth-child(n+1)

.class>div:nth-child(n+1)表示：先找到第1个子，再适配前面的类型（此处为DIV），不适配则无效，从第一个选到适配可选的最后一个子
.class>div:nth-child(2n)表示选适配可选的偶数子

//直接::after无效，要在里面用&
// &:last-child ::after {
            //   display: none;
            // }
            &:nth-last-of-type(1) {
              &::after {
                content: '';
                display: none;
              }
            }

鼠标触发伪类Hover

在一般选择器后加: link(访问前) visited(访问后) hover(悬浮) active(激活时)(以上为使用顺序)
改变鼠标样式为小手cursor: pointer;

列表

ul(无序列表)

        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>

ol(有序列表)

        <ol>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ol>

dl(定义列表)

        <dl>
            <dd>标题</dd>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </dl>

列表属性

list-style-type(列表预设符号)

disc：实心圆 square：实心方块 decimal：阿拉伯数字

表格

cellspacing(单元格外边距)

cellpadding(单元格内边距)

colspan(单元格行方向合并)

rowspan(单元格列方向上合并)

caption(表格标题)

      <table
        align="center"
        width="600px"
        height="200px"
        border="1px"
        bordercolor="#66CCFF"
        cellspacing="5px"
        cellpadding="5px"
        bgcolor="blanchedalmond"
      >
        <!-- valign 垂直对齐方式top/bottom/midlle -->
        <caption>
          标题
        </caption>
        <th>表头1</th>
		<th>表头2</th>
        <tr>
          <th>表头3</th>
          <td>1行1列</td>
          <td>1行2列</td>
          <td>1行3列</td>
        </tr>
        <tr>
          <td>2行1列</td>
          <td>2行2列</td>
          <td>2行3列</td>
          <td>2行4列</td>
        </tr>
      </table>

利用表格实现布局

thead,tbody,tfoot

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <!-- 
        <caption></caption>  表格的标题
        th  表示表格的表头部分该标签中的内容会以粗体居中的形式显示
        thead 表格的头部 有且仅有一个 
        tfoot 表格的尾部 有且仅有一个
        tbody 表格的内容 可以多个
     -->
    <table border="1" width="400px" height="300px" cellspacing="0" cellpadding="0" align="center" >
        <caption>web56班HTML成绩表</caption>

        <thead>
            <tr bgcolor="skyblue">
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>

        <tbody bgcolor="pink">
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>女</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>男</td>
            </tr>
        </tbody>
        
        <tfoot>
            <tr bgcolor="red">
                <td colspan="3" align="right" valign="bottom">时间：2021.11.17</td>
            </tr>
        </tfoot>

       
    </table>
</body>
</html>

百度首页

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 顶部 -->
    <table width="100%" height="60px" align="center">
      <tr>
        <td>新闻</td>
        <td>hao123</td>
        <td>地图</td>
        <td>直播</td>
        <td>视频</td>
        <td>贴吧</td>
        <td>学术</td>
        <td>更多</td>
        <td width="1000px"></td>
        <td>设置</td>
        <td bgcolor="blue" align="center">
          <font color="white">登录</font>
        </td>
      </tr>
    </table>
    <!-- 身体 -->
    <div style="height: 130px"></div>
    <table border="1px" align="center" cellspacing="0">
      <caption width="100px" align="center" colspan="2">
        <img src="../img/baidu.jpg" alt="" height="120px" width="250px" />
      </caption>
      <tr height="40px">
        <td border="1px" width="400px"></td>
        <td border="1px" width="70px"><font>百度一下</font></td>
      </tr>
    </table>
    <!-- 热搜 -->
    <table align="center" cellspacing="10" style="font-size: 18px">
      <tr>
        <td>1.中国共产党第三个历史决议全文发布</td>
        <td>4.江苏海域发生5.0级地震 上海有震感</td>
      </tr>
      <tr>
        <td>2.中方回应拜登考虑对冬奥会外交抵制</td>
        <td>5.幼师称希望大连疫情越多越好 被行拘</td>
      </tr>
      <tr>
        <td>3.重磅历史决议的几个细节</td>
        <td>6.丑陋的中国人停止发行?出版社回应</td>
      </tr>
    </table>
    <!-- 小图标 -->
    <table width="100%">
      <tr>
        <td></td>
        <td align="right" valign="bottom">
          <img src="../img/百度.png" alt="" height="40px" />
        </td>
      </tr>
      <tr>
        <td></td>
        <td align="right" valign="bottom">
          <img src="../img/百度云.png" alt="" height="40px" />
        </td>
      </tr>
    </table>
  </body>
</html>

盒子模型

父子元素外边距合并问题

父子盒子没有设置边框时，如果给子盒子设置(上下)外边距，会转变为父盒子的外边距
1. 给父盒子设置border
2. 给父盒子设置overflow:hidden(超出部分隐藏)
3. 转为设置父元素内边距

兄弟元素外边距合并问题

两个同级的盒子设置(上下)外边距时，会合并
1. 给单独的一个盒子设置外边距
2. 下方的盒子设置position:absolute
3. 给下方的盒子添加float
4. 给任意盒子添加display:inline-block

margin-left

父子盒子例证

元素本身无宽度，设置margin-left负值会变长

元素本身有宽度，设置margin-left负值会位移

兄弟盒子例证

margin-top负值会产生位移

margin-bottom负值会导致重叠部分被覆盖(设置margin-right导致重叠也会有这种问题，所以一般设置top和left)

display

display:block\inline\inline-block\none;
                inline-block:使得标签拥有行内块级标签的特征(两个div设置后可能会有间隙，可以margin-left:-5px)
                inline :使得标签变成了行内元素
                block:使得标签变成块级元素
                none:使得标签隐藏且不占据空间(可以将多个div设置该值隐藏，然后通过hover改变display来达到选择性显示)

继承性

对外盒子设置样式时，会有部分子盒子内并没有设置的属性，从父盒子继承到子盒子

边框盒子

给盒子设置box-sizing:border-box可以使盒子大小固定，即便更改padding属性时盒子大小不变

盒子阴影

/*x轴偏移，y轴偏移，模糊程度，颜色*/  
box-shadow: 5px 0px 5px red;

浮动布局

标准文档流：元素根据块元素，行内元素或者行内块级元素的特性来从上到下从左到右自然排列.浮动会脱离标准文档流
通过设置margin-left，margin-top等可以移动元素

Float

浮动塌陷

要浮动时就全部浮动，部分浮动时，不浮动的元素需要设置clear
当父盒子无高度，设置子盒子float会导致父盒子塌陷
给父盒子设置overflow:hidden(超出部分隐藏)
加一个DIV空标签，设置clear:both
给父盒子加伪选择器样式

.big::after {
  content: '';
  display: block;
  clear: both;
}

clear:both(清除浮动影响)

弹性布局Flex（容器+元素）

使用Flex

添加display：flex让一个元素变成容器
Flex使其直系子元素浮动，如ul中的li，应选择ul设置flex，而不是ul外的div等。
要对某div中img使用flex设置居中，则给img套上DIV，再对该外套的父DIV浮动
outline: 2px solid green;设置轮廓(不占位置)

Flex相关属性设置

flex-direction(主轴方向)

row为水平（默认），colum为竖直,-reverse反向

flex-wrap(换行方式)

两个属性可合并简写为flex-flow：row wrap

justify-content(容器内的行排列 )

space-evenly等间距

align-content:center;从轴对齐方式
通过flex居中，justify-content和align-items设置center

align-items: 项目在交叉轴上如何对齐

baseline 根据基线对齐

stretch(默认值)：如果项目未设置高度或者高度为auto 将占满整个父容器高度

align-content:定义多根轴线(换行会产生多轴线)的对齐方式如果项目只有一根轴线则该属性失效

注意：

display:

flex：容器添加弹性布局后显示为块级标签

inline-flex；容器添加弹性布局后显示为行内块级标签

*设置为flex布局后子元素的float clear属性将失效但是定位position依然生效

Grid(网格布局)

画好一个网格布局，然后把DIV放进去，给DIV分配空间，默认DIV挨个占用Cell

<style>
  .big {
    /* 容器基础设置 */
    display: grid;
    /* 将该容器按以下模板进行划分 */
    /*模板设置*/
    grid-template-rows: 100px repeat(2, 200px);
    grid-template-columns: repeat(2, 200px) minmax(200px, 300px);
    /* 网格间距 */
    row-gap: 10px;
    column-gap: 10px;
    /* justify-items: center;
    align-items: center;
    项目在单元格中的位置*/
    /* place-items: center center; */
    width: 1000px;
    outline: 1px solid #f80;
    /* 单元格位置 */
    /* justify-content: space-evenly; */
    place-content: center;
    /* 多余的cell */
    grid-auto-rows: 0;
    /* 划分 */
    grid-template-areas:
      'a b c'
      'a d d'
      'e f f';
  }
  /* 声明某个DIV与划分的区域相等同 */
  /* 可以直接移动或者为某个DIV提供网格空间 */  
  .item_8 {
    grid-row-start: f-start;
    grid-row-end: f-end;
    grid-column-start: e-start;
    grid-column-end: f-end;
	/* 简写 grid-area:row-start/column-start/row-end/column-end; */
    /* 直接提供区域 grid-area: f; */
    background: #f5f5f5;
  }
  .big > div {
    border: 1px solid pink;
  }
</style>
  <body>
    <div class="big">
      <!-- 项目存放于单元格cell中 -->
      <div class="item_1">1项目</div>
      <div class="item_2">2</div>
      <div class="item_3">3</div>
      <div class="item_4">4</div>
      <div class="item_5">5</div>
      <div class="item_6">6</div>
      <div class="item_8">8</div>
    </div>
  </body>

定位

relative(相对定位)

相对添加relative前出现的位置进行定位(脱离标准文档流),原本的位置也会占据空间

left，right，top，bottom分别表示与该边初位置的距离

left和right同时存在时，relative优先使用left，而absolute会拉伸

fixed(固定定位)

浏览器屏幕

absolute(绝对定位)

居中

      > p {
      	text-align:center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateY(-50%);
      }

相对(不为默认定位的)父元素定位，脱离标准文档流且初始位置不占空间

z-index(控制层叠顺序，大的在上)

absolute会使元素脱离标准文档流(浮起来)，浮起来的元素会盖住标准文档流的元素，z-index不改变此机制

视觉元素控制

图片映射(img+map)

visibility: visible/hidden; 显示隐藏这个隐藏会占据空间

 <div>
        <img src="img/pig.jpg" alt="pig" title="pig" usemap="#pig">

        <map name="pig">
            <!-- 
                shape 形状
                    circle 圆形
                    rect   矩形
                    poly   多边形
                coords 坐标值
                    circle-> coords(x1,y1,r) 圆心位置和圆的半径
                    rect  -> coords=(x1,y1,x2,y2) 矩形左上角和右下角的坐标
                    poly  -> coords="371,163,401,182,391,222,352,222,339,184"  每个顶点的坐标
                target="_blank" 页面的打开方式 在新窗口打开
             -->
            <area shape="circle" coords="252,150,22" href="#" target="_blank">
            <area shape="rect" coords="140,332,214,376" href="#" >
            <area shape="poly" coords="371,163,401,182,391,222,352,222,339,184" href="#" alt="">
        </map>
    </div>

视频音频标签

<!-- 
        视频标签
        src 视频路径
        controls 显示控件
        width 宽度
        height 高度
        muted  静音
        autoplay 设置自动播放
        poster  视频前面的封面
        loop  循环播放
     -->
    <video src="videos/herocute.mp4" controls width="340px" height="240px" muted 
    poster="img/pig.jpg" loop></video>

    <audio src="audios/gotime.mp3" controls autoplay loop muted></audio>

img的宽高设置(object-fit)

替换元素不受css视觉格式化模式控制

 object-fit: none;
        /* none  保持原高宽  
          contain 包含：适应小的一边，按比例显示 
            cover 覆盖：按比例缩放，保证覆盖满，超出部分不显示*/

Hover切换

使用背景图
使用整体(一个小DIV中是可以放一个大DIV的，只不过需要处理超出部分)

overflow：hidden(隐藏)，scroll(滚动条)先定位到重叠
先用定位重叠，再：

opacity(不透明度切换)
visibility(加载隐藏)
display(不加载隐藏)
使用z-index

多段文字p居中

给父盒子设置line-height为盒子高，然后给p设置如下

      div {
        width: 100px;
        height: 200px;
        /* word-wrap: break-word; 溢出文字换行*/
        border: 1px solid;
        line-height: 200px;
      }
      p {
        line-height: normal;
        vertical-align: middle;
        display: inline-block;
      }

动画

谁状态改变给谁设置transition属性，初状态一般和transition放在一起，末状态放在hover等触发改变的方法中

简单动画(transition)

简单动画是由一种样式变为另一种样式
1.需要有初末状态
2.display、background-image等无效
3.transition属性写在初状态，触发hover等发生样式改变和恢复时，都会触发动画

div > div:nth-of-type(1) {
  color: red;
  background-color: yellow;
  transition: 2s background; /* 不指定样式就默认all*/
  transition-delay: 2s;
  transition-timing-function: linear;
  transition-duration: 5s; /*持续时间*/
  transition-property: all; /*指定过渡样式*/
      /* 旋转时>180deg背面隐藏
  backface-visibility: hidden; */
}
div > div:nth-of-type(1):hover {
  background-color: #f80;
  transform: translate();/*移动translate(x,y)，！记得加position。 旋转角度rotate(deg) 缩放scale()*/
}

transform变换

transform: translate();/*移动translate(x,y)，！记得加position。 旋转角度rotate(deg) 缩放scale()*/

复杂动画(animation)

先定义一个关键帧@keyframes name{}，然后在其他地方调用并进行相关属性设置即可。

@keyframes color_am {
  0% {
    background-color: yellow;
  }
  25% {
    color: yellow;
  }
  50% {
    color: aqua;
  }
  100% {
    background-color: aqua;
  }
}
.one {
  width: 100px;
  height: 100px;
  color: black;
  background-color: white;
  /* 执行动画名 */
  animation-name: color_am;
  /* 单次时间 */
  animation-duration: 4s;
  /* 延迟 */
  animation-delay: 1s;
  /* 速度，过渡时间 */
  animation-timing-function: linear;
  /* 次数 */
  animation-iteration-count: infinite;
  /* 以什么方向 */
  animation-direction: reverse;
  /* 动画暂停 */
  animation-play-state: paused; 
}

轮播图

一个小DIV中套一个大DIV，大DIV中依次放需要滚动的图，做成一个长条DIV，用动画让大DIV移动就行了

写完代码后在最后一张轮播图后再放一张首张图，可以填补图片由最后一张切换至第一张的间隙
动画移动的大DIV加个hover{animation-play-state: paused; }可实现暂停

表单

表单内分组fieldset

在form表单中，我们可以对form中的信息进行分组归类，在表单form中加入下面两个标签：
　　　　fieldset：对表单进行分组，一个表单可以有多个fieldset。
　　　　legend：说明每组的内容描述。

单选(radio)

    <div class="div1">
      <input type="radio" name="单选" id="radio01" /><label for="radio01"
        >radio01</label
      >
      <input type="radio" name="单选" id="radio02" /><label for="radio02"
        >radio01</label
      >
    </div>

正则表达式(pattern)

 电话：<input type="tel" name="" id="" value="" pattern="^1[3|4|5|8][0-9]{9}$" placeholder="请输入11位的号码" maxlength="11" /><br />

滚动条(range)

    <form action="/" method="post" oninput="outxz.value=document.getElementById('xzdyid').value">
      薪资待遇:<input type="range" name="" id="xzdyid" value="" min="1000" max="100000" step="100" />
      <!-- 使用output标签显示range值 -->
      <output for="xzdyid" name="outxz"></output><br />
    </form>

选项卡(select)

      <form action="">
        <select name="" id="">
          <optgroup label="数字">
            <option value="">1</option>
            <option value="">2</option>
            <option value="" selected>3</option>
          </optgroup>
          <optgroup label="字母">
            <option value="">a</option>
            <option value="">b</option>
            <option value="">c</option>
          </optgroup>
        </select>
        <input type="text" list="datal" />
        <datalist id="datal">
          <option value="a">这是字母A</option>
          <option value="b">这是字母B</option>
        </datalist>
      </form>

其他属性

value 为按钮文字

name用于相互关联

id用于相互选择

check默认选择

表单元素带边框border及轮廓outline

require 需要

readonly 只读

disabled 禁用

新增伪类选择器

:focus焦点触发

:checked选中触发

 input[type='radio']:checked + label {
        color: greenyellow;
      }

        <input type="radio" name="radio_name1" id="radio1" />
        <label for="radio1">朋友介绍</label>

SASS

这是一种更高效简洁的css控制方式

Hbuider安装Sass

[https://www.cnblogs.com/padding1015/p/7133811.html]:

VS Code安装Sass

插件easy sass, live sass compiler(预览版)

配置setting.json

//sass配置
 "liveSassCompile.settings.formats": [{
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css"
        }],
        "liveSassCompile.settings.generateMap": false,
        //自动建CSS输出路径
        "easysass.targetDir": "~/../css"

项目目录结构(配置好setting后会自动生成css文件夹)

html(用于存放写好的代码)
img
sass
- name.scss
name.html

操纵name.html和name.scss即可，(scss会自动生成css内容，命令面板Live sass：watch sass)

使用

  <div class="div1">
    <p>s s </p>
  </div>
  <a href="">链接</a>
  <ul>
    <li><a href="#">LI中的链接</a> </li>
    <li>
      <p>LI中的P</p>
    </li>
    <li>
      <div>
        <p>嵌套的文字</p>
      </div>
    </li>
  </ul>

$定义变量

#拼接

@extend 选择器; 可以继承目标的css

@mixin functionname定义方法

@media screen and (max-width: 1440px) { //用and添加条件 }

@include functionname

&选择自己

@charset "utf-8";
// 用变量替代相应的代码
$sb: skyblue;
$direction: top;
.div1 {
  width: 200px;
  height: 200px;
  border-#{$direction}: 1px solid black;
  background: greenyellow;
}
a {
  color: $sb;
}
//方法可()传参, 形参:后面是默认值
@mixin border_ul($size, $style, $color: red) {
  border: $size $style $color;
}
ul {
  @include border_ul(1px, solid);
  a {
    color: yellow;
  }
  > li:nth-child(2) {
    color: gray;
  }
  > li:nth-child(3) {
    &:hover {
      background: red;
    }
  }
}

移动端

宽度套100%，图片套DIV以自适应宽度，object-fit：contain

移动端视口宽度

    <script>
      !(function (win, doc) {
        function setFontSize() {
          var winWidth = window.innerWidth
          doc.documentElement.style.fontSize = (winWidth / 1080) * 100 + 'px'
        }
        var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize'
        var timer = null
        win.addEventListener(
          evt,
          function () {
            clearTimeout(timer)
            timer = setTimeout(setFontSize, 300)
          },
          false
        )
        win.addEventListener(
          'pageshow',
          function (e) {
            if (e.persisted) {
              clearTimeout(timer)
              timer = setTimeout(setFontSize, 300)
            }
          },
          false
        )
        setFontSize()
      })(window, document)
    </script>