CSS驿站
艾小莫的梦
这个作者很懒,什么都没留下…
展开
-
CSS常见布局:左侧固定,右侧自适应
这是一个很常见的布局,当然也可以实现右侧自适应,左侧自适应。比如常见的网页中,左侧导航栏是固定的,右侧的内容区要自适应浏览器的大小。 现在我们来看下HTML布局:<div id="outer"> <div id="sidebar" style="height:240px;">固定宽度区</div> <div id="content" style="height:340px;">自适应区</原创 2017-05-18 16:56:04 · 6004 阅读 · 0 评论 -
css清除浮动
为什么要清除浮动我们先来看一个现象: HTML代码结构<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div></div>CSS样式.outer{border: 1px solid #ccc;background: #fc9;color原创 2017-05-18 14:01:21 · 363 阅读 · 0 评论 -
BFC原理及其应用
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。BFC是什么在解释 BFC 是什么之前,需要先介绍 Box、Form转载 2017-06-21 18:34:27 · 2328 阅读 · 0 评论 -
用纯CSS实现三角形
网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的, 如果用纯css实现这个效果,其源代码如下:.caret {display: inline-block;width: 0;height: 0;margin-left: 2px;vertical-align: middle;border-top: 4px solid;border-right: 4px solid t原创 2017-06-26 19:27:50 · 493 阅读 · 0 评论 -
css实现div垂直水平居中
一、表格布局法 table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align这个属性对block元素不起作用,但对table-cell元素是有效的)设置元素垂直居中,即可达到我们想要的效果。好处是不需要事先知道子元素的高度。 IE7及以下版本不支持此方法,IE8及以上版本及原创 2017-05-11 17:53:16 · 2048 阅读 · 0 评论 -
CSS Transform / Transition / Animation 属性的区别
CSS3中和动画有关的属性有三个 transform、 transition 和 animation。下面来一一说明:一、transform通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。transform属性是静态属性,一旦写到style里面,将会直接显示作用,无任何变化过程。transform的主要用途是用来做元素的特殊变形,对于做设计的人来说并不是很陌生,简单的来说就是原创 2017-08-18 17:36:13 · 678 阅读 · 0 评论 -
纯css实现自适应正方形
在处理移动端页面时,我们有时会需要将banner图做成与屏幕等宽的正方形以获得最佳的体验效果,如Flipbord的移动页面:方案一:CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位,1vw = 1% viewport width, vh 是相对于视口高度百分比的单位,1vh = 1% viewport height;转载 2017-08-20 18:44:56 · 1782 阅读 · 0 评论 -
CSS——选择器的优先级
1、引言span{ color:red;}.plantext{ color:blue;}<span class="plantext"></span>上面代码中,css中的两个选择器都是针对的,而且两个设置的颜色不一样,这里的到底听从谁的命令?上面还是比较简单的,下面在来一个复杂的:#div1 li{ color: blue;}.content .list li{原创 2017-09-20 10:54:21 · 682 阅读 · 0 评论 -
伪类和伪元素的区别
伪类和伪元素经常用来向某些选择器设置特殊效果。那么他们之间到底有哪些区别呢?伪类和伪元素的根本区别在于:它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看,如果需要添加新元素加以标识的,就是伪元素,反之,如果只需要在既有元素上添加类别的,就是伪类。伪类的种类:伪元素的种类:原创 2017-09-12 14:46:41 · 398 阅读 · 0 评论