- 博客(12)
- 收藏
- 关注
RSS订阅原创 雪碧图的原理
CSS sprites（雪碧图）原理，优缺点CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以精确的定位出背景图片的位置。优点：a. 减少网页的http请求，并防止出现闪白b. 减少图片的字节，并解决了图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命
2021-03-22 20:11:15
157
原创 请问，如何通过CSS实现高度height随宽度width变化而变化，保持长宽比例不变，宽度是根据父元素宽度变化的？
html:<div class = "father"> <div class = "daughter"></div> // 父女情深</div>css:.father { width: 70%;}.daughter { width: 90%; height: 0; padding-top: 60%; background: black;}上下边距的百分比数值是以父元素宽度作为参照的。...
2021-03-22 20:10:30
336
原创 盒子模型
W3C标准盒模型：前者width = content，一种IE盒模型（IE6以下）：后者width = content + padding + border若要将IE盒模型转换为标准盒模型，需要在文档顶部加上<!DOCTYPE html>声明；很有意思的是，后来CSS3中也增加了box-sizing属性，1. box-sizing: content-box即标准盒模型，2. box-sizing: border-box即IE盒模型（width包含内边距和边框），W3C反过来又承认了微软
2021-03-22 20:09:32
73
原创 清除浮动的方法及原理
1. overflow:hidden/scroll/auto，hidden可以清除浮动但有可能隐藏有用的东西，这个属性定义溢出元素内容区的内容会如何处理（不推荐）默认值为visible，scroll内容会被修剪，其余内容可见，hidden会被修剪其余内容不可见，auto若被修剪则其余按滚动条显示若没有也按滚动条显示。inherit继承父元素overflow的值。2. style="clear:both;"也可以清除浮动但是会加入空标签（不推荐）3. .clearfix:before,.clearf
2021-03-22 20:07:40
228
原创 定位position
position: relative;相对定位a、不影响元素本身特性；b、不使元素脱离文档流（元素原始位置会被保留）；c、没有定位偏移量时对元素无影响（相对于自身偏移）；d、提升层级；相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框被设置元素相对于其原始位置而进行定位position: absolute;绝对定位a、使元素完全脱离文档流；不占据空间b、使内联元素支持宽高；内联块c、块属性标签内容撑开宽度；d、相对于最近的有定位的父元素偏移，且逐层上
2021-03-22 20:06:42
73
原创 元素的居中方式
1.margin:0 auto方式 这种对齐方式要求内部元素(.content_text)是块级元素，并且不能脱离文档流（如设置position:absolute）, 否则无效。2.text-align:center方式 这种方式可以水平居中块级元素中的行内元素，如inline，inline-block；如果用来居中块级元素中的块级元素时，如div中的div，一旦内层的div有自己的宽度，这种方法就会失效。只能让里面div的文字的内容居中，而div仍然是左对齐的。 还有一种情况，当...
2021-03-22 20:05:33
122
1
原创 伪元素跟伪类的区别
伪元素跟伪类都是选择器的补充，但是，伪类表示的是一种“状态”比如hover，active等等，而伪元素表示文档的某个确定部分的表现，比如::first-line 伪元素只作用于你前面元素选择器确定的一个元素的第一行。伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。用伪元素的好处是你可以用伪元素制造视觉上的效果，但是不会增加JS查DOM的负担，它对JS是透明的你无法用js获取到这个伪元素。所以即使你给页面.
2021-03-22 20:03:10
101
原创 CSS选择器优先级和权重以及浏览器怎样解析CSS选择器
（1）选择器1.ID选择器2.Class选择器3.标签选择器4.相邻选择器（h1+p）5.子元素选择器（h1>p）6.后代选择器（.class ol li a）7.通配选择器（*）8.属性选择器（a[rel = ’external’]，例如：为带有title属性的所有元素设置样式）9.伪类选择器 1）例如：链接不同活动状态 a:link 活动...
2021-03-22 19:59:22
232
原创 CSS布局
三栏式布局：两边盒子固定宽度，中间盒子自适应 圣杯布局： 1、父元素包含左中右三个盒子，分别左浮动 2、中间元素宽度100%（必须为第一个渲染） 3、用margin-left的负值将两边盒子拉上去和中间盒子同行（左边-100%，右边-右盒子宽度） 4、父元素用左右padding为左右盒子留位置 5、用相对定位将左右元素移动到正确的位置上 6、给父元素上清除浮动 双飞翼布局： 1、父元素包含左中右三个盒子，分别左浮动 2、中间元...
2021-03-22 19:55:50
67
原创 BFC和IFC
在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。BFC(Block Formatting Context)块级格式化上下文，是用于布局块级盒子的一块渲染区域，或者说是在一定条件下的一种渲染规则。通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素，反之也如此。IFC行内格式化上下文， 在行内格式化上下文中，框（box）一个接一个的水平排列，起点是包含块的顶部。水平方向上的 margin、bo
2021-03-22 19:52:38
97
原创 数组的方法
检测数组方法：instanceof 是对于一个网页或者一个全局作用域而言，可以检测到数组，如果网页中包含多个框架，实际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的Array构造函数,这时候必须要用另一个方法Array.isArray()转换方法：toLocalString(), toString(), valueOf()栈方法：push(), pop()队列方
2017-12-30 22:03:06
148
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人