差别

这里会显示出您选择的修订版和当前版本之间的差别。

--- public:it:css [2017/01/04 10:53] – [Tools] oakfire
+++ public:it:css [2021/12/02 13:32] (当前版本) – oakfire
@@ 行 1: / 行 1: @@
 <WRAP center round important 60%>
 注意, css 的诞生最早是为了适应富文本的流式布局, 至今遗留了很多流式风格的布局性质.使用时详查文档,不可类比桌面UI布局而想当然
+</WRAP>
+<WRAP center round important 60%>
+坑： border-radius 设置为纯数字时，不被 chrome 接受，而 vscode, scss 等开发工具链也没有对此进行报错提示。
 </WRAP>
@@ 行 9: / 行 12: @@
   * [[http://www.w3.org/TR/CSS21/|W3C CSS 2.1]]
   * [[http://www.w3.org/Style/CSS/current-work.en.html|W3C CSS 3 current work]]
+===== Flex =====
+  * [[https://www.w3.org/TR/css-flexbox-1/|CSS flexbox]]
+  * [[https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout|MDN: css flexible box layout]]
+  * [[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html|Flex 布局教程-阮一峰]]
 ===== Tools =====
   * [[http://cssreference.io/]]: 超好用，直接图像示例展示css效果。
@@ 行 15: / 行 22: @@
 ===== Libs =====
   * [[http://necolas.github.io/normalize.css/|normalize.css]]
+==== PostCSS ====
-===== LESS =====
+  * [[https://postcss.org/|postcss.org]]
+  * [[https://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/]]
+==== LESS ====
   * [[http://lesscss.org|lesscss.org]]
   * [[http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/|]]
+==== SCSS ====
+  * [[https://sass-lang.com/|sass-lang.com]]
+  * 下划线开头的''_name.scss''文件意味着只用来 import, SCSS不对它编译成CSS; import时可省略下划线。
 ===== Tips =====
   * div 水平居中:''margin:0 auto''
+    * Fixed 的元素居中则要这样设置:<code css>width:600px; height:50px; position:fixed; margin:auto; top:0; left:0; right:0; </code>
+    * Fixed 元素也可以这样: <code css>position:fixed; top:50%; left: 50%;
+width:600px; height:50px; margin-left: -300px; margin-top: -25px; </code>
   * 文字垂直居中简单做法:在父级块元素让 ''height'' 与 ''line-height'' 相同
-  * 层级: ''z-index'' 对''static''不起作用；更具体的[[http://blog.joak.org/ppt/csszindex.html|看我的 ppt]].关键词 ''stacking context''.
+  * 层级: ''z-index'' 对''static''不起作用；更具体的[[http://blog.joak.org/ppt/csszindex.html|看我的 ppt]].关键词 <wrap hi>stacking context</wrap>.
   * 子元素溢出隐藏，在父元素设置: ''overflow:hidden'';
   * ''max-height''与''overflow:auto'' 配合可在元素内容过高时才出现滚动条
@@ 行 35: / 行 50: @@
   * ''cursor''可直接指定鼠标在范围内的样式
   * div 子元素有 absolute 元素，会影响div的默认宽度，可直接指定 div 的宽度为 100%, 或者 ''width: 80%; margin-left: auto; marin-right: auto;''
+  * 让链接标签不跳转可以这样设置：<code html><a href="javascript: void(0);"></a></code>
@@ 行 45: / 行 61: @@
   * 响应式css: 适应不同分辨率终端.
 ====  Calculating a selector's specificity ====
+详见[[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity|MDN]]
 Copy from [[http://www.w3.org/TR/css3-selectors/ | W3C CSS 3 selector]].
@@ 行 90: / 行 108: @@
 ===== tips =====
 <WRAP center round tip 90%>
-CSS选择器优先级：
+CSS选择器优先级：详见[[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity|MDN]]
   * 浏览器用户设置 > 浏览器内置 > 网页行内style > 非行内style
   * css选择器的优先，分三组计算次数1.ID, 2.类、伪类、属性, 3.标签， 三组数量按奥运会金银铜奖牌板的方式排序，来决定优先级。