![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
yingzizizizizizzz
克制自己的懒惰
展开
-
css选择器的优先级
关于下列CSS选择器:ID选择器、类选择器、伪类选择器、标签名称选择器,排序正确的是: ID选择器>Class选择器=伪类>标签名称选择器 伪类和类选择器的优先级是一样的。 一般来说,选择器的优先级(从上往下依次降低)是: 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选原创 2017-03-23 14:15:47 · 2015 阅读 · 0 评论 -
css3实现文字间歇滚动
场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据。效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客。考虑到项目中经常使用Vue,已经很少操作DOM了,所以考虑最好通过CSS来实现,可以通过Vue给模板元素动态绑定class来实现相同的功能,如果需要考虑css3兼容性的话,可以去使用JavaScript去完成。 ...转载 2018-12-08 11:49:05 · 1223 阅读 · 0 评论 -
使用rem单位
自适应布局:http://caibaojian.com/web-app-rem.html 看了这篇才发现原来我一直理解的是错的 同上:http://caibaojian.com/rem-responsive-2.html 原因:rem只能控制字体大小吗,在ff和chrome表现不一。目前中文版chrome浏览器的默认字体大小下限是12像素,把html根元素设置为62.5%时,rem单位的...原创 2018-07-13 11:54:03 · 587 阅读 · 0 评论 -
css 制作各种三角形
三角形的制作原理其实很简单。 原理: 利用div元素的border属性来做。border的上左下右四个属性组成了一个正方形。这样我们就可以从正方形中拆出三角形了。不想要显示的设置成透明颜色,剩下的想显示的就是三角形。 .square{ width:0; height:0; border:solid 15px; border-color: red yellow p...原创 2018-07-19 10:21:18 · 260 阅读 · 0 评论 -
工作遇到的CSS问题
1、文字两边有横线 https://blog.csdn.net/Bumphy/article/details/78319678 2、文字换行 https://www.cnblogs.com/fsyz/p/7770839.html 3、table布局 https://segmentfault.com/a/1190000007007885 http://www.css88.com/arch...原创 2018-07-06 20:26:15 · 143 阅读 · 0 评论 -
css生成button的方法以及对text-align的理解
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>button</title> <style type="text/css"> html{font-size: 100px;} .btn{ c原创 2018-07-18 21:08:39 · 838 阅读 · 0 评论 -
css问题-设置子元素的margin background也跟着移动
转自这里 一般就是给父元素设置overflow: hidden;即可解决问题,之所以出现这种情况的原因是:普通文档流盒子间,只要垂直外边距直接接触就会发生合并,合并后外边距视觉高度取两个发生合并外边距中较大者。发生这一现象的有三种情况:相邻兄弟块元素间、父元素及其首子元素和末子元素间(没有内边距或边框把外边距分隔开)、空块级元素自身的合并。...转载 2018-07-17 18:18:35 · 734 阅读 · 0 评论 -
div垂直水平居中的五种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*方法一:margin:auto方法。简单粗暴,代码简单,IE(IE8 beta)中无效 无足够空间时,content 被截断,但是不会有滚动条出现*/ #co原创 2017-06-13 11:39:36 · 527 阅读 · 0 评论 -
兼容性问题汇总
css 清除ul和ol列表缩进问题:IE7-用margin:0解决,现代浏览器用list-style:none;margin:0;padding:0解决。详情点这里 IE6双边距问题:使用了float,左右会出现双倍边距。解决:display:inline。 IE6无法定义1px高的容器,解决:overflow:hidden js IE6,7,8不支持for each in遍历原创 2017-05-23 09:57:46 · 410 阅读 · 0 评论 -
解决弹窗遮罩层在拉滚动条发现遮罩层没铺满屏幕的问题
在做项目时,用到了弹出框,下边要有一层遮罩。写了一个简单的遮罩,拉动滚动条后发现,遮罩层只是遮住了视口,下面看不到根本没遮住,后来经过度娘后才有了解决方法。 有问题的遮罩层代码 .modal .modal-shadow { opacity: 0.3; filter: alpha(opacity=30); background-color: gray; position: absolut原创 2017-05-31 22:11:03 · 10112 阅读 · 6 评论 -
display:inline、block、inline-block的区别
转自这里:点击打开链接 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度 , , , , 和 是块元素的例子。 display:inline就是将元素显示为行内元素. inline元素的特点是: 和其他元素都转载 2017-05-16 12:14:10 · 215 阅读 · 0 评论 -
div垂直和水平居中的几种方法
转自这里:这里这里…… 我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中,我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中。 CSS让DIV水平居中 说明,本文中所指的DIV包括HTML页面中所有的元素。 让一个DIV水平居中,直接用C转载 2017-05-03 22:38:01 · 479 阅读 · 0 评论 -
css3学习笔记
1.为什么分许多模块进行管理? 为了避免产生浏览器对于某个模块支持不完全的情况。 2.使用元素的class属性的缺点: 第一,class属性本身没有语义,褚翠是用来为css样式服务的,属于多余属性。 第二,使用属性的话,并没有把样式与元素绑定起来,针对同一个class属性文本框,下拉框,按钮都可使用。这样很混乱,修改样式也不很方便。 3.h2:nth-child原创 2017-04-02 14:46:30 · 334 阅读 · 0 评论 -
css属性之overflow深入理解
1.如果overflow-x,overflow-y其中一个被赋值visible,另一个被赋值为其他(auto,hidden,scroll,inherit),那么被赋值visible的会自动重置为auto。 如果overflow-x,overflow-y值相同,等同于overflow。 2.overflow作用的前提 (1)非display:inline水平 (2)对应方位的尺寸限制原创 2017-03-23 14:53:17 · 525 阅读 · 0 评论 -
css属性position的深入理解
◆position:static 无定位 该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用position:static取消继承,即还原元素定位的默认值。 ◆position:absolute 绝对定位 使用position:absolute,能够很准确原创 2017-03-23 14:52:13 · 363 阅读 · 0 评论 -
css制作各种效果
纯css制作斑马线背景:https://blog.csdn.net/wjnf012/article/details/80242510?utm_source=blogxgwz7 纯css制作毛玻璃效果:https://www.cnblogs.com/ghost-xyx/p/5677168.html http://www.cnblogs.com/xiaohuochai/p/7511823.html...原创 2019-02-26 20:37:39 · 351 阅读 · 0 评论