标签：lips 对象 item 实现 基本 bock ever stat 网络图
1.px，em，rem，rpx
px：像素，是相对于显示器屏幕分辨率而言
em：相对于当前对象内文本的字体尺寸。body{font-size:62.5%}
rem：相对于HTML根元素。html{font-size:62.5%}
rpx：小程序自适应屏幕尺寸。小程序规定屏幕宽度为750rpx。
2.渐进增强，优雅降级
渐进增强：一开始针对低版本浏览器进行构建，完成基本功能，然后逐步添加那些只有高级浏览器才支持的效果、交互，功能。
.transition { /*渐进增强写法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
优雅降级：一开始构建完整的功能，再针对低版本浏览器进行兼容。
.transition { /*优雅降级写法*/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
3.浏览器内核
浏览器内核分为渲染引擎和JS引擎。渲染引擎负责获得网页的内容(html、xml)、整理讯息(例如加入CSS)，以及计算网页的显示方式，然后输出至显示器或打印器。JS引擎负责解析JS。
Trident（IE内核）：IE
Gecko（火狐内核）：Firefox
Blink：Opera、Chrome（以前webkit，现在Blink）
Webkit：Safari
-webkit-transform:rotate(-3deg); /Safari*/ -moz-transform:rotate(-3deg); /*为Firefox*/ -ms-transform:rotate(-3deg); /*为IE*/ -o-transform:rotate(-3deg); /*为Opera*/Chrome/ transform:rotate(-3deg);
4.盒子模型
标准盒子模型、IE盒子模型、box-sizing
5.CSS3新增伪类
p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child 选择属于其父元素的唯一子元素 p:nth-child(2) 选择属于其父元素的第二个子元素 :enabled :disabled 表单控件的禁用状态。 :checked 单选框或复选框被选中。
6.居中
块级
border: 1px solid red; margin: 0 auto; height: 50px; width: 80px;
浮动元素
绝对定位元素margin或transform
flex居中父{display:flexjustify-content:center,align-item:center;}子{flex：auto}
7.display
none，inline，block，inline-block，table，list-item，flex
8.position
static默认，按照正常文档流
relative相对定位，不脱离文档流，相对静态位置定位
absolute绝对定位，参考最近的部位static的父元素定位
fixed固定定位，相对可视窗口
9.visibility：visible | hidden | collapse
collapse：对表格元素可以删除一行一列，不影响表格布局。其他元素上位hidden
不同浏览器上的行为：
10.position、display、float
position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。
11.三角形
width:0; height:0; border-top:40px solid transparent; border-left:40px solid transparent; border-right:40px solid transparent; border-right:40px solid #ff0000;
12. BFC块级格式化上下文（Bock Formatting context）
BFC是一个独立的渲染布局环境。规定了内部block-lever Box如何布局，并且与区域外毫不相干。
BFC布局规则：
如何创建BFC
13.浮动
浮动元素碰到包含它的边框或浮动元素的边框会停留。由于浮动元素不在文档流中，所以文档流的块框变现就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
带来的问题：
清除浮动：
元素浮动后其display为block
14.元素竖向百分比
元素竖向百分比是相对于父元素的狂赌计算的。
15.响应式设计
响应式设计是一个网站能兼容多个终端。通过媒体查询监测不同的设备屏幕尺寸做处理。
// head标签中加入 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
然后使用media queries
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}
16.line-height
行高指一行为的高度，具体来说是两行文字间基线的距离。
单行文字居中设置line-height和height一样即可
多行文本居垂直居中需要设置display属性为inline-block
17.Chrome支持小于12px的字体
{font-size:10px;-webkit-transform:scale(0.8);
18.单行文字缩略
{overflow：hidden；white-space：nowrap；text-overflow：ellipsis；}
word-wrap：break-word对长不可分割单词进行换行(允许断句)
word-break：break-all 对非日韩进行换(怎样断句)
19.有一个高度自适应div，里面有两个div，一个高度100px，希望另一个填满
父div的position为relative。高度自适应的position:absolute;top100px;bottom:0;left:0;
20.浏览器如何解析CSS选择器
从右向左解析。节省性能。解析完毕将结构与DOM Tree一起分析简历Render Tree，最终用来进行绘图。
21.浏览器兼容性问题
1.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
2.超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
3.标签默认属性不一样，初始化CSS样式
22.png、jpg、gif
png是便携式网络图片，无损数据压缩位图文件格式，压缩比高，色彩好
jpg针对相片失真压缩方法，在色调及颜色平滑变化做的不错。
gif一种位图文件格式，以8为色重现真色彩的图像。实现动画效果。
23.overflow
scroll滚动条
auto子元素大于父时出现滚动条
visible溢出
hidden 溢出隐藏
24.雪碧图
把一个页面涉及到的所有图片都包含到一张大图中去。利用
background-imgae
background-repeat
background-position
减少HTTP请求，提高页面性能，减少图片字节
标签：lips 对象 item 实现 基本 bock ever stat 网络图
原文地址：https://www.cnblogs.com/Mijiujs/p/12271111.html
