随笔分类 - css笔记
摘要:B(block) 块是指页面中的相对独立的模块或是组件,比如header是一个block,其中的输入框也是一个block,block之间可以进行嵌套 BEM中如果存在多个单词的情况,都使用中线-连接。 E(element) 指块中的子元素,比如header的标题和内容,需要使用父级block命名作为
阅读全文
摘要:转自:https://blog.csdn.net/romantic_love/article/details/80868909 vw、vh、vmin、vmax是一种视窗单位,也是相对单位。 它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,即单位1vw,代表类似于1%的
阅读全文
摘要:一般情况: 效果: 过长溢出,绝对定位元素相对父元素位置设置 如果将overflow设置为hidden 过长部分被隐藏,无法滚动,绝对定位元素也被隐藏 如果将overflow设为scroll或auto 出现滚动条,绝对定位元素的位置将相对于父元素的内容位置设置!
阅读全文
摘要:background-clip属性的通俗作用就是指定元素背景所在的区域,有四种取值 详情可见:https://www.cnblogs.com/okgoodman/p/8665912.html
阅读全文
摘要://iphoneX、iphoneXs @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {} 即: 设备屏幕可见宽度为375px, 可
阅读全文
摘要:前段时间做了一个浮层,但在ios上,浮层滑动不流畅,基本上是随着手指的移动而移动,经研究加上-webkit-overflow-scrolling: touch即可 eg: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co
阅读全文
摘要:圣杯布局 特点: 1、按照中间部分、左部分、右部分的顺序排列; 2、容器的子元素都是浮动布局 float: left; 3、容器设置padding为两侧腾出空间; 4、中间部分宽度为100%; 5、两侧都是相对定位,左部分margin: -100%, left: 负自身宽度, 右部分margin:
阅读全文
摘要:png24无损压缩,支持透明,有8位布尔透明通道,支持半透明,生成的图片品质最高,也最大 png8支持透明,有1位布尔透明通道,要么透明、要么半透明,生成的图片很小,只支持256色 jpeg有损压缩,不支持透明,在图片不是特别锐利的情况下与png24差不多,但体积小许多 gif支持透明,有1位布尔透
阅读全文
摘要:总所周知,网页加载渲染分为一下几个阶段: -构建dom树(dom tree) 从上到下解析html构建dom树,也叫内容树 -构建css树(CSSOM) 将css样式附着到dom树上生成CSSOM tree(css object model tree) -执行js 执行js代码(同步) -构建渲染树
阅读全文
摘要:大致能分成两个部分:网络通信与页面渲染 一.网络通信 互联网各个网络设备间的通信均基于TCP/IP协议,此协议将整个过程进行分层,由上至下分别为: 应用层、传输层、网络层和数据链路层 1.输入URL 2.应用层用DNS解析域名(DNS协议) 解析url域名,检查本地是否有对应的IP地址,有则返回,没
阅读全文
摘要:最近发现一个问题,当我用mixin将px转rem时: 编译处的结果是: font-size: 0.06667 rem; 前后端多出空格! 解决方法: 1.font-size: ($remVal/75)+rem; 2.font-size: ($remVal/75)*1rem; 其实,标准写法是带单位的
阅读全文
摘要:1.利用绝对定位 top与left设为50%,margin-left为宽度一半的负值,margin-top为高度一半的负值 此方法最常见,但仅仅适用于已知宽高的情况下。 2.绝对定位结合transform 可在未知宽高时使用,但在IE8及以前的浏览器内不支持,且内部文本可能因为移动而稍显模糊,这是因
阅读全文
摘要:display:table-cell可将元素设为类似于table的td一样的布局,在垂直居中、两行自适应布局、等高布局下有很高的利用价值 详见: http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81
阅读全文
摘要:当我们将元素设为inline-block时,总是会莫名其妙出现一些间距 效果如下: 原因在于空白符的存在!</li>与下一行的<li>之间存在空白换行符 解决方法一般是在不破坏dom结构的前提下改变写法以清除换行符 1.结束标签与开始标签拼接 2.拆分开始标签 3.拆分结束标签 4.将换行符注释掉
阅读全文
摘要:IFC(inline formatting context),行内格式化上下文 特点: 1.内联元素在水平线上一个接一个排列 2.内部元素水平方向上的margin、padding、border有效,垂直方向上无效 3.垂直方向上有多种对齐方式: 顶部、底部、基线。。 4.每一列元素构成一个line
阅读全文
摘要:link与@import都是从外部引入css的方式,但区别很大: 1.link输入XHTML标签,除了加载css以外,还可以加载rss等;@import只能引入css; 2.link在页面载入时同时加载,@import在页面完全载入后加载; 3.link无兼容问题,@import是css2.1提出,
阅读全文
摘要:我们常说的文档流分为普通流、浮动流与定位流三种。 FC(formatting context格式化上下文),指的是一块渲染区域,依靠渲染规则,决定其子元素如何布局及与其他元素的关系和作用。 FC分为BFC、IFC、GFC和FFC,其中BFC(block formatting context)块级格式
阅读全文
摘要:table 1. 宽高由内容撑开 2.独占一行 3.可设置宽高 4.可设置margin、padding inline-table 与display: table大体一致,区别在于不独占一行,为行内元素 table-row 1.宽高由内容撑开,但当父元素为display:table(相当于table)
阅读全文
摘要:本文旨在对常用变化做最直观的简析 translate 移动 translateX() X轴正方向移动(单位可为px,也可为%,为%时以自身为参照物) translateY() Y轴反方向移动 translate(x,y) scale 缩放 scaleX() X轴方向拉伸 (参数为数字,缩放比例) s
阅读全文