![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
lanjiao34
这个作者很懒,什么都没留下…
展开
-
雪碧图的原理
CSS sprites(雪碧图)原理,优缺点 CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以精确的定位出背景图片的位置。 优点: a. 减少网页的http请求,并防止出现闪白 b. 减少图片的字节,并解决了图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命原创 2021-03-22 20:11:15 · 158 阅读 · 0 评论 -
请问,如何通过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 · 343 阅读 · 0 评论 -
盒子模型
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 · 79 阅读 · 0 评论 -
清除浮动的方法及原理
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 · 232 阅读 · 0 评论 -
定位position
position: relative;相对定位 a、不影响元素本身特性; b、不使元素脱离文档流(元素原始位置会被保留); c、没有定位偏移量时对元素无影响(相对于自身偏移); d、提升层级; 相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框 被设置元素相对于其原始位置而进行定位 position: absolute;绝对定位 a、使元素完全脱离文档流;不占据空间 b、使内联元素支持宽高;内联块 c、块属性标签内容撑开宽度; d、相对于最近的有定位的父元素偏移,且逐层上原创 2021-03-22 20:06:42 · 78 阅读 · 0 评论 -
元素的居中方式
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 · 128 阅读 · 1 评论 -
伪元素跟伪类的区别
伪元素跟伪类都是选择器的补充,但是,伪类表示的是一种“状态”比如hover,active等等,而伪元素表示文档的某个确定部分的表现,比如::first-line 伪元素只作用于你前面元素选择器确定的一个元素的第一行。伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。 用伪元素的好处是你可以用伪元素制造视觉上的效果,但是不会增加JS查DOM的负担,它对JS是透明的你 无法用js获取到这个伪元素。所以即使你给页面.原创 2021-03-22 20:03:10 · 108 阅读 · 0 评论 -
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 · 237 阅读 · 0 评论 -
CSS布局
三栏式布局:两边盒子固定宽度,中间盒子自适应 圣杯布局: 1、父元素包含左中右三个盒子,分别左浮动 2、中间元素宽度100%(必须为第一个渲染) 3、用margin-left的负值将两边盒子拉上去和中间盒子同行(左边-100%,右边-右盒子宽度) 4、父元素用左右padding为左右盒子留位置 5、用相对定位将左右元素移动到正确的位置上 6、给父元素上清除浮动 双飞翼布局: 1、父元素包含左中右三个盒子,分别左浮动 2、中间元...原创 2021-03-22 19:55:50 · 73 阅读 · 0 评论 -
BFC和IFC
在解释BFC之前,先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。 BFC(Block Formatting Context)块级格式化上下文,是用于布局块级盒子的一块渲染区域,或者说是在一定条件下的一种渲染规则。通俗一点讲,可以把 BFC 理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素,反之也如此。 IFC行内格式化上下文, 在行内格式化上下文中,框(box)一个接一个的水平排列,起点是包含块的顶部。水平方向上的 margin、bo原创 2021-03-22 19:52:38 · 102 阅读 · 0 评论