【CSS】部分知识
2021-04-19 07:28
标签：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.渐进增强，优雅降级 渐进增强：一开始针对低版本浏览器进行构建，完成基本功能，然后逐步添加那些只有高级浏览器才支持的效果、交互，功能。 优雅降级：一开始构建完整的功能，再针对低版本浏览器进行兼容。 3.浏览器内核 浏览器内核分为渲染引擎和JS引擎。渲染引擎负责获得网页的内容(html、xml)、整理讯息(例如加入CSS)，以及计算网页的显示方式，然后输出至显示器或打印器。JS引擎负责解析JS。 Trident（IE内核）：IE Gecko（火狐内核）：Firefox Blink：Opera、Chrome（以前webkit，现在Blink） Webkit：Safari 4.盒子模型 标准盒子模型、IE盒子模型、box-sizing 5.CSS3新增伪类 6.居中 块级 浮动元素 绝对定位元素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.三角形 12. BFC块级格式化上下文（Bock Formatting context） BFC是一个独立的渲染布局环境。规定了内部block-lever Box如何布局，并且与区域外毫不相干。 BFC布局规则： 如何创建BFC 13.浮动 浮动元素碰到包含它的边框或浮动元素的边框会停留。由于浮动元素不在文档流中，所以文档流的块框变现就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。 带来的问题： 清除浮动： 元素浮动后其display为block 14.元素竖向百分比 元素竖向百分比是相对于父元素的狂赌计算的。 15.响应式设计 响应式设计是一个网站能兼容多个终端。通过媒体查询监测不同的设备屏幕尺寸做处理。 然后使用media queries 16.line-height 行高指一行为的高度，具体来说是两行文字间基线的距离。 单行文字居中设置line-height和height一样即可 多行文本居垂直居中需要设置display属性为inline-block 17.Chrome支持小于12px的字体 18.单行文字缩略 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请求，提高页面性能，减少图片字节 【CSS】部分知识 标签：lips 对象 item 实现 基本 bock ever stat 网络图 原文地址：https://www.cnblogs.com/Mijiujs/p/12271111.html.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;
}
-webkit-transform:rotate(-3deg); /Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/Chrome/
transform:rotate(-3deg);
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
border: 1px solid red;
margin: 0 auto;
height: 50px;
width: 80px;
width:0;
height:0;
border-top:40px solid transparent;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-right:40px solid #ff0000;
// head标签中加入
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}
{font-size:10px;-webkit-transform:scale(0.8);
{overflow：hidden；white-space：nowrap；text-overflow：ellipsis；}