CSS-day3

最新推荐文章于 2024-07-20 18:30:00 发布

Lwangqi

最新推荐文章于 2024-07-20 18:30:00 发布

阅读量119

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_42527428/article/details/101258758

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

day3

[css] style标签写在body前和body后的区别是什么？

写在body标签前利于浏览器逐步渲染：

resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint

写在body标签后：

由于浏览器以逐行方式对html文档进行解析；

当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染；

在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）；

[css] 请描述margin边界叠加是什么及解决方案

当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。

1、水平边距永远不会重合。
2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下：
a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。

解决办法：

1.外层padding

2.透明边框border:1pxsolidtransparent;

3.绝对定位postion:absolute:

4.外层DIVoverflow:hidden;

5.内层DIV　加float:left;display:inline;

6.外层DIV有时会用到zoom:1;

CSS中margin边界叠加问题及解决方案

[css] 解释下 CSS sprites的原理和优缺点分别是什么？

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的"background-image","background-repeat","background-position"的组合进行背景定位，background-position可以用数字精确地定位出背景图片的位置。

优点：

①减少网页的http请求，从而加快了网页加载速度，提高用户体验。

②减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就会共用同一个头信息，从而减少了字节数。

③解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名。

④更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。

缺点：

①在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂。

②CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置。

③在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片。

④精灵图不能随意改变大小和颜色。改变大小会失真模糊，降低用户体验，Css3新属性可以改变精灵图颜色，但是比较麻烦，并且新属性有兼容问题，现在一般用字体图标代替精灵图。

[css] 什么是FOUC？你是如何避免FOUC的？

如果使用import方法对css进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:

    以无样式显示页面内容的瞬间闪烁,

    这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC.

原因大致为：

   1，使用import方法导入样式表。

   2，将样式表放在页面底部

   3，有几个样式表，放在html结构的不同位置。

其实原理很清楚：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。

此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

解决方法：使用link标签将样式表放在文档head中

[css] css的属性content有什么作用呢？有哪些场景可以用到？

1.content属性与 :before 及 :after 伪元素配合使用生成文本内容

2.通过attr()将选择器对象的属性作为字符串进行显示

3.用计数器为文档添加序号

css代码：

html代码：

效果：

[css] 要让Chrome支持小于12px的文字怎么做？

通过css3的transform来解决，方法如下：

css部分	html布局
body,p{ margin:0; padding:0;} p{font-size:10px;} span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block;}	<p><span id="span1">我是一个小于12PX的字体</span></p>

解释：

1.{webkit-transform:scale(0.8); display:inline-block} //0.8位缩放倍数，具体自己根据实际需求修改，只能缩放可以定义宽高的元素，而span是行内元素，

为什么定义 display:inline-block而不是 display:block？转为block就独占一行啦，所以转换为inline-block

2.{-o-transform:scale(1);}opera现在最新版也是webkit内核，新版本的opera，本来就是10px的字体了。