![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
与css相关的文章
这碗花里只有粥
Keep it simple,stupid.
展开
-
css中flex布局justify-content: space-bewteen时,最后一排怎么处理?
????举个栗子:在box中有8个item。使用了flex布局,如下:最后一行应该用元素把空余的位置填满。(可以使用空盒子或者伪元素)。比如加两个empty盒子。注意这里的宽要设置成item的宽度才能够对齐。.box { display: flex; justify-content: space-between; border: 1px solid #666; flex-wrap: wrap;}.box .item { width: 200px; he原创 2020-11-11 22:52:48 · 901 阅读 · 0 评论 -
元素水平居中,垂直居中
问题描述:一个元素在容器中垂直居中。方法(一)容器盒子设置position:relative;元素设置position:position: absolute;top: 50%;left:50%;transform:translate(-50%,-50%);<!DOCTYPE html><html> <head> <meta cha...原创 2019-10-09 18:10:46 · 103 阅读 · 0 评论 -
flex布局
1 概述flex布局的属性有点多,除了弹性盒子还有弹性元素的属性。使用到弹性布局的时候总会有点懵逼。。。现在重新梳理一下弹性布局。首先弹性布局里包括弹性容器和弹性元素。一个元素既可以是弹性盒子,也可以是弹性元素。有一点挺重要的,flex布局是一种一维布局。一次只能处理一个维度(一行或者一列)上的元素布局与弹性容器相关的属性:flex-flow 复合属性(flex-flow = ...原创 2019-10-08 23:33:51 · 383 阅读 · 0 评论 -
CSS中content属性的作用
content属性与:before及:after伪元素配合使用,用于插入生成的内容;与:before搭配,在元素前插入内容。与:after搭配,在元素后插入内容。可以插入的内容包括文本、图像、引号,还可以结合计数器,为页面元素插如编号。举个栗子:<!DOCTYPE html><html> <head> <meta charse...原创 2019-10-08 11:51:54 · 524 阅读 · 0 评论 -
几种解决IE6 Bug的方法
解决双边距问题,是使用float引起的解决方法:使用display:inline3像素问题 ,是使用float引起的解决方法:使用_margin-right:3px超链接hover伪类样式,单击后失效解决方法:使用正确的书写顺序 :L->V->H->A (link,visited,hover,active)z-index问题解决方法:给父级元素添加positi...原创 2019-10-08 11:36:12 · 207 阅读 · 0 评论 -
实现DIV+CSS实现三栏布局(左右固定50px,中间自适应)
效果图如下,当改变页面的宽度 两侧的宽度为50px,中间自适应<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>d</title> <style> .container{ height: 500px;...原创 2019-10-08 11:13:31 · 690 阅读 · 0 评论 -
CSS3图像拼合技术
图像拼合就是单个图像的集合。将一个页面涉及到的所有图片都包含到一张大图中去,然后利用CSS的 background-image,background- repeat,background-position 的组合进行背景定位。使用CSS Sprites的好处:利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能; CSS Sprites能减少图片的字节。...原创 2019-08-13 10:42:38 · 715 阅读 · 0 评论 -
CSS分页实例
效果如下:代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>分页实例</title> <style> ul.pagination{ display: inline-block; p...原创 2019-08-12 17:36:56 · 142 阅读 · 0 评论 -
CSS3 2D转换实现遮罩效果
实现遮罩效果如下:当鼠标悬停在li的区域,遮罩的矩形会有一个动画。分析:实现遮罩效果步骤需要有一个盒子的宽度及高度与li一样,li要设置overflow:hidden; 将这个盒子定位与li重和 注意设置盒子的透明度 实现动画这里的动画使用了CSS3 2D 转换中的rotate();将遮罩旋转90度并且设置了转化元素的位置:transform-origin: right...原创 2019-08-13 18:04:15 · 330 阅读 · 0 评论