差别

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

--- public:it:css [2015/12/19 10:22] – [Selector] 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>
 ====== Cascading Style Sheets ======
   * [[wp>Cascading_Style_Sheets]]
@@ 行 4: / 行 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]]
-===== LESS =====
+===== 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效果。
+  * [[http://cssicon.space/|css icon]]: 使用 CSS 绘制常用图标。
+===== Libs =====
+  * [[http://necolas.github.io/normalize.css/|normalize.css]]
+==== PostCSS ====
+  * [[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''不起作用
+  * 层级: ''z-index'' 对''static''不起作用；更具体的[[http://blog.joak.org/ppt/csszindex.html|看我的 ppt]].关键词 <wrap hi>stacking context</wrap>.
-  * 溢出: ''overflow:hidden''
+  * 子元素溢出隐藏，在父元素设置: ''overflow:hidden'';
+  * ''max-height''与''overflow:auto'' 配合可在元素内容过高时才出现滚动条
   * 子块元素的''margin-top''影响了父级元素的''margin-top'', 可以在父级元素使用''overflow:hidden''来避免.
   * float 的元素影响兄弟 float 元素与兄弟 inline 元素的定位, 但不影响非 float 的兄弟块级元素的定位; float 最好需要指定宽度;[[https://css-tricks.com/all-about-floats/|All about floats]]
@@ 行 20: / 行 48: @@
 </code>
   * 目前至少ios7 ios8 android4 的css transform 还需要用 ''-webkit-transform ''
+  * ''cursor''可直接指定鼠标在范围内的样式
+  * div 子元素有 absolute 元素，会影响div的默认宽度，可直接指定 div 的宽度为 100%, 或者 ''width: 80%; margin-left: auto; marin-right: auto;''
+  * 让链接标签不跳转可以这样设置：<code html><a href="javascript: void(0);"></a></code>
@@ 行 26: / 行 57: @@
   * [[http://www.w3.org/TR/css3-selectors/ | W3C CSS 3 selector]]
   * '':before'','':after'': [[https://developer.mozilla.org/en-US/docs/Web/CSS/::before| MDN doc]]
-  * [[https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements | Pseudo-elements]], '':first-child'', '':last-child'', ''only-child'' 这几个太好用了.
+  * [[https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements | Pseudo-elements]], '':first-child'', '':last-child'', '':only-child'' 这几个太好用了.
 ==== css3 media queries ====
   * 响应式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]].
@@ 行 75: / 行 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.标签， 三组数量按奥运会金银铜奖牌板的方式排序，来决定优先级。