标签：生成 行内元素 伪类 相互 container inline 文字 部分 osi
概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
优点：
HTTP请求数，极大地提高页面加载速度缺点：
display: none;与visibility: hidden;的区别联系：它们都能让元素不可见
区别：
display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。display: none;元素内容；会读取visibility: hidden;元素内容link与@import的区别link是HTML方式， @import是CSS方式
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
link可以通过rel="alternate stylesheet"指定候选样式
浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前，可以在css文件中引用其他文件
总体来说：link优于@import
Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。
解决方法：把样式表放到文档的head
创建规则：
float不是none）position取值为absolute或fixed）display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素overflow不是visible的元素作用：
margin折叠如果display为none，那么position和float都不起作用，这种情况下元素不产生框
否则，如果position值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。
否则，如果float不是none，框是浮动的，display根据下表进行调整
否则，如果元素是根元素，display根据下表进行调整
其他情况下display的值为指定值
总结起来：绝对定位、浮动、根元素都需要调整display
父级div定义height
结尾处加空div标签clear:both
父级div定义伪类:after和zoom
父级div定义overflow:hidden
父级div也浮动，需要定义宽度
结尾处加br标签clear:both
比较好的是第3种方式，好多网站都这么用
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化
新增各种css选择器
圆角 border-radius
多列布局
阴影和反射
文字特效text-shadow
线性渐变
旋转transform
CSS3新增伪类有那些？
p:first-of-type 选择属于其父元素的首个<p>元素的每个<p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个<p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p>元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值
有两种， IE盒子模型、W3C盒子模型；
盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
区 别： IE的content部分把 border 和 padding计算了进去;
优先级就近原则，同权重情况下样式定义最近者为准
载入样式以最后载入的定位为准
优先级为: !important > id > class > tag important 比 内联优先级高
它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用
浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位
relative：生成相对定位的元素，相对于其正常位置进行定位
static 默认值。没有定位，元素出现在正常的流中
inherit 规定从父元素继承 position 属性的值
移除空格
使用margin负值
使用font-size:0
letter-spacing
word-spacing
GIF
8位像素，256色boolean透明JPEG
256PNG
PNG8和truecolor PNGPNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画浮动后，行内元素不会成为块状元素，但是可以设置宽高。行内元素要想变成块状元素，占一行，直接设置display:block;。但如果元素设置了浮动后再设置display:block;那就不会占一行。
偶数字号相对更容易和 web 设计的其他部分构成比例关系
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素
用于区分伪类和伪元素
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms
@import引入多个css文件，可以使用CSS工具将CSS合并为一个CSS文件，例如使用Sass\Compass等！important规则最重要，大于其它规则
行内样式规则，加1000
对于选择器中给定的各个ID属性值，加100
对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加10
对于选择其中给定的各个元素标签选择器，加1
如果权值一样，则按照样式规则的先后顺序来应用，顺序靠后的覆盖靠前的规则
position、display、float、width、height、margin、padding、top、left、right、`
css压缩与合并、Gzip压缩
css文件放在head里、不要用@import
尽量用缩写、避免用滤镜、合理使用选择器
依靠CSS3中提出的三个属性：transition、transform、animation
transition：定义了元素在变化过程中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
transform：定义元素的变化结果，包含rotate、scale、skew、translate。
animation：动画定义了动作的每一帧（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction
优点可以加密，减少了http请求
缺点是需要消耗CPU进行编解码
.left { float: left; width: 100px; height: 200px; background: red; } .right { float: right; width: 200px; height: 200px; background: blue; } .main { margin-left: 120px; margin-right: 220px; height: 200px; background: green; }
<div class="container"> <div class="left"></div> <div class="right"></div> <div class="main"></div> </div>
.container { margin-left: 120px; margin-right: 220px; } .main { float: left; width: 100%; height:300px; background: green; } .left { position: relative; left: -120px; float: left; height: 300px; width: 100px; margin-left: -100%; background: red; } .right { position: relative; right: -220px; float: right; height: 300px; width: 200px; margin-left: -200px; background: blue; }
<div class="container"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div>
.content { float: left; width: 100%; } .main { height: 200px; margin-left: 110px; margin-right: 220px; background: green; } .main::after { content: ‘‘; display: block; font-size:0; height: 0; zoom: 1; clear: both; } .left { float:left; height: 200px; width: 100px; margin-left: -100%; background: red; } .right { float: right; height: 200px; width: 200px; margin-left: -200px; background: blue; }
<div class="content"> <div class="main"></div> </div> <div class="left"></div> <div class="right"></div>
均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
Scss和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Scss和Stylus可以通过缩进表示层次与嵌套关系
Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念
Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；
PostCSS 提供了一个解析器，它能够将 CSS 解析成抽象语法树PostCSS 这个平台上，我们能够开发一些插件，来处理我们的CSS，比如热门的：autoprefixerpostcss可以对sass处理过后的css再处理 最常见的就是autoprefixer标签：生成 行内元素 伪类 相互 container inline 文字 部分 osi
原文地址：https://www.cnblogs.com/Strugglinggirl/p/11043961.html
