![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 63
背着吉他的蝙蝠女侠
这个作者很懒,什么都没留下…
展开
-
flexbox-弹性盒子详解
在传统布局中,我们依赖的是diplay+position+float,使特殊的布局非常不方便。那么今天我们说css3中的弹性盒子,使我们在进行布局时,更加的便捷。1.display:flex表示的是把盒子设置为弹性盒子。 Document * { margin: 0; padding: 0; } body,html,#box { width: 1原创 2017-11-06 20:53:57 · 292 阅读 · 0 评论 -
css3的线性渐变的基本使用
1. 线性渐变的基本使用(linear gradients)1.1 从上往下渐变,代码如下:注意:也可以多加几种颜色,下面的也是一样。 Document .box1 { width: 700px; height: 50px; background: linear-gradient(red,blue); } 1.2 从原创 2017-11-30 16:42:08 · 206 阅读 · 0 评论 -
css之margin相关的问题以及解决办法
1. 问题1.1 IE6下的双边距问题。解决办法:使用display:inline;或者是去掉浮动。1.2 margin的重叠问题。解决办法:方法一:解决margin重叠最好的办法就是避免它;方法二:使用浮动,浮动可以解决margin的重叠问题,只能解决同方向上的重叠,不同方向上的是无法解决的。代码如下: Document .box1 { width原创 2017-11-30 16:02:19 · 403 阅读 · 0 评论 -
css动画之过渡
过渡属性为transition,是属于css3的属性,所以在处理不同浏览器的兼容性问题时,记得加上私有前缀。代码如下:transition表示的是哪些属性执行动画所需要的时间;transform是应用于元素的2D或者3D转换,其中属性值有rotate表示的是旋转多少度,translate表示的是在X和Y轴移动多少,scale表示的是缩放多少倍,skew表示的是需要倾斜的度数。其中动画效果中,还原创 2017-11-29 22:37:37 · 163 阅读 · 0 评论 -
css常见的对齐操作
1.margin的居中对齐操作 Document div { width: 500px; height: 200px; background: red; margin: 0 auto; } 2.position的左右对齐操作 Document div { width: 500px; height: 2原创 2017-11-20 17:34:08 · 204 阅读 · 0 评论 -
css3中一些常用的动画效果
1.动画效果一:鼠标放上去,后面的背景图放大到一定程度,下面的有个内容盒子,以一定的速度从下向上运动,并且盒子的背景颜色逐渐加深。 Document * { margin: 0; padding: 0; } .big { width: 420px; height: 372px; overflow: hidden; positio原创 2017-11-17 16:28:22 · 432 阅读 · 0 评论 -
css实现瀑布流效果
css实现瀑布流的效果是使用的多列布局来实现的,其中column-width表示的是每一列的宽度,column-gap表示每一列的间距,因为是css3的属性,为了处理兼容性问题,记得在前面加上各大浏览器的私有前缀。瀑布流实现的代码如下:注意:使用的图片的宽度是一致的。图片可以自己百度自行几张,然后使用画图工具修改宽度就可以,让高度自己随宽度进行调整。 Document .原创 2017-11-28 16:47:43 · 585 阅读 · 1 评论 -
css自定义动画
使用css自定义动画,使用到了css3中的属性,所以为了处理浏览器的兼容性问题,要记得加上私有前缀,在此我没有添加,主要使用到的属性有keyframes以及animation属性,keyframes是自己定义一个自己想要的动画,animation是让动画与执行动画的元素关联起来。代码如下: Document div { width: 100px; height:原创 2017-11-28 17:38:17 · 617 阅读 · 0 评论 -
响应式布局的实现
响应式布局的实现方式有很多种,我们这里先介绍几种实现响应式布局的方式,然后着重介绍的是如何使用媒体查询实现响应式布局。方式一:使用媒体查询。注意在使用媒体查询的时候,and与前后的小括号空一个空格,如果不空格的话,会报错。代码如下: Document * { margin: 0; padding: 0; } body,html,div { wid原创 2017-11-04 15:36:54 · 303 阅读 · 0 评论 -
sticky footer设计
如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。 Document * { margin: 0; padding: 0; font-size: 48px; } /*第一步设置盒子为满屏大小*/ .box { position: fixed; width: 100%; height: 10原创 2017-11-02 17:57:58 · 226 阅读 · 0 评论 -
实现盒子的垂直水平居中
方式一:使用绝对定位实现。代码如下: Document * { margin: 0; padding: 0; } .box1 { position: absolute; width: 100px; height: 200px; background-color: red; top: 50%; left: 50%;原创 2017-11-01 22:58:22 · 402 阅读 · 0 评论 -
css3动画之翻转
demo代码如下: 注意:这个是放上去可以发生一次翻转,离开就翻转回去,下面有jq实现的翻转效果,可以来回翻转的,每点击一次就会翻转到反方向。 Document div { width: 200px; height: 200px; position: relative; } div::before,div::after { content:原创 2017-12-16 16:00:23 · 273 阅读 · 0 评论