随笔分类 -  css

url 、src 、href 的区别
摘要：url、href、src 详解 现自己居然没把url、href、src关系及使用搞清楚，今天就理一下。主要包括：url、src、href定义以及使用区别。 URL(Uniform Resource Locator) 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网 阅读全文
posted @ 2017-03-09 15:14 ypm_wbg 阅读(997) 评论(0) 推荐(0)
transform对定位元素的影响
摘要：1、温故知新 absolute：生成绝对定位的元素，相对于除position:static 定位以外的第一个有定位属性的父元素进行定位，若父元素没有定位属性则相对于浏览器窗口的左上角定位，定位的元素不再占据文档的空间。 relative：生成相对定位的元素，相对于其正常位置进行定位,定位的元素仍然占 阅读全文
posted @ 2017-03-08 14:42 ypm_wbg 阅读(3044) 评论(0) 推荐(1)
css实现一色多变化
摘要：陈大吊 阅读全文
posted @ 2017-03-08 14:15 ypm_wbg 阅读(271) 评论(0) 推荐(0)
径向动画菜单
摘要：径向动画菜单 阅读全文
posted @ 2016-12-05 10:36 ypm_wbg 阅读(140) 评论(0) 推荐(0)
网易动漫效果
摘要：网站地址 http://nec.netease.com/library/category/#animation /* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animati 阅读全文
posted @ 2016-11-30 09:37 ypm_wbg
flex属性值----弹性盒子布局
摘要：里面的属性都 是在有display: flex的情况 下才生效。 兼容性写法： display: -webkit-box; /*老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老 阅读全文
posted @ 2016-11-23 15:09 ypm_wbg 阅读(819) 评论(0) 推荐(0)
多栏布局
摘要：恢复内容开始 使用 float属性或position属性的缺点：就是每个元素都各自独独立 ; 列计数器和宽度: 有两个CSS属性控制是否实现多列布局和显示多少列： column-count and column-width。可以用 columns 来代替； column-count:2与column 阅读全文
posted @ 2016-11-21 20:18 ypm_wbg 阅读(160) 评论(0) 推荐(0)
css实现一行文字居中，多行文字左对齐
摘要：问题及场景： 当内容能一行显示在盒子内时，文字居中对齐。 当内容过多换行后显示在盒子内时，文字左对齐。 其实这种视觉上的需求还是蛮常见的。比如用于弹出提示框，当提示内容比较少时，内容居中显示在弹出框，提示内容比较多时，内容居左对齐。但是其纯CSS实现有点麻烦，一般就放掉这个需求，或者，使用JS实现。 阅读全文
posted @ 2016-11-19 00:42 ypm_wbg 阅读(11378) 评论(0) 推荐(0)
box-sizing的不同属性值间的区别
摘要：box-sizing：值为 border-box时，其含义为：表示元素的宽度与高度包括内部补白区域(指border和padding)与边框的宽度与高度；值为content-box时，其含义正其前者相反，表示不包括 内部补白区域与边框的宽度与高度； 看下面示图： 这是div1的样子，其结构图如示： d 阅读全文
posted @ 2016-11-12 17:15 ypm_wbg 阅读(589) 评论(0) 推荐(0)
盒相关样式
摘要：恢复内容开始 1.block: 块元素 ，不用多说 2.inline-block: 行内块元素，这也没有太多说，主意一点就好，几个行内块元素正常写在一起时，他们中间是有会间距；消除方法很多种，主要有2种：1.不换行写在一起，中间不能有空格； 2.正常写代码，但两元素间的空白部分用注释清掉； 如下： 阅读全文
posted @ 2016-11-12 16:16 ypm_wbg 阅读(140) 评论(0) 推荐(0)
px, em,rem
摘要：各自的定义 ： rem: rem字尺寸单位交根据页面上的根元素（一般指html元素）的字体大小而计算 出实际的字体大小。 em : em单位根据元素的父元素的字体大小而计算出实际的字体大小，这个将会当元素从一个父元素移动到另一个父元素中时很可能使元素的实际字体大小产生变化。 px : px就是字体大 阅读全文
posted @ 2016-11-12 14:51 ypm_wbg 阅读(147) 评论(0) 推荐(0)
省略号，阴影，文字
摘要：省略号：selector{ -o-text-overflow: ellipsis;/*兼容opera*/ text-overflow: ellipsis;/*这就是省略号喽*/ overflow: hidden;/*设置超过的隐藏*/ white-space: nowrap;/*设置不折行*/ wi 阅读全文
posted @ 2016-11-11 14:48 ypm_wbg 阅读(156) 评论(0) 推荐(0)
nth-of-type和nth-child的区别
摘要：恢复内容开始 nth-of-type这一类的选择器是针对同类型的子元素进行计算； nth-child这一类的先择器是连同父元素中的所有子元素一起计算； 标题1 内容 ......三万字 标题2 内容 ......三万字 标题3 内容 ......三万字 标题4 内容 ......三万字 标题5 内容 阅读全文
posted @ 2016-11-11 14:26 ypm_wbg 阅读(161) 评论(0) 推荐(0)