public:it:css

差别

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

到此差别页面的链接

两侧同时换到之前的修订记录 前一修订版
后一修订版		 前一修订版
public:it:css [2018/02/28 13:48] – 外部编辑 127.0.0.1public:it:css [2021/12/02 13:32] (当前版本) – oakfire
行 1: 行 1:
 <WRAP center round important 60%> <WRAP center round important 60%>
 注意, css 的诞生最早是为了适应富文本的流式布局, 至今遗留了很多流式风格的布局性质.使用时详查文档,不可类比桌面UI布局而想当然  注意, css 的诞生最早是为了适应富文本的流式布局, 至今遗留了很多流式风格的布局性质.使用时详查文档,不可类比桌面UI布局而想当然 
 +</WRAP>
 +<WRAP center round important 60%>
 +坑： border-radius 设置为纯数字时，不被 chrome 接受，而 vscode, scss 等开发工具链也没有对此进行报错提示。
 </WRAP> </WRAP>
  
行 9: 行 12:
   * [[http://www.w3.org/TR/CSS21/|W3C CSS 2.1]]   * [[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]]   * [[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 ===== ===== Tools =====
   * [[http://cssreference.io/]]: 超好用，直接图像示例展示css效果。   * [[http://cssreference.io/]]: 超好用，直接图像示例展示css效果。
行 15: 行 22:
 ===== Libs ===== ===== Libs =====
   * [[http://necolas.github.io/normalize.css/|normalize.css]]   * [[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://lesscss.org|lesscss.org]]
   * [[http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/|]]   * [[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 ===== ===== Tips =====
   * div 水平居中:''margin:0 auto''   * 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>width:600px; height:50px; position:fixed; margin:auto; top:0; left:0; right:0; </code>
-    * Fixed 元素也可以这样: <code>width:600px; height:50px; position:fixed;  top:0; left: 50px; margin-left: -300px;</code> +    * Fixed 元素也可以这样: <code css>position:fixed; top:50%; left: 50%;  
 +width:600px; height:50px; margin-left: -300px; margin-top: -25px; </code> 
   * 文字垂直居中简单做法:在父级块元素让 ''height'' 与 ''line-height'' 相同   * 文字垂直居中简单做法:在父级块元素让 ''height'' 与 ''line-height'' 相同
   * 层级: ''z-index'' 对''static''不起作用；更具体的[[http://blog.joak.org/ppt/csszindex.html|看我的 ppt]].关键词 <wrap hi>stacking context</wrap>.   * 层级: ''z-index'' 对''static''不起作用；更具体的[[http://blog.joak.org/ppt/csszindex.html|看我的 ppt]].关键词 <wrap hi>stacking context</wrap>.
行 48: 行 61:
   * 响应式css: 适应不同分辨率终端.   * 响应式css: 适应不同分辨率终端.
 ====  Calculating a selector's specificity ==== ====  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]].  Copy from [[http://www.w3.org/TR/css3-selectors/ | W3C CSS 3 selector]]. 
  
行 93: 行 108:
 ===== tips ===== ===== tips =====
 <WRAP center round tip 90%> <WRAP center round tip 90%>
-CSS选择器优先级：+CSS选择器优先级：详见[[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity|MDN]]
   * 浏览器用户设置 > 浏览器内置 > 网页行内style > 非行内style   * 浏览器用户设置 > 浏览器内置 > 网页行内style > 非行内style
   * css选择器的优先，分三组计算次数1.ID, 2.类、伪类、属性, 3.标签， 三组数量按奥运会金银铜奖牌板的方式排序，来决定优先级。   * css选择器的优先，分三组计算次数1.ID, 2.类、伪类、属性, 3.标签， 三组数量按奥运会金银铜奖牌板的方式排序，来决定优先级。
  • public/it/css.1519796929.txt.gz
  • 最后更改: 2018/02/28 13:48
  • 由 127.0.0.1