[TOC] # [定义好类名](http://www.w3cplus.com/css/css-sass-scss-compass-less-bem-smacss-oocss-acss-ccss-wtfss.html) 阅读这些不同的框架和方法，可以让你更好的如何定义类名。它也让我意识到，我这么多年都是草率的在写CSS。 今年我打算使用 SMACSS，OOCSS 和 BEM 这些方法来写CSS，并且让自己元素的命名与Bootstrap框架中常用组件保持更紧密的结合，比如说按钮，警告信息，表单元素等。 我最近就是按种思维方式在调自己的框架，其中包括如何组织CSS文件： 1. 让团队写CSS有一个标准规范——Harry Roberts写了一个很有名的[CSS指南](https://cssguidelin.es/) 2. JavaScript钩子是使用的类名，尽量加上前缀`js-` 3. 在样式中避免使用`#id` # css选择器的优先权  CSS 优先级法则： 1. 选择器都有一个权值，权值越大越优先； 2. 当权值相等时，后出现的样式表设置要优于先出现的样式表设置； 3. 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式； 4. 继承的CSS 样式不如后来指定的CSS 样式； 5. 在同一组属性设置中标有 `!important` 规则的优先级最大； # CSS 基础笔记 [CSS 基础布局](https://www.jianshu.com/p/602f0872a9b5)  > [CSS盒模型:提高你的CSS的基础](http://www.instantshift.com/2009/11/16/css-box-model-the-foundation-for-improving-your-css/) # box-sizing 语法： ~~~ box-sizing: content-box|border-box|inherit; ~~~ | 值 | 描述 | | --- | --- | | content-box | 此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度 /高度（content width/height）即：Element Width/Height = border+padding+content width/height。 | | border-box | 此值让元素维持IE传统的Box Model（IE6以下版本），也就是说元素的宽度/高度等于元素内容的宽度/高度。<br>从上面Box Model介绍可知，我们这里的content width/height包含了元素的border、padding、内容的width/height【此处的内容宽度/高度=width /height-border-padding】。 | | inherit | 规定应从父元素继承 box-sizing 属性的值。 | ## W3C 的标准Box Model: 1. 外盒尺寸计算（元素空间尺寸）： 元素空间高度 = content height + padding + border + margin （height 为内容高度） 元素空间宽度 = content width + padding + border + margin （width 为内容宽度） 2. 内盒尺寸计算（元素大小）： 元素高度= content height + padding + border 元素宽度= content width + padding + border ## IE 传统下 Box Model（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）: 1. 外盒尺寸计算（元素空间尺寸）： 元素空间高度 = content Height + margin（height 包含了元素内容 width，padding，border） 元素空间宽度 = content Width + margin（width 包含了元素内容 width，padding，border） 2. 内盒尺寸计算（元素大小）： 元素高度 = content Height 元素宽度 = content Width IE 怪异模式下的盒模型才符合我们传统认识里的盒子，这样会更加直观一些，不用再做一层转换。 # 为什么我的`vertical-align`属性不起作用？ vertical-align属性只会在 inline-block（table-cell也可以理解为inline-block水平）水平的元素上起作用。所以，类似下面的代码就不会起作用： ```css div{vertical-align:middle;} ``` 所谓`inline-block`水平的元素，就是既可以“吸”又可以“咬”的元素，既可以与`inline`水平元素混排，又能设置高宽属性的元素。哪些元素呢，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。 虽然`vertical-align`属性只会在`inline-block`（`table-cell`也可以理解为`inline-block`水平）水平的元素上起作用，但是其影响到的元素涉及到`inline`属性的元素，这里千万记住，inline 水平元素受`vertical-align`属性而位置改变等不是因为其对`vertical-align`属性敏感或起作用，而是受制于整个 line box 的变化而不得不变化的，这个后面会较为深入的分析。 # line boxes 模型 先看下面一段普通的HTML代码： ```html <p>这是一行普通的文字，这里有个 <em>em</em> 标签。</p> ``` 这段HTML代码涉及到4种boxes： 1. 首先是p标签所在的**containing box**，此box包含了其他的boxes； 2. 然后就是**inline boxes**，如下图标注:  inline boxes不会让内容成块显示，而是排成一行，如果外部含inline属性的标签(span,a,cite等)，则属于inline boxes，如果是个光秃秃的文字，则属于匿名inline boxes。 3. **line boxes**，见下图的标注：  在containing boxes里，一个一个的inline box组成了line boxes。这是浮动影响布局的关键box类型，下面会详细阐述。 4. **content area**，见下图标注：  content area 是一种围绕文字看不见的box。content area的大小与font-size大小相关。 > [理解 inline 元素的盒模型](https://www.jianshu.com/p/468bddc9e568) # CSS background 的简写 ``` background: [background-image] [background-position] / [background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color]; ``` 其中， * `<bg-size>`必需紧跟`<position>`后且以`/`分隔，开如`center/80%`。 * `<background-color>`只在最后一层中进行书写和使用。 > [CSS background 的简写](https://wayou.github.io/2019/12/14/CSS-background-%E7%9A%84%E7%AE%80%E5%86%99/) # 浮动的原始意义是什么？ 浮动出现的意义其实**只是用来让文字环绕图片而已**，仅此而已。而我们目前用浮动实现页面布局本不是浮动该干的事情。 浮动破坏了图片的inline box，产生了两个结果：一是图片无法与文字同行显示，脱离了其原来所在的line box链；二是没有了高度（无inline box -> 无line box -> 无高度）。而这些结果恰恰是文字环绕图片显示所必须的。 # CSS模型高度 在目前的CSS的世界中，所有的高度都是有两个CSS模型产生的： 1. 一个是**box盒状模型**，对应CSS为”height+padding+margin”； 前者的height属性分为明显的height值和隐藏的height值，所谓隐藏的height值是指图片的高度，一旦载入一张图片，其内在的height值就会起作用，即使您看不到”height”这个词。 2. 另外一个是**line box模型**，对应样式为”line-height”。 而后者针对于文字等这类inline boxes的元素（图片也属于inline boxes，但其height比line-height作用更凶猛，故其inline boxes高度等于其自身高度，对line-height无反应），inline boxes的高度直接受line-height控制（改变line-height文字拉开或重叠就是这个原因），而真正的高度表现则是由每行众多的inline boxes组成的line boxes（等于内部最高的inline box的高度），而这些line boxes的高度垂直堆叠形成了containing box的高度，也就是我们见到的div或是p标签之类的高度了。 对于line box模型的元素而言，没有inline boxes，就没有高度了，而浮动却恰恰做了这么龌龊的事情，其直接将元素的inline boxes也破坏了，于是这些元素也就没有了高度。 # 滚动条从哪里来？ 原因是： html { overflow:auto;} 是默认的。 如果不设置html height怎么会有滚动条，原来html有点特殊，它的widht和height是由浏览器窗口控制的。  # 设置html,body高度100%的作用 几乎所有的浏览器，默认的偏移`margin`是在body元素上，而不是html的`padding`.（通过做实验确实如此）有些还是body的padding，所有重置页边距用`body{margin:0;padding:0}`缺一不可。 在标准模式下，也就是网页头部写`DOCTYPE`的时候，**body不是html页面的根元素，html才是根元素**，如果仅仅设置body的100%，不设置html元素的高度为100%，那么body的高度不会生效，之所以不生效，是因为**如果要以百分比设置元素的尺寸，必要以父元素的尺寸作为参考，如果父元素没有设置尺寸，自然不会生效**。 在标准模式下，由于没有设置html的高度，所以body的高度100%就没有参考高度，于是也就导致div的百分比高度无效，所以需要设置为： ```css html,body{ height:100%; } ``` > [由html,body{height:100%}引发的对html和body的思考](http://blog.csdn.net/javaloveiphone/article/details/51098972) # 伪类与伪元素 下面是根据用途分类的伪类总结图和根据冒号分类的伪元素总结图：   就像 pseudo classes (伪类)一样， 伪元素添加到选择器，但不是描述特殊状态，它们允许您**为元素的某些部分**设置样式。 # 为什么不建议使用css @import 我们确实要避免使用css @import， 原因：是这样做会**导致css无法并行下载**，因为使用@import引用的文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建`render tree`等一系列操作。浏览器在页面所有css下载并解析完成后才会开始渲染页面（Before a browser can begin to render a web page, it mustdownload and parse any stylesheets that are required to lay out thepage. Even if a stylesheet is in an external file that is cached,rendering is blocked until the browser loads the stylesheet from disk.），**因此 css @import 引起的 css 解析延迟会加长页面留白期。 所以，要尽量避免使用 css @import 而尽量采用 link 标签的方式引入**。 # 边框 ## border-radius 规范描述： `border - * - radius`属性的两个长度或百分比值定义了四分之一椭圆的半径，其定义外边界边缘的角的形状（请参见下图）。 提供2个参数，2个参数以 `/` 分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数。 如果任一长度为零，则角是正方形，而不是圆角。 水平半径的百分比是指边框的宽度，而垂直半径的百分比是指边框的高度。不允许使用负值。  'border-top-left-radius：55pt（水平半径） 25pt（垂直半径）'的两个值定义角的曲率。 示例： ~~~ border-radius: 2em 1em 4em / 0.5em 3em; is equivalent to： border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em; ~~~ > 来自 W3C规范： [https://www.w3.org/TR/css3-border/#border-radius](https://www.w3.org/TR/css3-border/#border-radius) ## border-image [http://www.cnblogs.com/MuYunyun/p/5693615.html#\_label10](http://www.cnblogs.com/MuYunyun/p/5693615.html#_label10) # clip-path 在 clip-path 出现之前，CSS2.1 中的 clip 属性也有裁剪的效果，但是它只支持矩形，而且只对 position:absolute 或者 position:fixed 的元素生效，使用方式如下： ~~~ copyclip: rect(60px, 60px, 60px, 60px); // 标准写法 clip: rect(60px 60px 60px 60px); // 兼容 ie 及 火狐浏览器 复制代码 ~~~ 注意: rect 参数的顺序为 top、right、botton、left 所有主流浏览器都支持 clip 属性，在雪碧图（ CSS Sprite ）的展示仍然有它的用武之地，但是**由于 clip 属性的局限性， clip 已经被 clip-path 代替**。