这一系列文章主要是关于CSS内容部分,内容包括: CSS选择器API、CSS权重、布局、黏性布局、BFC等内容。如果有哪些地方我写的不对,请大家不吝赐教。如果大家觉得有什么重要的内容我没有提的话,可以告诉我,谢谢。
如何将CSS应用与HTML？
1) 外部样式表 <link rel="stylesheet" href="index.css"> 或者 在CSS中使用 @import url("index.css")
2) 内部样式表 将CSS放在<style></style>HTML内包含的元素<head>中
3) 内联样式 在标签上添加 style 属性,然后在该属性中设置CSS。除非必须需要,否则不要这样做。
CSS(层叠样式表)的特点
CSS(层叠样式表)的特点:
1) css是一门用于指定网页文件如何展示给用户的语言--包括网页的样式,布局等等。
2) CSS是一门基于规则的语言,可以定义网页特定元素样式的规则。
CSS使用时的注意点
1) 给一个元素以百分比设置padding和margin时，它是根据body的宽度计算得出的。
2) 外边距(margin)的值可正可负;内边距(padding)的值必须为0或正的值，否则无效。
3) 可以使用HTML的contenteditable属性来让元素允许编辑。IE5.5支持。
4) 视口(浏览器页面的可见区域)也具有大小。在CSS中，有和视口大小相关的vw单位(视口宽度)和vh单位(视口高度)。1vh等于视口高度的1%。IE9支持。
CSS的顶层样式表规则
一、定义
CSS的顶层样式表规则: CSS的顶层样式表规则由两种规则组成的规则列表构成,一种被称为at-rule,也就是at规则,另一种是qualified rule,也就是普通规则。
二、相关API
at-rule: 该规则是由一个@关键字和后续的一个区块组成的,如果没有区块,则以分号结束。
qualified rule: 该规则是指普通的CSS规则,由选择器和属性指定构成的规则。
at-rule规则的关键字:
1) @charset: 指定样式表中使用的字符编码。它必须是样式表中的第一个元素,且前面不能有任何字符。如果有多个@charset规则被声明,只有第一个会被使用,且不能在HTML元素或HTML页面的<style>元素内的样式属性中使用。浏览器在解析样式表时，在开发人员没有特定设置时，假设文档是UTF-8格式。IE5.5支持。(@charset "UTF-8"; @charset "utf-8";)
2) @import: 用于从其他样式表导入样式规则，@charset规则除外。该规则一定要写在@charset外的任何CSS规则之前,如果位于其他位置将会被浏览器忽略，而且@import之后如果存在其他样式,则@import之后的分号是必须书写的，不可省略。IE5.5支持。(@import url("./index.css");)
3) @media: 媒体查询,可根据一个或多个媒体查询的结果应用样式表的一部分。IE9支持。(@media only screen and (max-width: 1200px) { body {color: red;} })
4) @page: 用于在打印文档时修改某些CSS属性。你不能用@page规则来修改所有的CSS属性，而是只能修改margin,orphans,widow 和 page breaks of the document。对其他属性的修改是无效的。IE8支持。(@page {margin: 10%;})
5) @counter-style: 它让开发者可以自定义counter的样式。 一个 @counter-style规则 定义了如何把一个计数器的值转化为字符串表示。只有firefox33支持。(@counter-style triangle { system: cyclic; symbols: ‣; suffix: " ";})
6) @keyframes: 通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。IE10支持。(@keyframes move { from {top: 50px;} to {top: 0;} })
7) @font-face: 指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载. 如果提供了local()函数，从用户本地查找指定的字体名称，并且找到了一个匹配项, 本地字体就会被使用. 否则, 字体就会使用url()函数下载的资源。IE4支持。( @font-face { font-family: "Open Sans"; src: url ("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff");} )
8) @support:关联了一组嵌套的CSS语句, 由逻辑与,逻辑或,逻辑非组合而成. 这样的条件语句称为支持条件。该语句可以用来做特性查询。只有firefox支持。(@supports (animation-name: test) {/* 如果支持不带前缀的animation-name,则下面指定的CSS会生效 */ @keyframes {}})
9) @viewport: 让我们可以对文档的大小进行设置 viewport。IE10支持。(@viewport {width: 100vw;})
qualified rule: 由一个选择器(selector)开头,后面接着 一对大括号{},在大括号内部定义一个或多个形式为 属性(prototype):值(value); 的声明。值还可以为函数。
参考链接:
MDN上的@charset
MDN上的@charset
MDN上的@page
常见的CSS计算函数
常见的CSS计算函数:
1) calc(): 可以在声明CSS属性值时执行一些计算。IE9支持。(.border { width: calc(100% - 80px); })
2) max(): 用在CSS属性值中,可以从逗号分隔的表达式中取出最大的值来设置。IE、Edge、Firefox都不支持。(.logo {width: max(50vw, 300px);})
3) min(): 用在CSS属性值中,可以从逗号分隔的表达式中取出最小的值来设置。IE、Edge、Firefox都不支持。(.logo {width: min(50vw, 300px);})
4) clamp(): 允许在定义的最小值和最大值之间的值范围内选择中间值。它有三个参数,分别是最小值、首选值、最大允许值。Edge、Firefox、IE、Safari都不支持。(.box {width: clamp(10px, 4em, 80px);} /* 当前em的值如果在10px和80px之间,则宽为4em */)
5) attr(): 用来获取选择到的元素的某一HTML属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。IE8支持。(.msg::before { content: attr(data-word) " "; })
CSS命名规则
1) 类名使用小写字母，以中划线分隔 （.element-content {}）
2) id采用驼峰式命名 （#myDialog {}）
3) scss中的变量、函数、混合采用驼峰式命名 ( @mixin centerBlock {} )
来源: 腾讯AlloyTeam代码书写习惯
CSS特点
1) 在CSS中,属性和值均区分大小写。如果属性未知,或者对于给定属性值无效,则声明被视为无效,并且浏览器的CSS引擎将完全忽略该声明。
2) 与HTML一样,浏览器倾向于忽略CSS内部的大部分空白,大量空白只是为了提高可读性。
3) 浏览器解析CSS时,如果遇到它不理解的属性或值,它将忽略它并继续进行下一个声明。如果拼写了错误的属性或值,或者该属性或值太新并且浏览器尚且不支持它,它将执行此操作。同样，如果浏览器遇到一个无法理解的选择器，它将忽略整个规则并继续执行下一个规则。(如h1, ..test{}将被忽略)
4) CSS的选择器解析的时候是从右到左的,对于浏览器来说,ID选择器是最快的,其次是class选择器、html元素选择器。当有多个选择器时, 如 .layout span {} 会先找到所有的 span 节点,对于每一个span,向上寻找 class="layout" 的节点。
5) CSS的执行顺序是从上到下,在相同权重、相同的规则下,后面的规则覆盖前面的规则。
6) CSS中定义的样式,权重不同时,权重高的决定元素的样式
CSS注释书写方式: /* 这是CSS注释,可以是多行的 */。
CSS权重
一、定义
CSS权重: 权重决定了CSS规则怎样被浏览器解析直到生效。CSS权重是由每个选择器相加计算而来的。
二、基本规则
权重的基本规则:
1) 权重相同时，以后面出现的选择器为最后规则
2) 权重不同时，权重值高则生效
三、权重级别
权重级别:
1) 0 : 通配符选择器(*)的权重0
2) 1 : 一个元素或者伪元素的权重为1，伪元素选择器有::before 、::after 、::first-letter 、::first-line 、::selection等。
3) 10 : 一个属性选择器/class或者伪类的权重为10
4) 100 : 一个ID选择器的权重为100
5) 1000 : 行内样式的权重为1000
6) 最高 : 在样式的属性值后面加上 ##!important## 表示该样式权重最高，只能被后面相同属性且属性值后面带有 ##!important##所覆盖
四、权重计算案例
权重计算案例:
01. *{} ====》0
02. li{} ====》1(一个元素)
03. li:first-line{} ====》2(一个元素，一个伪元素)
04. ul li {} ====》2（两个元素）
05. ul ol+li{} ====》3（三个元素）
06. h1+ *[rel=up] {} ====》11（一个属性选择器，一个 元素）
07. ul ol li.red{} ====》13（一个类，三个元素）
08. li.red.level{} ====》21（两个类，一个元素）
09. style="" ====》1000(一个行内样式)
10. p {} ====》1（一个元素）
11. div p {} ====》2（两个元素）
12. .sith {} ====》10（一个类）
13. div p.sith{} ====》12（一个类，两个元素）
14. #sith{} ====》100（一个ID选择器）
15. body #darkside .sith p {} ====》112(1+100+10+1,一个Id选择器，一个类，两个元素)参考链接:
MDN上的伪元素
你应该知道的一些事情——CSS权重
CSS盒模型
标准盒模型: 盒子的总宽/高 = width/height + margin + padding + border。浏览器默认使用标准盒模型。
怪异(IE)盒模型: 盒子的总宽/高 = width/height + margin。(即width/height已经包含了padding和border值)。如果想要使用怪异盒模型，需要设置.box {box-sizing: border-box;}。
字体大小单位
1) px(像素): 这是一个绝对单位，它导致在任何情况下，页面上的文本所计算出来的像素值都是一样的。
2) em: 1em等于当前元素的父元素上设置的字体的大小。
3) rem: 1rem等于HTML中的根元素的字体大小，而不是父元素的。IE8及以下版本不支持。
处理不同的文字方向
一、定义及模式的API
CSS中的书写模式(writing-mode): 指的是文本是水平放置还是垂直放置。
该writing-mode属性的三个可能值是:
1) horizontal-tb：从上到下的块流动方向。句子水平排列。这是默认情况下。
2) vertical-rl：从右到左的块流动方向。句子垂直排列。
3) vertical-lr：从左到右的块流动方向。句子垂直排列。
上图为水平书写模式下的两种维度(horizontal-tb)
上图为纵向书写模式下的两种维度(vertical-rl、vertical-lr)
以writing-mode的值horizontal-tb为例，在该书写模式下，block为垂直方向，inline为水平方向。
二、相关属性
inline-size: 定义元素块的水平或垂直大小，具体取决于元素的写入模式。它对应于width和height属性，具体取决于写入模式的值。在writing-mode的值为horizontal-tb下是宽的尺寸。IE、Edge都不支持。
block-size: 定义元素块的水平或垂直大小，具体取决于元素的写入模式。它对应于width和height属性，具体取决于写入模式的值。在writing-mode的值为horizontal-tb下是高的尺寸。IE、Edge都不支持。
参见: MDN上的处理不同方向的文本
以上内容如有不对,希望大家指出,谢谢。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。