css
文章平均质量分 59
CruellyJohn
这个作者很懒,什么都没留下…
展开
-
css之10种隐藏元素的方法
1、通过设置width:0;或height:0;div{width:0;}或div{height:0;} 但是这种方法隐藏不了文字。如果还想把文字隐藏可以,div{font-size:0;}2、将元素的opacity设置为0。元素本身还在,只是透明了,所以该元素所占的位置将不会改变。div{opacity:0;}3、用定位或者margin将元素移除屏幕范围。div{ p...原创 2018-02-21 10:09:09 · 1335 阅读 · 0 评论 -
css之Flex布局(一)
flexBox布局使用flexBox布局前需要给容器添加样式display:flex;...<style> .contain{ display:flex; }</style><div class="contain&原创 2018-08-09 18:51:49 · 688 阅读 · 0 评论 -
解决div相互覆盖层叠问题!
当我们看到div相互层叠覆盖的时候,首先我们想到的是否有div脱离了文档流?其次我们在分析他们是通过什么方法脱离文档流的? 目前,常见的脱离文档流的方法有position定位和float浮动两种! 如果不知道什么是文档流的童鞋可以看看这个。 1、如果这个div是通过float导致的脱离文档流的话,可以通过上面的div和下面的div之间插入清除浮动。 ...原创 2018-03-25 16:14:17 · 15719 阅读 · 0 评论 -
清晰解析什么是文档流?
所谓的文档流,就好比如一块块的正方形组成的一个整体,而这些正方形就代表着每个div。当某个div脱离了这个整体,也就代表他脱离了文档流。然后下一个div就会来填补脱离的div的位置。下面是流程图。 有四个小朋友在买小卖部排队买糖吃~ 第一个买完了糖的小朋友脱离了排队的队伍开心的吃糖去。 后面的小朋友看前面的小朋友走了,连忙补...原创 2018-03-25 15:52:23 · 16059 阅读 · 6 评论 -
如何实现图片缩放效果?
实现图片缩放效果我们有两种办法,方法一:使用css3的transition的过渡效果 代码: html <div></div> css div{ background-image:url(1.jpg); ...原创 2018-02-24 15:40:08 · 2371 阅读 · 0 评论 -
纯css制作三角形
1、在通过css弄出三角形前,我们需要了解一下border的我们平常忽视的小秘密。 如果给一个div的css样式上给他四个边分别以不同的颜色渲染,那么它每个边是怎么样的呢?如果只给一条边予以颜色,那么它的形状是这样的。 代码: html<div></div> cssdiv{width:100px;height:100px;border-top:10...原创 2018-02-24 14:36:19 · 1030 阅读 · 0 评论 -
关于icon小图标的实现
1、使用CSS Sprite即需要用到background-image和background-position这两个属性。一般图片应该保存为png-24格式通过background-image引入图片后,再根据background-position定位图片中小图标的位置,从而得到自己想要的图标2、引用字体图标优点:推荐使用原创 2018-02-23 14:36:10 · 2579 阅读 · 0 评论 -
如何使table中的背景色不会被隔开?
通常情况下,我们设置table的背景颜色会变成这样。 会有间隙。如果我们想要去除这些间隙,我们可以在table上设置cellspacing=”0”;<table cellspacing="0"></table>,效果图如下 在这里我只对头部设置背景,其他部位做法一样。 方法一: 设置border的颜色为透明即可。 本质上,虽然看起来是一个,但是这七个单...原创 2018-02-23 13:11:43 · 1499 阅读 · 0 评论 -
css选择器之好用的attribute选择器
相信很多小伙伴在看别人文档的时候会看到一种这样的选择器,[class^=”test”] { background:#ffff00; }这种[attribute^=value]形式是什么意思呢?这种选择器有几种表达方式,分别代表着不同的意思。 1、[attribute~=value] 选取属性值中包含指定词汇的元素 2、[attribute|=value] 选取带有以指定值开头的属...原创 2018-03-08 21:45:51 · 601 阅读 · 0 评论 -
css之Flex布局(二)
flex布局之flex-item的属性 前言:这里的flex-item的属性是指Flex容器中项目div的属性继上篇讲了flex布局的容器的六大css属性,这次来说说容器中的项目(flex-item)的六大css属性orderflex-growflex-shrinkflex-basisflexalign-self在下面的代码实例中,为了更直观的看属性的解析。不会...原创 2018-08-09 23:10:37 · 2328 阅读 · 0 评论