Stylus
https://www.npmjs.com/package/stylus-loader stylus-loader
https://juejin.cn/post/7091948581145280542 在vue 中使用Stylus
https://stackoverflow.com/a/66284049 "ERESOLVE unable to resolve dependency tree" when installing npm react-facebook-login
https://stackoverflow.com/a/65348395 Unable to resolve dependency tree error when installing npm packages
安裝
如果在 Vue心得2022 時沒有安裝Stylus，可以這樣安裝
$ npm install stylus stylus-loader --save-dev
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vue/eslint-config-standard@6.1.0
npm ERR! Found: eslint-plugin-vue@8.7.1
npm ERR! node_modules/eslint-plugin-vue
npm ERR! dev eslint-plugin-vue@"^8.0.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR! node_modules/@vue/eslint-config-standard
npm ERR! dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: eslint-plugin-vue@7.20.0
npm ERR! node_modules/eslint-plugin-vue
npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR! node_modules/@vue/eslint-config-standard
npm ERR! dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
這時候要加 --legacy-peer-deps（用nvm升級npm到 8.19.2 無效）
$ npm install stylus stylus-loader --save-dev --legacy-peer-deps
added 5 packages, changed 1 package, and audited 992 packages in 4s
126 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
npm audit
如果npm install --save 遇到類似錯誤（npm ERR! code ERESOLVE）也可以這樣處理
$ npm install --save --legacy-peer-deps
added 986 packages, and audited 987 packages in 47s
124 packages are looking for funding
run `npm fund` for details
1 high severity vulnerability
To address all issues, run:
npm audit fix
Run `npm audit` for details.
處理完發現有vulnerability，按照提示處理
$ npm audit
# npm audit report
terser 5.0.0 - 5.14.1
Severity: high
Terser insecure use of regular expressions before v4.8.1 and v5.14.2 leads to ReDoS - https://github.com/advisories/GHSA-4wf5-vphf-c2xc
fix available via `npm audit fix`
node_modules/terser
1 high severity vulnerability
To address all issues, run:
npm audit fix
$ npm audit fix --legacy-peer-deps
changed 1 package, and audited 987 packages in 4s
124 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
npm audit fix 時也會遇到 code ERESOLVE 錯誤，一樣加 --legacy-peer-deps 處理
使用
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index 47f0bc6..b2504c3 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -63,6 +63,14 @@
<div class="two"></div>
</article>
</section>
+ <div id="container">
+ <div id="header">Header contents</div>
+ </div>
+ <div id="wrapper-1">
+ <div id="container">
+ <div id="header">Header contents</div>
+ </div>
+ </div>
</div>
</template>
@@ -152,7 +160,7 @@ export default {
}
</script>
-<style scoped>
+<style scoped lang="stylus">
#outer {
background: aqua;
text-align: left;
@@ -278,4 +286,15 @@ article {
height: 30px;
}
+#container {
+ #header {
+ background: salmon
+ }
+}
+
+#wrapper-1
+ #container
+ #header
+ background: burlywood
+
</style>
s
在 <style> 加 lang="stylus"，括號可有可無，加了才能在WebStorm - Move Caret to Matching Brace （Ctrl + M）。Stylus的擴展名是.styl
讓float的div和父div一樣高
https://stackoverflow.com/a/31528903 How to make a floated div 100% height of its parent?
子div：不要讓他float ，加 display: table-cell;
父元素：加 display: table;
#outer{
display: table;
}
#inner {
display: table-cell;
float: none;
}
s
position: absolute 的父div高度
https://stackoverflow.com/a/13546011 Position: absolute and parent height?
https://stackoverflow.com/a/12071017 Make absolute positioned div expand parent div height
問題
position: absolute 的父div高度沒有height
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index b1c9159..f7d07e1 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -35,12 +35,34 @@
+ <section id="foo">
+ <header>Foo</header>
+ <article>
+ <div class="one"></div>
+ <div class="two"></div>
+ </article>
+ </section>
</div>
</template>
@@ -154,4 +176,106 @@ export default {
.clear {
clear: both;
}
+article {
+ background: #0f0;
+ /*question*/
+ position: relative;
+}
+
+.one {
+ /*question*/
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ background: red;
+ width: 30px;
+ height: 30px;
+}
+
+.two {
+ /*question*/
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background: blue;
+ width: 30px;
+ height: 30px;
+}
+
</style>
s
10年前的解法（original）
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index b1c9159..f7d07e1 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -35,12 +35,34 @@
+ <section id="foo">
+ <header>Foo</header>
+ <article>
+ <div class="one"></div>
+ <div class="two"></div>
+ </article>
+ </section>
</div>
</template>
@@ -154,4 +176,106 @@ export default {
.clear {
clear: both;
}
+article {
+ background: #0f0;
+ /*original*/
+ position: relative;
+ overflow: hidden;
+}
+
+.one {
+ /*original*/
+ position: relative;
+ float: left;
+ margin-top: 10px;
+ margin-left: 10px;
+ background: red;
+ width: 30px;
+ height: 30px;
+}
+
+.two {
+ /*original*/
+ position: relative;
+ float: right;
+ margin-top: 10px;
+ margin-right: 10px;
+ background: blue;
+ width: 30px;
+ height: 30px;
+}
+
</style>
s
grid
https://www.w3schools.com/css/css_grid.asp CSS Grid Layout Module
https://www.w3schools.com/css/css_grid_container.asp CSS Grid Container
https://www.w3schools.com/css/css_grid_item.asp CSS Grid Item
因為10年前瀏覽器CSS佈局沒有grid和flex，我們現在可以用grid和flex
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index b1c9159..f7d07e1 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -35,12 +35,34 @@
+ <section id="foo">
+ <header>Foo</header>
+ <article>
+ <div class="one"></div>
+ <div class="two"></div>
+ </article>
+ </section>
</div>
</template>
@@ -154,4 +176,106 @@ export default {
.clear {
clear: both;
}
+article {
+ background: #0f0;
+ /*grid*/
+ display: grid;
+ grid-template-columns: 30px auto 30px;
+ padding: 10px 10px 0;
+}
+
+.one {
+ /*grid*/
+ height: 30px;
+ background: red;
+ grid-column: 1/2;
+}
+
+.two {
+ /*grid*/
+ height: 30px;
+ background: blue;
+ grid-column: 3/4;
+}
+
</style>
s
display: grid; 讓容器變成grid
grid-template-columns: 30px auto 30px; 行佈局3個grid，第一個寬度30px，第二個自動填充剩餘寬度，第三個寬度30px。必須在這設定grid寬度，在子div的item設置無效
padding: 10px 10px 0; 因為gap不含外圍，所以在容器上設padding
grid-column: 1/2; 設定.one從第1個位置開始到第2個位置結束
grid-column: 3/4; 設定.two從第3個位置開始到第4個位置結束（跳過2/3）
flex（推薦）
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#alignment_and_flex-direction Aligning items in a flex container
https://stackoverflow.com/a/35578723 Giving wrapped flexbox items vertical spacing
https://stackoverflow.com/a/31006659 Align an element to bottom with flexbox
https://stackoverflow.com/a/41440249 Flexbox Two Rows Two Columns
https://stackoverflow.com/a/19027949 Flexbox: center horizontally and vertically
https://stackoverflow.com/a/33049392 How to vertically align text inside a flexbox?
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index b1c9159..f7d07e1 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -35,12 +35,34 @@
+ <section id="foo">
+ <header>Foo</header>
+ <article>
+ <div class="one"></div>
+ <div class="two"></div>
+ </article>
+ </section>
</div>
</template>
@@ -154,4 +176,106 @@ export default {
.clear {
clear: both;
}
+article {
+ background: #0f0;
+ /*flex*/
+ display: flex;
+ justify-content: space-between;
+}
+
+.one {
+ /*flex*/
+ margin-top: 10px;
+ margin-left: 10px;
+ background: red;
+ width: 30px;
+ height: 30px;
+}
+
+.two {
+ /*flex*/
+ margin-top: 10px;
+ margin-right: 10px;
+ background: blue;
+ width: 30px;
+ height: 30px;
+}
+
</style>
s
display: flex; 讓容器變成flex
justify-content: space-between; 可以直接點chrome的Open flexbox editor去調
沒有留言:
張貼留言