ladyfish030.github.io/CSS.html at master · Ladyfish030/ladyfish030.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 5.4.0">

  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha256-CTSx/A06dm1B063156EVh15m6Y67pAjZZaQc89LLSrU=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"example.com","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.18.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":false,"style":null},"fold":{"enable":false,"height":500},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"Searching...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"}}</script><script src="/js/config.js"></script>

    <meta name="description" content="vue中css文件引入  import &quot;.&#x2F;normalize.css&quot;  CSS中的变量   :root获取根元素html  定义变量 123:root&amp;#123;    --color-text: #666&amp;#125; 使用变量 123div&amp;#123;    color: var(--color-text)&amp;#125;  用在设置多个相同颜色的时候很方便:D  pos">
<meta property="og:type" content="website">
<meta property="og:title" content="CSS">
<meta property="og:url" content="http://example.com/CSS.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="vue中css文件引入  import &quot;.&#x2F;normalize.css&quot;  CSS中的变量   :root获取根元素html  定义变量 123:root&amp;#123;    --color-text: #666&amp;#125; 使用变量 123div&amp;#123;    color: var(--color-text)&amp;#125;  用在设置多个相同颜色的时候很方便:D  pos">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-09-08T04:45:18.000Z">
<meta property="article:modified_time" content="2020-09-09T13:48:51.967Z">
<meta property="article:author" content="John Doe">
<meta property="article:tag" content="CSS">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://example.com/CSS">


<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":false,"lang":"en","comments":true,"permalink":"http://example.com/CSS.html","path":"CSS.html","title":"CSS"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>CSS | Hexo
</title>


  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar" role="button">
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">Hexo</p>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="Search" role="button">
    </div>
  </div>
</div>


</header>


  <aside class="sidebar">

    <div class="sidebar-inner sidebar-overview-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">John Doe</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">1</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
  </nav>
</div>

        </div>
      </div>
    </div>


  </aside>


    </div>

    <div class="main-inner page posts-expand">


    <div class="post-block" lang="en"><header class="post-header">

<h1 class="post-title" itemprop="name headline">CSS
</h1>

<div class="post-meta-container">
</div>

</header>


      <div class="post-body">
          <blockquote>
<p>vue中css文件引入</p>
</blockquote>
<p><code>import &quot;./normalize.css&quot;</code></p>
<blockquote>
<p>CSS中的变量</p>
</blockquote>
<ol>
<li><p><code>:root</code>获取根元素html</p>
</li>
<li><p>定义变量</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">:root&#123;</span><br><span class="line">    --color-text: #<span class="number">666</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>使用变量</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">div&#123;</span><br><span class="line">    <span class="attr">color</span>: <span class="keyword">var</span>(--color-text)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<p>用在设置多个相同颜色的时候很方便:D</p>
<blockquote>
<p>position: sticky</p>
</blockquote>
<p>使用该属性的时候要设置top属性</p>
<p>当该元素小于这个高度时正常滚动，当该元素大于这个高度时会被固定在这个高度</p>
<p>好用的属性一般不兼容 :(</p>
<blockquote>
<p>神奇属性在哪里</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">flex-wrap</span>: wrap; <span class="comment">/*去掉会让所有的子元素排列在一排不会换行噢*/</span></span><br><span class="line">    <span class="attribute">justify-content</span>: space-evenly;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span>&gt;<span class="selector-tag">div</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>:<span class="number">47%</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>可以做到div里面的div元素flex布局，而且一行刚好两个（通过调整子元素的宽度可以决定一行里面有多少个子元素），再通过<code>justify-content</code>属性可以让它们之间的间隙各种等分！间隙等分，子元素等分都有，建议实践出真知，真的超级神奇</p>

      </div>


    </div>


</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">

  <div class="copyright">
    &copy;
    <span itemprop="copyrightYear">2023</span>
    <span class="with-love">
      <i class="fa fa-heart"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">John Doe</span>
  </div>
  <div class="powered-by">Powered by <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a>
  </div>

    </div>
  </footer>


  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>
  <div class="sidebar-dimmer"></div>
  <div class="back-to-top" role="button" aria-label="Back to top">
    <i class="fa fa-arrow-up fa-lg"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>


</body>
</html>