共计 10039 个字符，预计需要花费 26 分钟才能阅读完成。
CSS 规定
蕴含选择器和申明块
选择器：选中元素
1. 元素选择器（h1,p,a,span...）2. id 选择器（# 选择器名称）惟一的 在 html 中的写法：id= 选择器名
3. 类选择器（. 选择器名称）在 html 中的写法：class= 选择器名
申明块：呈现在大括号中
申明块中含多个申明，申明以分号完结
每一个申明表白了某一方面的款式（如：背景色彩，字体色彩等属性）增加款式的办法
1. 外部样式表（在 head 外面插入 style 标签）2. 内部样式表（在 head 外面应用 link 标签插入 css 文件链接（相应属性写在此独立文件中））3. 内联样式表（在 html 中的各个标签中写 style 的相应属性）举荐用第二种，起因：1. 能够解决多个页面款式反复的问题
2. 有利于浏览器缓存，从而进步页面响应速度
3. 有利于把 html 和 css 代码拆散，更容易浏览和保护
CSS 常见的款式申明
1. color：元素外部的文字色彩（预设值（定义好的单词），三原色（红绿蓝，每个色彩用 0 -255 之间的数字来表白））rgb 表示法：rgb(红, 绿, 蓝)
十六进制表示法：# 红绿蓝
2. background-color：元素背景色彩
3. font-size：元素外部文字的尺寸大小
单位：px（像素）相对单位
em 绝对单位（绝对于父元素的字体大小）每个元素必须有字体大小，若没有申明，则应用父元素的字体大小。若没有父元素（html），则应用基准字号。4. font-weight：文字粗细水平，可取值数字，可取值为预设值。5. font-family：文字类型（用户计算机中存在的字体才会失效）个别应用多个字体来匹配不同环境
6. font-style：字体款式，通常设置为斜体。i 元素：默认款式，斜体字体。理论应用中，通常用它示意图标（icon）7. strong,em：默认加粗
8. text-decoration：文本润饰，给文本加线
a 元素，del 元素和 s 元素默认自带线
9. text-indent：首行文本缩进
10. line-height：每行文本的高度（该值越大，每行文本的间隔越大）设置行高为容器的高度，可让单行文本垂直居中。行高可设置为纯数字，示意绝对于以后元素的字体大小（举荐应用）11. width：宽度
12. height：高度
13. letter-space：文字间隙
14. text-align：元素外部文字的程度排列形式
选择器
帮忙你精确的选中想要的元素
简略选择器：1. id 选择器
2. 元素选择器
3. 类选择器
4. 通配符选择器（*）5. 属性选择器（[属性]）6. 伪类选择器（选中某些元素的某种状态，如:hover（鼠标悬停状态）,:active（激活状态，鼠标按下状态）,:link（超链接未拜访时的状态），:visited（超链接拜访过的状态））若同时都写上，则书写程序为：link,visited,hover,active（记忆：love hated）7. 伪元素选择器（::before,::after,...）xxx::before{content:'xxx'}
选择器的组合：1. 后辈元素 -- 空格
2. 并且
3. 子元素 -- >
4. 相邻兄弟元素 -- +
5. 前面呈现的所有兄弟元素 -- ~
选择器的并列：多个选择器，用逗号分隔（语法糖）无关层叠问题
层叠：解决申明抵触的过程（浏览器主动解决（权重计算））（申明抵触：同一个款式屡次利用到同一个元素）解决过程：1. 比拟重要性（重要性从高到低：作者样式表中的!important 款式。作者样式表的一般款式。浏览器默认样式表中的款式。）2. 比拟特殊性（总体规定：选择器选中的范畴越窄越非凡。具体规定：通过选择器计算出一个 4 位数（千位：如果是内联款式则计为 1，否则计为 0。百位：等于选择器中所有 id 选择器的数量。十位：等于选择器中所有类选择器，属性选择器，伪类选择器的数量。个位：等于选择器中所有元素选择器，伪元素选择器的数量。））3. 比拟源秩序（代码书写靠后的）利用：1. 重置样式表（书写一些作者款式，笼罩浏览器的默认款式）常见的重置样式表：normalize.css，reset.css，meyer.css
无关继承问题
子元素继承父元素的某些 css 属性
通常，跟文字内容相干的属性都能被继承
属性值的计算过程
一个元素一个元素顺次渲染，程序依照页面文档的树形目录构造进行
渲染每个元素的前提条件：该元素的所有 css 属性必须有值
属性值计算过程：一个元素从所有属性都没有值，到所有的属性都有值
过程的四个步骤：1. 确定申明值：参考样式表中没有抵触的申明，作为 css 属性
2. 层叠抵触：对样式表有抵触的申明应用层叠规定（比拟重要性，特殊性，源秩序），确定 css 属性值
3. 应用继承：对依然没有值的属性，若能够继承，则继承父元素的值
4. 应用默认值：对依然没有值的属性，应用默认值
e.g：<div><a></a><p></p></div>
div{color:red}
a 在参考样式表（浏览器默认样式表）中有申明了，所以 a 元素没有变为红色。而 p 没有申明，则继承了 div 的 color 属性，变为红色。非凡的两个 css 取值：inherit（手动继承，将父元素的值取出利用到该元素）initial（初始值，将该属性设置为默认值）盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）盒子类型：1. 行盒（display 等于 inline 的元素）2. 块盒（display 等于 block 的元素）行盒在页面中不换行，块盒独占一行
常见的块盒：容器元素，h1~h6，p...
常见的行盒：span，a，img，video...
盒子的组成部分：无论是行盒还是块盒，都由上面几个局部组成
从内到外别离是：1. 内容（content）：width，height，设置的是盒子内容的宽高（内容区 = 内容盒）2. 填充（paddig）：padding-left/right/top/bottom，设置的是盒子边框到盒子内容的间隔（填充区 + 内容区 = 填充盒）3. 边框（border）：边框款式（border-style）+ 边框宽度（border-width）+ 边框色彩（border-color）（边框 + 填充区 + 内容区 = 边框盒）4. 外边距（margin）：margin-left/right/top/bottom，设置的是边框到其余盒子的间隔
盒模型利用：扭转宽高范畴：默认状况下，width 和 height 设置的是内容盒宽高
CSS3 有个 box-sizing 属性
box-sizing:border-box（扭转宽高的影响）背景覆盖范围：默认状况下，背景笼罩边框盒
可通过 background-clip 进行批改
溢出解决：overflow 管制内容溢出边框盒后的解决形式
断词规定：word-break 会影响文字在什么地位被截断换行
空白解决（单行文本溢出局部打点）：white-space:no-wrap
overflow:hidden
text-overflow:ellipsis
行盒盒模型：常见行盒：蕴含具体内容的元素（span，strong，em，i...）特点：1. 盒子沿着内容延长。2. 行盒不能设置宽高。调整行盒的宽高，应应用字体的大小，行高，字体类型，间接调整。3. 内边距（填充区）程度方向无效，垂直方向不会理论占据空间。4. 边框
程度方向无效，垂直方向不会理论占据空间。5. 外边距
程度方向无效，垂直方向不会理论占据空间。行块盒：display：inline-block
特点：不独占一行
盒模型中所有尺寸都无效
空白折叠产生在行盒（行块盒）外部或行盒（行块盒）之间
可替换元素和非可替换元素：非可替换元素：大部分元素，页面上显示的后果取决于元素内容。可替换元素：少部分元素，页面上显示的后果取决于元素属性。（img，video，audio...）（绝大部分可替换元素均为行盒。可替换元素相似于行块盒，盒模型中所有尺寸都无效）块盒：每个块盒的总宽度必须刚好等于蕴含块的宽度
宽度默认值是 auto
margin 的取值也能够是 auto，默认值为 0
auto：将残余空间排汇掉
width 吸收能力强于 margin
若宽度，边框，内边距计算后依然有残余空间，该残余空间被 margin-right 全副排汇
每个块盒垂直方向上的 auto 值：height:auto（适应内容的高度）margin:auto（示意 0）百分比取值：padding，宽，margin 能够取值为百分比
所有百分比绝对于蕴含块的宽度
高度百分比：蕴含块的高度是否取决于子元素的高度，设置百分比有效
蕴含块的高度不取决于子元素的高度，百分比绝对于父元素的高度
高低外边距的合并：两个惯例流块盒，高低外边距相邻，会进行合并
两个外边距取最大值
惯例流
盒模型：规定单个盒子的规定
视觉格式化模型：页面中多个盒子排列规定
视觉格式化模型大体将页面中盒子的排列分为 3 种形式：1. 惯例流
2. 浮动
3. 定位
惯例流（文档流，一般文档流，惯例文档流）布局：所有元素默认状况下都属于惯例流布局
总体规定：块盒独占一行，行盒程度顺次排列
蕴含块（containing block）：每个盒子都有它的蕴含块，蕴含块决定了盒子的排列区域。绝大部分状况下：盒子的蕴含块为其父元素的内容盒
在惯例流中，块盒在其蕴含块中居中，能够定宽，而后左右 margin 设置为 auto
浮动：利用场景：文字盘绕，横向排列
根本特点：批改 float 属性值为：left（左浮动，元素靠上靠左）right（右挪动，元素靠上靠右）默认为 none
当一个元素浮动时，元素必然为块盒（会更改 display 属性为 block）浮动元素的蕴含块和惯例流一样，为父元素的内容盒
盒子尺寸：宽度为 auto 时，示意适应内容宽度
高度为 auto 时，示意适应内容高度
margin 为 auto 时，为 0
边框，内边距，百分比设置与惯例流一样
盒子排列：左浮动的盒子靠左排列
右浮动的盒子靠右排列
浮动盒子在蕴含块中排列时，会避开惯例流盒子
惯例流块盒在排列时，忽视浮动盒子
行盒在排列时，会避开浮动盒子
外边距合并不会产生
若文字没有在行盒中，浏览器会主动生成一个行盒包裹文字，该行盒叫做匿名行盒
高度坍塌造成的起因：惯例流盒子的主动高度，在计算时，不会思考浮动盒子
解决形式：革除浮动（波及 css 属性 clear）.clearfix::after{content:''; display:block; clear:both}
浮动的一些细节：浮动盒子的顶边不得高于上一个盒子的顶边
若残余无奈放下浮动盒子，则该盒子向下挪动，直到具备足够的空间能包容盒子，而后再向左或向右挪动
定位：手动管制元素在蕴含块中的精准地位（波及 css 属性 position）position 取值：static（默认值）relative（绝对定位）absolute（相对定位）fixed（固定定位）定位元素会脱离文档流（绝对定位除外）一个脱离了文档流的元素：文档流中的元素摆放时，会疏忽脱离了文档流的元素
文档流中元素计算主动高度时，会疏忽脱离了文档流的元素
绝对定位：不会导致元素脱离文档流，只是让元素在原来地位上进行偏移（盒子的偏移不会影响其余盒子）相对定位：宽高为 auto 时，适应内容
蕴含块变动：找先人元素中第一个定位元素，该元素的填充盒为其蕴含块。若找不到，则其蕴含块为整个网页（初始化蕴含块）固定定位：其余状况和相对定位齐全一样，而蕴含块不一样（固定为视口（浏览器的可视窗口））定位下的居中（次要是相对定位和固定定位）：定宽（高）将左右（高低）间隔设置为 0
将左右（高低）margin 设置为 auto
相对定位，固定定位元素肯定是块盒
相对定位，固定定位元素肯定不是浮动
没有外边距合并
多个定位元素重叠时：重叠上下文
设置 z -index，通常状况下，该值越大，越凑近用户
只有定位元素设置 z -index 无效
z-index 能够是正数，若为正数，则遇到惯例流 / 浮动元素，将会被其笼罩
其余选择器扩大
更多伪类选择器：first-child（选中第一个子元素）last-child（选中最初一个子元素）nth-child（选中指定的第几个子元素）nth-of-type（选中指定的第几个元素类型）更多伪元素选择器：first-letter（选中元素中的第一个字母）first-line（选中元素中第一行的文字）selection（选中被用户框选的文字）更多样式
透明度：opacity（设置整个元素的透明度，取值为 0~1）鼠标：cursor（取值 pointer，auto，grab...）设置鼠标图片款式：cursor:url('xxx'),auto
盒子暗藏：display:none
visibility:hidden
背景图：属于 css 概念
当图片属于网页内容时，必须应用 img 元素（HTML）当图片仅用于丑化页面，必须应用背景图（CSS）背景图波及的 css 属性：background-image（背景图图片）background-repeat（背景图是否反复）background-size（背景图大小）background-position（背景图地位，可利用在精灵（雪碧）图）background-attachment（背景图是否固定（绝对于视口））background-color（背景图和背景色彩混用）简写模式：background:background-color background-image background-position/background-size bakcground-repeat background-attachment...
设置 body 背景：画布（一块区域）特点：最小宽度为视口宽度
最小高度为视口高度
HTML 元素的背景：笼罩画布
若 HTML 元素有背景，BODY 元素失常（背景笼罩边框盒）若 HTML 元素没有背景，BODY 元素的背景笼罩画布
对于 body 的背景图：有背景图的宽度百分比，绝对于视口
有背景图的高度百分比，绝对于 HTML 元素（网页）的高度
背景图的横向地位百分比，预设值都绝对于视口
背景图的纵向地位百分比，预设值都绝对于网页
@规定
@import "门路"（导入另外一个 css 文件）@charset "utf-8"（通知浏览器该 css 文件应用的字符编码集是 utf-8，要写到 css 文件的第一行）web 字体和图标
web 字体：解决用户电脑上没有装置相应的字体，强制让用户下载该字体
制作新字体（应用 @font-face 指令）：@font-face{font-family:'newfont',src:url('字体门路')} p{font-family:'newfont'}
字体图标（罕用）：网址:iconfont.cn
块级格式化上下文
简称 BFC，它是一块独立的渲染区域，规定了该区域中，惯例流块盒的布局。惯例流块盒的布局：惯例流块盒在程度方向上，必须撑满蕴含块
惯例流块盒在蕴含块的垂直方向上顺次摆放
惯例流块盒若外边距无缝相邻，则进行外边距的合并
惯例流块盒的主动高度和摆放地位，忽视浮动元素
BFC 渲染区域：此区域由某个 HTML 元素创立，以下元素会在其外部创立 BFC 区域：根元素（<html>）浮动和相对定位元素
overflow 不等于 visible 的块盒
不同的 BFC 区域，它进行渲染时互不烦扰
创立 BFC 的元素，他的主动高度须要计算浮动元素（副作用最小的创立形式为 overflow：hidden）创立 BFC 的元素，他的边框盒不会与浮动元素重叠
创立 BFC 的元素，不会和他的子元素进行外边距合并
布局
多栏布局：两栏布局，三栏布局
等高布局实现：CSS3 的弹性盒
JS 管制
伪等高（某一栏的 height 写大一点，而后加上 margin-bottom，主区域溢出局部暗藏从而实现伪等高）元素书写程序：主区域代码靠前书写
后盾页面布局：局部区域实现溢出滚动
行高的取值（扩大）
1. px（像素值）2. 无单位数字（行高为字体大小的几倍（先继承，再计算像素值））3. em 单位（行高为字体大小的几倍（先计算像素值，再继承））4. 百分比（相当于 em 单位）行盒的垂直对齐
多个行盒在垂直方向上的对齐：给没有对齐的元素设置 vertical-align 属性（有预设值和数值）图片的底部白边：图片的父元素是个块盒，块盒高度主动，图片底部和父元素底部之间往往会呈现空白
解决底部白边：设置父元素字体大小为 0（有文字的话不倡议应用）。设置图片为块盒（display：block）字体的参考线（扩大）
一个字体，有 5 条线（从上到下）：顶线，上基线，基线，下基线，底线（不同文字类型参考线不一样）决定参考线：font-size,font-family,line-height
font-size：字体大小，设置的是文字的绝对大小
文字的绝对大小：1000,2048,1024
文字顶线到底线的间隔为文字的理论大小（content-area 内容区）行盒的背景，笼罩 content-area
行高：顶线向上延长的空间，和底线向下延长的空间，两个空间相等，该空间叫做 gap（空隙）gap 默认状况下是字体设计者决定的
top（顶线下面）到 bottom（底线上面）叫做 virtual-area（虚构区 / 行高）谬误说法：文字肯定呈现一行的最两头
正确说法：content-area 肯定呈现在 virtual-area 的两头
vertical-align：一个元素如果子元素呈现行盒，该元素外部也会产生参考线
设置的值为 baseline 时示意该元素的基线与父元素的基线对齐
设置的值为 super 时示意该元素的基线与父元素的上基线对齐
设置的值为 sub 时示意该元素的基线与父元素的下基线对齐
设置的值为 text-top 时示意该元素的 virtual-area 的顶边对齐父元素的 text-top（文本顶边）设置的值为 text-bottom 时示意该元素的 virtual-area 的底边对齐父元素的 text-bottom（文本底边）设置的值为 top 时示意该元素的 virtual-area 的顶边对齐父元素的顶边（该行中的最高顶边）设置的值为 bottom 时示意该元素的 virtual-area 的底边对齐父元素的底边（该行中的最低底边）设置的值为 middle 时示意该元素的中线（content-area 的一半）与父元素的 x 字母高度一半对齐
设置的值为数值时示意绝对于基线的偏移量。向上为负数，向下为正数
设置的值为百分比时示意绝对于基线的偏移量。百分比时绝对于本身 virtual-area 的高度
行盒组合起来能够造成多行，每一行的区域叫做 line-box。line-box 的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边
实际上一个元素的理论占用高度（高度主动），高度的计算通过 line-box 计算。line-box 是承载文字内容的必要条件，以下状况不生成行框（line-box）：某元素的外部没有任何行盒。某元素字体大小为 0。可替换元素和行块盒的基线：图片：基线地位位于图片的下外边距
表单元素：基线地位在内容底边
行块盒：行块盒最初一行有 line-box，用最初一行的基线作为整个行块盒的基线
若行块盒外部没有行盒，则用下外边距作为基线
重叠上下文
是一块区域，这块区域由某个元素创立，他规定了该区域中的内容在 z 轴上排列的先后顺序。创立重叠上下文的元素：html 元素（根元素）设置了 z -index（非 auto）数值的定位元素
同一个重叠上下文中元素在 z 轴上的排列（从后到前）：1. 创立重叠上下文的元素的背景和边框
2. 重叠级别为负值的重叠上下文
3. 惯例流非定位的块盒
4. 非定位的浮动盒子
5. 惯例流非定位行盒
6. 任何 z -index 是 auto 的定位子元素，以及 z -index 是 0 的重叠上下文
7. 重叠级别为正值的重叠上下文
每个重叠上下文，独立于其余重叠上下文，他们之间不能互相交叉
svg（扩大）
可缩放的矢量图
应用代码书写而成，缩放不会失真，内容轻量
svg 可嵌入浏览器，也可独自成为一个文件
svg 应用 xml 语言定义
书写 svg 代码：<svg width=''height='' xmlns='xxxxxx'>...</svg>
矩形：<rect/>
圆形：<circle/>
椭圆：<ellipse/>
线条：<line/>
折线：<polyline/>
多边形：<polygon/>
门路：<path/>
某些属性：fill（填充色彩）stroke（描边）stroke-width（描边的宽度）x,y（地位）width,height（宽高）cx,cy（圆形（椭圆）的中心点坐标）r（圆形半径）rx,ry（椭圆的短半径和长半径）x1,y1,x2,y2（线条的首尾坐标）points（折线（多边形）的点坐标）d（书写门路）：M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc（设值：半径 1，半径 2，顺时针旋转角度，小弧（0）大弧（1），顺时针（1）逆时针（0））Z = closepath
数据链接（扩大）
data url
书写：将指标文件的数据间接书写到门路地位
语法：data:MIME, 数据
意义：长处：缩小了浏览器的申请
有利于动静生成数据
毛病：减少了资源的体积
导致传输内容减少，从而减少单个资源的传输工夫
不利于浏览器缓存
会减少原资源的体积到原来的 4 /3
利用场景：当申请单个图片体积较小，并且该图片因为各种起因不适宜制作雪碧图，可应用数据链接
图片由其余代码动静生成，并且图片较小，可应用数据链接
base64：一种编码方式
通常用于将一些二进制数据，用一个可书写的字符串示意
浏览器的兼容性
厂商前缀：IE：-ms-
Chrome，safari：-webkit-
opera：-o-
firefox：-moz-
浏览器在解决款式或元素时，应用如下形式：当遇到无奈辨认的代码时间接略过
css hack：依据不同的浏览器（次要针对 IE），设置不同的款式和元素
款式：IE 中，CSS 的非凡兼容符号
* 属性：兼容 IE5，IE6，IE7
_属性：兼容 IE5，IE6
属性值 \9：兼容 IE5~IE10
属性值 \0：兼容 IE8~IE11
属性值 \9\0：兼容 IE9~IE10
IE5~IE7 的外边距 bug：浮动元素的左外边距翻倍
IE 的条件判断：<!--[if IE]>
<p>
这是 IE 浏览器
</p>
<![endif]-->
<p>
这是非 IE 浏览器
</p>
两种解决兼容性问题的思路（会影响代码的书写格调）：渐进加强和优雅降级
渐进加强：先适应大部分浏览器，而后针对新版本的浏览器退出新的款式
书写代码时，先尽量避免书写有兼容性问题的代码，实现后再逐渐退出新规范中的代码
优雅降级：先制作残缺的性能，而后再针对低级版本浏览器进行非凡解决
书写代码时，先不必特地在意兼容性，实现整个性能后，再针对低版本浏览器解决款式
举荐网址：caniuse，可查看各属性在不同浏览器版本的兼容性
居中总结
程度居中：行盒（行块盒）程度居中：间接设置行盒（行块盒）父元素 text-align:center
惯例流块盒程度居中：定宽，设置左右 margin 为 auto
相对定位元素程度居中：定宽，设置左右的坐标为 0（left：0，right：0），将 margin 设置为 auto（实际上，固定定位是相对定位的非凡状况）垂直居中：单行文本的垂直居中：设置文本所在元素的行高为整个区域的高度
行块盒或块盒内多行文本的垂直居中：设置盒子高低内边距雷同，达到相似的成果（没有完满计划）相对定位的垂直居中：定高，设置高低的坐标为 0（top：0，bottom：0），将高低 margin 设置为 auto
款式补充
display：list-item
设置该属性值的盒子，实质上依然是一个块盒，但同时该盒子会附带另一个盒子
元素自身生成的盒子叫主盒子，附带的盒子称为次盒子，次盒子和主盒子程度排列
波及的 css 属性：list-style-type（设置次盒子中内容的类型）list-style-position（设置次盒子绝对于主盒子的地位）图片生效时的宽高问题：若 img 元素的图片链接有效，img 元素的个性和一般行盒一样，无奈设置宽高
行盒中蕴含行块盒或可替换元素：行盒的高度与它外部的行块盒或可替换元素的高度无关
text-align：left（左对齐）right（右对齐）center（居中）justify（除最初一行外，扩散对齐）利用色彩属性值的 transparent 制作三角形
direction 和 writing-mode：direction 设置的是开始到完结的方向
writing-mode 设置的是文字书写方向
以上是对 CSS 的局部整顿和总结，心愿有用，有什么倡议欢送提出哦！
大家一起提高~
正文完
