![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
fifthThirteen
前端菜鸟
展开
-
CSS选择器-属性选择器
CSS选择器-属性选择器简单属性选择h1[class] {color: red;}<h1 class="hoopla">Hello</h1><h1 class="severe">Serenity</h1> 在XML文档中,属性原则器相当有用,因为XML语言主张要针对元素和属性的用途指定元素名和属性名。 选择以后moons属性的所有planet元素,使之显示为粗体,以便能更关注有moon转载 2017-10-09 12:05:06 · 254 阅读 · 0 评论 -
translate(-50%,-50%)实现居中
转载链接:http://www.imooc.com/qadetail/129282<!--html--><body><div>这是用来测试的</div></body>/*CSS*/div{position:absolute;top:50%;left:50%; /*如果把这几行删掉,不可以居中 */border...转载 2018-11-06 11:01:36 · 1485 阅读 · 0 评论 -
CSS3属性 box-sizing
规定两个并排的带边框的框:div{ box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; float:left;}box-sizing: content-b...原创 2018-10-18 16:04:19 · 281 阅读 · 0 评论 -
IE Chrome Ff隐藏滚动条
html { /*隐藏滚动条,当IE下溢出,仍然可以滚动*/ -ms-overflow-style:none; } /*Chrome下隐藏滚动条,溢出可以透明滚动*/ html::-webkit-scrollbar{width:0px;display:none} 谷歌自定义滚动条样式代码:/*----- 滚动条 -------*/::-webkit-scro...原创 2018-07-19 14:59:30 · 208 阅读 · 0 评论 -
img 变形问题
.box{ width: 300px; height: 300px; text-align: center; font-size: 0; } .box:before{ ...原创 2018-05-28 11:26:05 · 786 阅读 · 0 评论 -
CSS 居中div,文字底端对齐
水平居中:给div设置一个宽度,然后添加margin:0 auto属性div{ width:200px; margin:0 auto; }让绝对定位的div居中div { position: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; r...原创 2018-04-28 00:00:56 · 8280 阅读 · 0 评论 -
inline-block下空白字符兼容写法
.finally-solve { letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整兼容safari*/ word-spacing: -4px; font-size: 0;/*兼容Chrome*/}.finally-solve li { font-size: 16px; letter-spacing: normal; word-spaci...原创 2018-04-27 23:34:42 · 96 阅读 · 0 评论 -
CSS学习篇之 需要了解的CSS变量
1. 如何声明变量:root { --margin: 20px; --font-size: calc(20px * 2); --color: black; --background-color: #FFF;}变量声明的时候,在变量名之前加两根连词线(--);它们与color、font-size等正式属性并无不同,只是没有默认含义。所以CSS变量又被称为“C...原创 2018-03-28 22:44:28 · 307 阅读 · 0 评论 -
CSS3伪类与伪元素的区别及注意事项
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的伪类:用于向某些选择器添加特殊的效果伪元素:用于将特殊的效果添加到某些选择器讲道理,可能我语文不好,我觉得这两句话是等价的 :-) 根本不能看出有什么区别 都是对某些选择器“加特技”标准有这么一句话翻译过来是这样的CSS 引入伪类和伪元素的概念是为了实现基于文...转载 2018-04-03 09:38:21 · 505 阅读 · 0 评论 -
各知名网站初始化样式整理
在各个不同游览器内核渲染引擎的作用下,对于html标签纷纷定义了它们自己的样式,为了方便开发,使制作的网页效果能在不同的游览器上呈现出相同的效果,一般会在页面中引入初始化样式文件表(reset.css);以下是在网上收录的各大知名网站的初始化样式:腾讯:body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input...原创 2018-03-20 22:50:51 · 238 阅读 · 0 评论 -
详解 清除浮动 的多种方式(clearfix)
说明本文适合知道HTML 与 CSS基础知识的读者,或者想要了解清除浮动背后原理的读者!1.什么是浮动首先我们需要知道定位 元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式 1、普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素:按照从上到下的方式逐个排列 页面中的行内元素:按照从左到右的方式逐个排列 但是如何让多个块级...转载 2018-03-20 19:34:22 · 133 阅读 · 0 评论 -
链接属性值 nofollow 和 external nofollow 的作用与用法?
什么是 NoFollow?NoFollow 是 Google 曾经提出的一个新标签,目的是减少垃圾留言,解释当前页面与此链接指向页面之间的关系。使用了此标签表明链接与网站作者无关,也就是说搜索引擎不会用这个链接计算网站的 PR 值。很多博客程序都会自动在评论链接中加上 nofollow 标签。现在主流的 Blog 程序,如 WordPress 和 MovableType 均默认为 其留言与转载 2018-01-23 22:57:33 · 756 阅读 · 0 评论 -
常见浏览器兼容性问题与解决方案
转至:http://blog.csdn.net/chuyuqing/article/details/37561313所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要转载 2017-12-21 21:57:27 · 631 阅读 · 4 评论 -
移动端项目中 @2x 图 和 @3x 图 的使用(需要支持css3)
移动端开发过程中,因为手机的dpr(设备像素比不同),我们需要根据dpr来修改图标的大小:1.通过mixin,动态修改图标的背景图片。通过@media (媒体查询),判断设备的dpr。 1 2 3 4 5 6 @mixin bg-image($url) { background-image: url($ur...转载 2018-11-07 00:03:14 · 9648 阅读 · 1 评论