diff --git a/README.md b/README.md index 1a32122..2388d99 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,7 @@ * 基础 * [前端工具](share/front-tools.md) * [认识 HTML](share/html.md) + * [checkbox 的四种状态](share/checkbox-state.md) * [神奇的 CSS](share/amazing-css.md) * [`px` vs `em` vs `rem`](share/px-em-rem.md) * [SASS](share/sass.md) @@ -51,4 +52,6 @@ * [HTML meta](share/html-meta.md) * WebSocket * HTML viewport + * JavaScript |、||、&、&& + * 如何制作 0.5 像素的细线 diff --git a/frontend-book.sketch b/frontend-book.sketch index 7a0dac1..f81e512 100644 Binary files a/frontend-book.sketch and b/frontend-book.sketch differ diff --git a/resources/images/checkbox-state.png b/resources/images/checkbox-state.png new file mode 100644 index 0000000..e3c5130 Binary files /dev/null and b/resources/images/checkbox-state.png differ diff --git a/share/checkbox-state.md b/share/checkbox-state.md new file mode 100644 index 0000000..faa617c --- /dev/null +++ b/share/checkbox-state.md @@ -0,0 +1,26 @@ +# checkbox 的四种状态 +checkbox 是 HTML 中非常常用的控件,它可以作为多选控件,很多开发人员知道它有三种状态:`checked`、`unchecked`、`disabled`,其实它还有第四种鲜为人知的状态`indeterminate`。 + +## indeterminate +`indeterminate`属性用来表示 checkbox 元素的状态为**不确定**,不同的平台和浏览器对于这种状态的显示不一样,在 Chrome 下为一个横杠,在 Firefox 下为实心正方形: + +![checkbox](../resources/images/checkbox-state.png) + +## 设置 indeterminate 状态 +`checked`、`unchecked`、`disabled`可以通过 HTML 属性直接设置,但是`indeterminate`只能通过 JavaScript 来设置: + +``` +document.getElementById("ckb").indeterminate = true; +``` + +## indeterminate CSS 伪类 +类似于`:checked`和`:unchecked`伪类,我们也可以使用`:indeterminate`伪类进行对不确定状态的 checkbox 的选取: + +``` +checkbox:indeterminate { + +} +``` + + + diff --git a/share/grunt.md b/share/grunt.md index cf28bf1..9ff924f 100644 --- a/share/grunt.md +++ b/share/grunt.md @@ -112,6 +112,7 @@ grunt copy:taskA * 静态资源文件版本:grunt-rev * 任务运行时间插件:time-grunt * 加载 Grunt 插件:load-grunt-tasks +* 自动添加样式前缀:grunt-autoprefixer * ... ## 集成到 Sublime diff --git a/share/px-em-rem.md b/share/px-em-rem.md index 181342d..b2a3cbf 100644 --- a/share/px-em-rem.md +++ b/share/px-em-rem.md @@ -1,4 +1,4 @@ -# px、em、rem +# px vs em vs rem `px`、`em`和`rem`都是网页设计中的长度单位。`px`是最常用的单位,它是 Pixel 的缩写代表像素,它是计算机图像显示的最小单位;`em`(font size of the element)它是一个相对大小的单位,它的大小会相对于它的父级元素的字体大小;`rem`(font size of the root element)它也是一个相对大小的单位,但是它相对于根元素字体的大小; ## px