
css样式
文章平均质量分 52
请叫我大豆包
这个作者很懒,什么都没留下…
展开
-
Html中meta标签详解
<!-- charset 此特性声明当前文档所使用的字符编码,但该声明可以被任何一个元素的 lang 特性的值覆盖 --> <meta charset="utf-8" /> <!-- http-equiv 这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用content 来定义 --> ------------------------------Content-Security-Policy----------------------------- &原创 2020-05-12 15:54:21 · 308 阅读 · 0 评论 -
png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过 webp?
(1)BMP,是无损的、既支持索引色也支持直接色的、点阵图。这种图片格式几乎没有对数据进行压缩,所以BMP格式的图片通常 具有较大的文件大小。 (2)GIF是无损的、采用索引色的、点阵图。采用LZW压缩算法进行编码。文件小,是GIF格式的优点,同时,GIF格式还具 有支持动画以及透明的优点。但,GIF格式仅支持8bit的索引色,所以GIF格式适用于对色彩要求不高同时需要文件体积 较小的场景。 (3)JPEG是有损的、采用直接色的、点阵图。JPEG的图片的优点,是采用了直接色,得益于更丰富的色彩,JPEG非常原创 2020-05-12 15:27:39 · 1084 阅读 · 0 评论 -
layoutviewport、visualviewport 和 idealviewport 的区别
相关知识点: 如果把移动设备上浏览器的可视区域设为viewport的话,某些网站就会因为viewport太窄而显示错乱,所以这些浏览器就决定 默认情况下把viewport设为一个较宽的值,比如980px,这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。 ppk把这个浏览器默认的viewport叫做layoutviewport。 layoutviewport的宽度是大于浏览器可视区域的宽度的,所以我们还需要一个viewport来代表浏览器可视区域的大小,ppk把 这个viewport叫做vi原创 2020-05-12 15:25:58 · 614 阅读 · 0 评论 -
margin 重叠问题的理解
作者:爱前端不爱恋爱 链接:https://zhuanlan.zhihu.com/p/114257330 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 块级元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并为单个外边距,这样的现象称为“margin合 并”。 产生折叠的必备条件:margin必须是邻接的! 而根据w3c规范,两个margin是邻接的必须满足以下条件: •必须是处于常规文档流(非float和绝对定位)的块级盒子,原创 2020-05-12 15:22:50 · 1168 阅读 · 0 评论 -
'display'、'position'和'float'的相互关系
原文链接 (1)首先我们判断display属性是否为none,如果为none,则position和float属性的值不影响元素最后的表现。 (2)然后判断position的值是否为absolute或者fixed,如果是,则float属性失效,并且display的值应该被 设置为table或者block,具体转换需要看初始转换值。 (3)如果position的值不为absolute或者fixed,则判断float属性的值是否为none,如果不是,则display 的值则按上面的规则转换。注意,如果positi原创 2020-05-12 15:20:14 · 449 阅读 · 0 评论 -
使用图片 base64 编码的优点和缺点
base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上显示的时候,可以用该字符串来代替图片的 url属性。 使用base64的优点是: (1)减少一个图片的HTTP请求 使用base64的缺点是: (1)根据base64的编码原理,编码后的大小会比原文件大小大1/3,如果把大图片编码到html/css中,不仅会造成文件体 积的增加,影响文件的加载速度,还会增加浏览器对html或css文件解析渲染的时间。 (2)使用base64无法直接缓存,要缓存只能缓存包含base64的文件,原创 2020-05-12 15:18:05 · 2028 阅读 · 0 评论 -
前端css经常遇到的浏览器的兼容性有哪些?
(1)png24位的图片在iE6浏览器上出现背景 解决方案:做成PNG8,也可以引用一段脚本处理。 (2)浏览器默认的margin和padding不同 解决方案:加一个全局的*{margin:0;padding:0;}来统一。 (3)IE6双边距bug:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或 margin-right,margin值会加倍。 #box{float:left;width:10px;margin:00010px;} 这种情况之下IE会产生20px的距离 解决方案:原创 2020-05-12 15:15:36 · 332 阅读 · 0 评论 -
CSS 清除默认样式
-因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 -当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。 最简单的初始化方法:(强烈不建议) *{padding:0;margin:0;} 淘宝的样式初始化代码: body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend ,button,input原创 2020-05-12 15:11:43 · 332 阅读 · 0 评论