public:it:css

差别

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

到此差别页面的链接

两侧同时换到之前的修订记录 前一修订版
后一修订版		 前一修订版
public:it:css [2020/12/30 13:11] – oakfirepublic: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 ==== 
 +  * [[https://postcss.org/|postcss.org]] 
 +  * [[https://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/]]
 ==== LESS ==== ==== LESS ====
   * [[http://lesscss.org|lesscss.org]]   * [[http://lesscss.org|lesscss.org]]
行 21: 行 30:
 ==== SCSS ==== ==== SCSS ====
   * [[https://sass-lang.com/|sass-lang.com]]   * [[https://sass-lang.com/|sass-lang.com]]
 +  * 下划线开头的''_name.scss''文件意味着只用来 import, SCSS不对它编译成CSS; import时可省略下划线。
 ===== Tips ===== ===== Tips =====
   * div 水平居中:''margin:0 auto''   * div 水平居中:''margin:0 auto''
行 51: 行 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]]. 
  
行 96: 行 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.1609305093.txt.gz
  • 最后更改: 2020/12/30 13:11
  • 由 oakfire