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的局部整顿和总结，心愿有用，有什么倡议欢送提出哦！
大家一起提高~
发表回复