用AI赚第一桶💰低成本搭建一套AI赚钱工具,源码可二开。 广告
[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选择器的优先权 ![选择器的优先权](https://box.kancloud.cn/35d0d2e17e7add7714ae81316bd89646_535x135.png) CSS 优先级法则: 1. 选择器都有一个权值,权值越大越优先; 2. 当权值相等时,后出现的样式表设置要优于先出现的样式表设置; 3. 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式; 4. 继承的CSS 样式不如后来指定的CSS 样式; 5. 在同一组属性设置中标有 `!important` 规则的优先级最大; # CSS 基础笔记 [CSS 基础布局](https://www.jianshu.com/p/602f0872a9b5) ![](https://box.kancloud.cn/2016-03-10_56e0d62eb1070.png) > [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**,如下图标注: ![](https://box.kancloud.cn/fefc5915c919e70ed89bf0ca3ac71faa_344x105.png) inline boxes不会让内容成块显示,而是排成一行,如果外部含inline属性的标签(span,a,cite等),则属于inline boxes,如果是个光秃秃的文字,则属于匿名inline boxes。 3. **line boxes**,见下图的标注: ![](https://box.kancloud.cn/4cbd04b6a4e58f0cc9ee3fe5ede75498_312x88.png) 在containing boxes里,一个一个的inline box组成了line boxes。这是浮动影响布局的关键box类型,下面会详细阐述。 4. **content area**,见下图标注: ![](https://box.kancloud.cn/67247e4e8610166be637844bae04ce1c_338x116.png) 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是由浏览器窗口控制的。 ![Mommy, Where Do Scrollbars Come From?](https://box.kancloud.cn/744acfc097486b6caaa6435c7b8ebf1d_300x483.png) # 设置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](https://box.kancloud.cn/ad1d4ff407c008020954520b06f1a91d_594x537.png) ![pseudo-elements](https://box.kancloud.cn/d2bde022f565f0927b8fa5cf7765203c_491x212.png) 就像 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个参数。 如果任一长度为零,则角是正方形,而不是圆角。 水平半径的百分比是指边框的宽度,而垂直半径的百分比是指边框的高度。不允许使用负值。 ![](https://box.kancloud.cn/ddd31fd0ee4d423113fd82ed8bce8602_289x179.png) '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 代替**。