CSS
文章平均质量分 60
古兮!怪哉
这个作者很懒,什么都没留下…
展开
-
一些不常用的CSS伪类选择器的使用技巧
1. 属性值正则匹配选择器1)介绍在这里插入代码片(1)[attr^=“val”]:匹配attr属性以字符val开头的元素(2)[attr$=“val”]:匹配attr属性以字符val结尾的元素(3)[attr*=“val”]:匹配attr属性包含字符val的元素2)应用:过滤搜索技术<input type="search" /><ul> <li da...原创 2019-11-21 10:11:17 · 409 阅读 · 0 评论 -
position中的sticky
设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。特点:1)该元素并不脱离文档流,仍然保留元素原本在文档流中的位置;2)当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置(相对于父容器为fi转载 2017-09-07 21:13:01 · 316 阅读 · 0 评论 -
DIV+CSS实现盒子居中的几种方法比较(考虑兼容性)
例子中html代码如下:为了让结果更清晰加上如下的css样式.center{ width:100px; height: 100px; background-color: gray;}1. 实现水平居中1) margin: 0 auto——IE6-8,chrome和mozilla测试有效这是常用的方法,该方法兼容IE6-8,chrome和mozilla原创 2017-08-19 10:10:53 · 1072 阅读 · 0 评论 -
CSS中link 和@import的区别
1)link属于HTML标签,而@import是CSS提供的;2)页面被加载的时,link会同时被加载,而使用@import引用的CSS会等到引用它的CSS文件被加载完再加载;3)@import只在IE5以上才能识别,而link是HTML标签,无兼容问题;4)link方式的样式的权重高于@import的权重。转载 2017-09-16 10:56:13 · 519 阅读 · 0 评论 -
CSS 选择符有哪些?哪些样式可以继承?优先级算法如何计算? CSS3新增伪类有那些?
1、选择符:1)id选择器(#myid)2)类选择器(.myclass)3)标签选择器(div,h1,p)4)相邻选择器(h1+p)5)子选择器(ul>li)6)后代选择器(li a)7)通配符选择器(*)8)属性选择器(a[rel="external"])9)伪类选择器(a:hover,li:nth-child)2、样式继承1)可以继承的样式:转载 2017-09-16 14:51:45 · 2295 阅读 · 0 评论 -
CSS图片下面产生间隙的6种解决方案
在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是「见机行事」,根据原因的不同要用不同的解决方法,这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳, 供大家参考。1、将图片转换为块级对像即设置img为:display:block;在本例中转载 2017-09-10 14:22:57 · 3407 阅读 · 0 评论 -
BFC宽度自适应布局
BFC:块级格式化上下文,它指的是一个独立的块级渲染区域,只有Block-level Box参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。BFC的生成(1)float的值不为none;(2)overflowd的值不为visible;(3)display的值为inline-block, table-cell, table-caption;(4)position的值为absolu...转载 2017-07-31 23:04:18 · 601 阅读 · 0 评论 -
CSS如何设置多重边框
div1div21. box-shadow语法:box-shadow: h-shadow v-shadow blur spread color inset;.div1{ width: 200px; height: 50px; border: 5px solid red; margin: 20px; box-shadow: 0 0 0 10p原创 2017-09-02 22:24:47 · 400 阅读 · 0 评论 -
何时使用img标签,何时使用background-image背景图像
在什么情况下更适合使用HTML IMG标签来显示一个图像,而不是一个CSS有背景图像,反之亦然? 如下场景使用img标签比较合适: 1、如果图像是等内容的一部分或图表或人(真正的人,而不是股票图人),使用Img标签加上alt属性。 2、如果你想打印页面并且你想要的图像包括默认情况下使用IMG。 3、使用IMG(alt文本)图像有一个重要的语义时,比如一个转载 2017-10-14 11:51:36 · 1221 阅读 · 0 评论 -
HTML 5 的data-* 自定义属性
HTML 5 增加了一项新功能是 自定义数据属性 ,也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。例如: 1、使用attribute方法存取 data-* 自定义属性的值JavaScript代码:// 使用getAttr转载 2017-11-14 11:14:18 · 367 阅读 · 0 评论 -
纯CSS实现SVG路径描边动画效果
SVG中有一个比较重要度属性,stroke。stroke有很多兄弟属性:1)stroke:线的颜色;2)stroke-width:线的宽度;3)stroke-linecap:线的端点,可用值有butt、round、square、inherit;4)stroke-dasharray:虚线描边,可用值为none、(一个逗号或空格分隔的数值列表)、inherit。表示各个虚线端的长度。可原创 2017-11-15 10:18:23 · 4432 阅读 · 0 评论 -
html、js和css的加载和执行顺序
1)js加载后立即执行;2)js执行时会阻塞页面后续的内容(包括页面的渲染和其他资源的下载)。原因:因为浏览器需要一个稳定的dom树结构,而js中很可能有代码直接改变了dom树的结构,比如使用了document.write或者appendChild,甚至使用页面跳转。3)如何优化js(1)将所有的script标签放到页面底部,也就是body闭合标签之前,这能确保这脚本执行前页面已经完成了D...原创 2019-04-23 21:10:31 · 5290 阅读 · 0 评论 -
利用Tween实现轮播动画
简介:之前在两个项目的开发过程中都遇到轮播动画,因此,今天结合自己的开发经验进行一定的分享,下面是自己用vue做的一个简单的demo。这个例子的实现主要用的是TweenMax插件+scrollTop实现的。下面的Gif是实现的效果。html:css:为了让轮播效果更加自然,隐藏了滚动条。此外,这里安利一个css属性object-fit,主要用于img标签中图片的定位。本文在...原创 2019-08-08 10:08:13 · 808 阅读 · 1 评论 -
z-index合适会生效?
z-index的默认值是0,只有当该元素设置了position时(static除外),z-index才会生效。原创 2017-09-07 17:18:59 · 799 阅读 · 0 评论 -
margin上下重叠问题
边界叠加简介边界叠加是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,当两个垂直边界相遇时,它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。 1)元素的顶边界与前面元素的底边界发生叠加当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加,如图:2)元素的顶边界与父元素的顶边界发生叠加当一个元素包含在另一个元素中...转载 2017-09-06 10:44:39 · 983 阅读 · 0 评论 -
position的值,relative和absolute分别相对于什么定位
absolute:生成绝对定位的元素, 相对于最近一级的定位不是 static 的父元素来进行定位。fixed:(老IE不支持)生成绝对定位的元素,通常相对于浏览器窗口或 frame 进行定位。relative:生成相对定位的元素,相对于其在普通流中的位置进行定位。static: 默认值。没有定位,元素出现在正常的流中sticky:生成粘性定位的元素原创 2017-09-14 09:42:23 · 2263 阅读 · 0 评论 -
用CSS画实心三角形和空心三角形
(1)实心三角形htmlcss.sanjiao{ border-left: 10px solid transparent; border-bottom: 10px solid red; border-right: 10px solid transparent; border-top: 10px solid transparent; width: 0原创 2017-08-01 23:40:20 · 3016 阅读 · 0 评论 -
关于CSS中的样式继承
1. 所有元素可继承:visibility和cursor。2. 内联元素可继承(都是关于字体的一些样式):letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-tra原创 2017-07-24 20:36:27 · 543 阅读 · 0 评论 -
html中元素尺寸、坐标的获取
html asdasdcss*{margin:0;padding:0;} img{ border:0; width: 1780px; height: 1080px; } .main{ width: 350px; height: 200px; background: green; position: relative原创 2017-08-02 13:48:06 · 1121 阅读 · 0 评论 -
JavaScript中如何用原生的js获取style样式
1. Element.style该方法只能获取到内联样式,而无法获取到和中的样式例如:测试 function getStyle(obj){ var color=obj.style.color; alert(color) }但是当没有内联样式时,则无法获取到默认样式,原创 2017-08-17 15:37:36 · 5877 阅读 · 1 评论 -
中英文换行
html:sda dcxmmm sadsads adsadsda dcxmmm sadsads adsadsda dcxmmm sadsads adsadsda dcxmmm sadsads adsadsda dcxmmm sadsads adsadcss: .content{ width: 50px; background: yellow; mar原创 2017-08-17 22:33:16 · 441 阅读 · 0 评论 -
Reflow和Repaint的基本认识和优化
1. 什么的Repaint和Reflow浏览器解析大概的工作流程:这张图应该很好理解,归纳为四个步骤:1) 解析HTML以构建DOM树:渲染引擎开始解析HTML文档,转换树中的html标签或js生成的标签到DOM节点,它被称为——内容树;2) 构建渲染树:解析CSS(包括外部CSS文件和样式元素以及JS生成的样式),根据CSS选择器计算出节点的样式,创建另一个树——渲染转载 2017-08-18 10:16:47 · 423 阅读 · 0 评论 -
关于css hack在浏览器兼容性问题上的使用
考虑到目前有很多浏览器,尤其是其中还有IE6、IE7这样的老版本的浏览器,不同浏览器对css的解析情况不一样。为了能兼容不同的浏览器,我们使用css hack来实现在不同浏览器中得到想要的页面效果。本文只罗列出常用的方法,具体的使用,可以参考css hack在百度百科中的使用说明。(1)下划线"_"和中间线"-":用来选择IE6及以下。但是为了避免与一些带有中间线的属性混淆,我们通常使用下原创 2017-08-19 16:01:52 · 338 阅读 · 0 评论 -
如何制作网页中回到顶部的悬浮按钮
html代码如下:<div class="top"> <span title="Top" id="topArrow"></span></div>css:(添加一定的美化效果).top{ width: 50px; height: 100px; background-color: rgba(0,0,255,0.5); border原创 2017-08-19 17:21:47 · 9981 阅读 · 3 评论 -
从Web前端优化网站性能
1. 减少HTTP请求数一个完整的请求都需要经过DNS存址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个漫长而复杂的过程。资源上由于每个请求都要携带数据,因此每个请求都需要占用带宽。另外,由于浏览器进行并发请求的请求数是有上限的,因此请求数多了以后,浏览器需要分批进行请求,因此会增加用户的等待时间,会给用户造成站点速度慢这样一个印象,即使可能用户能看到的第一屏的资源都已经请求完了,...转载 2017-08-05 12:31:20 · 877 阅读 · 0 评论 -
IE6中一些样式Bug及其解决方法
1. IE6双边距Bug当页面上的某个元素使用float:left浮动时,则设置margin后的实际效果会变成2倍。例如在IE6中设置float: left; margin-left: 10px;,则实际得到的margin-left是20px。解决方法:加入display: inline2. IE6中奇数宽高的BugIE6中奇数的宽高显示大小与偶数宽高显示大小存在一定不同。例如设置width:10...原创 2017-08-19 20:30:06 · 668 阅读 · 0 评论 -
浏览器内核介绍
浏览器内核就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也不同,因此同一个网页在不同内核的浏览器中的渲染效果不同。这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。浏览器的内核分为两个部分,一是渲染引擎,另一个js引擎。但是,现在的js引擎比较独立,内核更倾向于原创 2017-08-02 09:10:41 · 337 阅读 · 0 评论 -
内联元素可以嵌套块级元素吗?
从XHTML标准的定义来说,不论是a还是span的内部都是不能放快元素的。在h4的任何doctype声明下,都不允许a嵌套div,而html5的doctype声明下允许a嵌套div。xhtml strict下 ,在没有额外css的描述下,内联元素完全无法嵌套块级元素。xhtml Transitional下面 ,这种嵌套被接受 ,但是具体的表现行为被浏览器所解释。事实上 一个标签的默认属原创 2017-09-13 15:06:34 · 3023 阅读 · 0 评论 -
css阻塞与js阻塞
js的阻塞特性:所有浏览器在下载JS的时候,都会阻止一切其他活动,比如其他资源的下载,内容的呈现等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提供用户体验,新一代浏览器都支持并行下载JS,但是JS下载仍然会阻塞其他资源的下载(例如图片,css文件等)。由于浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以会阻塞其他的下载和呈现。嵌入JS会阻塞转载 2017-07-30 22:52:47 · 641 阅读 · 0 评论