![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 57
sunsineq
这个作者很懒,什么都没留下…
展开
-
CSS图片水平垂直居中的三种方法
其次最重要的是设置图片元素的vertical-align属性为middle,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式。具体方式是先使用定位让图片向右和向下偏移父元素的50%,再相对自身向左和向上偏移50%,这样就实现图片在父元素水平垂直居中了。我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致。设置图片元素的父盒子为弹性盒子,让项目在主轴和侧轴的排列方式都居中。2.使用定位和translate。2.使用定位和translate。转载 2023-07-14 09:39:23 · 4946 阅读 · 0 评论 -
环形占比图
其中150px,75px,112.5px是等比例缩放,调整的时候根据比例进行调整就行了。原创 2023-06-30 16:19:24 · 164 阅读 · 0 评论 -
Flex 布局教程:语法篇
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。属性都为1,当空间不足时,都将等比例缩小。属性为0,其他项目都为1,则空间不足时,前者不缩小。转载 2022-09-25 17:39:45 · 109 阅读 · 0 评论 -
css3动画之后一次后保持最后状态
animation-fill-mode:forwards这个属性可以在动画完成后将动画最后的状态应用到元素上<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>div{width:100px;height:100px;background:red;/position:relative;/animat..原创 2020-07-14 17:05:16 · 2275 阅读 · 1 评论 -
高性能 CSS3 动画
尽可能的让动画元素不在文档流中,以减少重排 position:fixed; position:absolute; 尽可能多的利用硬件能力,如使用3D变形来开启GPU加速 -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3...转载 2020-08-13 16:23:07 · 254 阅读 · 0 评论 -
CSS-图片显示固定大小不压缩、不变形
实现让长方形图片显示出正方形且不变形的效果的效果,一般可以有2种方式来实现,一种是设置为背景图,另一种是用img标签。原图↓:背景图↓:一、背景图首先,我们来看一下通过设置背景图的方式来实现我们的需求,主要通过background-size属性来设置我们的背景图缩放比例。简单介绍一下background-size:background-size: contain; 自动调整缩放比例,保证图片始终 完整 的显示在背景区域,不裁剪图片background...转载 2021-10-20 12:50:42 · 10114 阅读 · 0 评论 -
CSS-文本换行处理-white-space
CSS-文本换行处理-white-space发表于2021-04-07|更新于2021-05-30|分类于技术-CSS|阅读次数:|阅读次数:14简介:本文主要介绍通过设置CSS的white-space属性来处理元素内的空白、空白符,以实现文本的不换行、自动换行、空白保留或合并。这边先列一下white-space可以设置的值,及其作用:一、normal作用:默认,空白会被浏览器忽略。HTML 12345 ...转载 2021-10-20 12:40:02 · 508 阅读 · 0 评论 -
css中如何让过宽的图片在页面中居中显示
在做网页的时候,插入一张图片,发现这张图片过宽,中间重要的内容不能完全显示出来,如下图所示如果让这张图片居中,岂不是美滋滋,但又发现了一个尴尬的问题,因为图片是在body中的,没办法居中。此时可能有人会想到可以使用定位让图片向左移动,这样虽然可以解决,但有个问题,如果用户缩放页面的话,这张图片又会变得不居中。是不是无解了,那就来看看我这种近似完美的方法吧。先看看刚刚那张图片的的位置,可以看到图片超过了浏览器窗口接下来先对图片进行绝对定位(或相对定位),相对左边框50%,p..转载 2021-08-03 17:49:45 · 758 阅读 · 0 评论 -
CSS中Body背景图片的自适应
CSS中Body背景图片的自适应html{ height:100%;}body{ background:url(../image/bg-m.jpg) no-repeat; background-size: cover;//或者background-size: 100% 100%;}background-size contain 与 cover 的区别在no-repeat情况下,如果容器宽高比与图片宽高比不同cover:图片宽高比不变、铺满整个容器的宽高,而图原创 2021-03-30 13:07:32 · 936 阅读 · 0 评论 -
css 背景铺满全屏,没有滚动条
<style> body{ background: url(images/bg.jpg) center center no-repeat; background-size: 100% 100%; background-attachment: fixed; }</style>原创 2021-03-30 13:06:57 · 649 阅读 · 0 评论 -
linear-gradient()图像渐变属性详解
对于linear-gradient()我学习的时候,查了很多资料,但是发现不管是网上还是一些书籍,都没有将这个属性的运用讲得明白,清楚,对此,我写了这篇博客,虽然不能保证每一位读者都能够看懂,但是也希望这篇博客能为你提供一些帮助,如有问题,请在博客中提出,谢谢。首先给大家讲的就是兼容性,在IE浏览器中这个属性的设置是不兼容的,当然在IE浏览器中也可以实现类似的效果,那边是滤镜(fliter)的作用了.其他的不同的浏览器也是有不同的,比如chrome一般要加-webkit-前缀,如:-webkit-lin转载 2021-03-05 09:59:15 · 8807 阅读 · 3 评论 -
英文字符换行加连接符的方式,目前火狐可以,其他浏览器需要查看是哪个版本
hyphensSummaryCSS属性hyphens告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符,也可以控制浏览器什么时候使用,或者让浏览器决定什么时候使用。连字规则具有语言特定性。在 HTML 中,语言由lang 属性决定,浏览器只会在当前属性存在且有合适的连字字典可用的情况使用连字进行连接。在 XML 中,必须使用xml:lang属性。注意::在规范中,没有明确定义连字符的实现规则,所以具体的连字符在不同浏览器中可能有所区别。初始值 ma...原创 2021-03-05 09:08:29 · 1005 阅读 · 1 评论 -
css图片居中(水平居中和垂直居中)
css图片居中(水平居中和垂直居中)css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍。css图片水平居中利用margin: 0 auto实现图片水平居中利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下:<div style="text-align: center; width: 500px; border: green solid 1px;">原创 2021-02-27 17:48:38 · 5373 阅读 · 4 评论 -
css定位、position与float同时使用的情况
一、css定位 CSS 有三种基本的定位机制:普通流、浮动和绝对定位。 1.普通流:未专门指定的元素都在普通流中定位,position:static/relative;和float:none;也在普通流中定位。 2.绝对定位:position:absolute/fixed;元素框脱离普通文档流。 3.浮动:float:left/right;元素脱离普通文档流。 二、对元素同时使用position和float的情况 经过实践发现.原创 2020-11-25 16:54:07 · 1021 阅读 · 0 评论 -
微信中的video属性设置
<video id="videoID" src="video.mp4" poster="loadbg.jpg" preload="auto" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline="true" playsinline="true"></video><videoid="videoID"src="vid...转载 2020-11-25 10:02:03 · 1204 阅读 · 0 评论 -
css3中的伪类before和after常见用法
before/after伪类相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪类应用相当的普及以及兴盛,不过貌似我们这边前端er们普遍缺乏使用这两个伪类的意识,要使用顶多也就是跟风的“清除浮动”应用。1.基本用法:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下:#example:before转载 2020-11-17 13:59:28 · 453 阅读 · 0 评论 -
对video标签设置不自动播放,隐藏下载功能,禁止右键另存为视频的操作
对video标签设置不自动播放,隐藏下载功能,禁止右键另存为视频的操作在video标签上添加了属性 autoplay=“autoplay” loop=“loop”,然而通过地址栏进去的时候,视频并没有自动播放, 找资料发现,添加 muted 属性,就可以通过地址栏进入网页的时候自动播放了。 <video id="video" src="xxxx/xxx.mp4" autoplay="autoplay" loop="loop" muted="muted" height="10...原创 2020-10-18 09:20:48 · 6799 阅读 · 0 评论 -
html标签a,video,button 点击出现 蓝色边框线, 阴影
1. :focus{ outline:none }2.a,标签有点特殊a,a:hover,a:active,a:visited,a:link,a:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;outline:none;background:none;text-decoration:none;...转载 2020-10-17 09:23:51 · 893 阅读 · 0 评论 -
1rem等于多少px (rem和px怎样转换)
1rem等于html根元素设定的font-size的px值如果css里面没有设定html的font-size,则默认浏览器以1rem=16px来换算。假如我们在css里面设定下面的csshtml{font-size:14px}那么后面的CSS里面的rem值则是以这个14来换算。例如设定一个div宽度为3rem,高度为2.5rem.则它换算成px为width:42px.height:35px同理,假如一个设计稿为宽度42px,高度为35px则换成rem,则是4...转载 2020-09-07 10:16:56 · 6755 阅读 · 1 评论 -
div水平垂直居中的六种方法
在平时,我们经常会碰到让一个div框针对某个模块上下左右都居中(水平垂直居中),其实针对这种情况,我们有多种方法实现。方法一: 绝对定位方法:不确定当前div的宽度和高度,采用transform:translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;) 图片展示: 代码如下:div{background:red;position: absolute;left:50%;...原创 2020-07-28 09:16:20 · 1462 阅读 · 0 评论 -
css 隔行换色
css 隔行换色 nth-child(n)中的n不仅仅可以是单个数字,也可以是一个表达式,如例: <style> .mytable tr:nth-child(2n){ background-color: red; } .mytable tr:nth-child(2n-1){ background-color: blue; } </style> <table class="mytable"> <tr&g...原创 2020-07-22 20:18:16 · 718 阅读 · 0 评论 -
CSS阴影样式大全(包含所有样式: demo代码全)看图看代码
常用的阴影样式<html><head> <title></title> <style type="text/css"> div{ padding-left: 20px; padding-right: 20px; padding-bottom: 20px; } div>h3{ text-align: center; }/*<!--转载 2020-07-17 13:23:52 · 1516 阅读 · 0 评论 -
jQuery CSS 操作 - offset() 方法
jQuery CSS 操作 - offset() 方法实例获得 <p> 元素当前的偏移:$(".btn1").click(function(){ x=$("p").offset(); $("#span1").text(x.left); $("#span2").text(x.top);});定义和用法offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。返回偏移坐标返回第一个匹配元素的偏移坐标。该方法返回的对象包含两个整型属性:top转载 2020-07-15 09:17:50 · 249 阅读 · 0 评论 -
css图片居中(水平居中和垂直居中)
css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍。css图片水平居中利用margin: 0 auto实现图片水平居中利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下:<div style="text-align: center; width: 500px; border: green solid 1px;"> <img alt="" sr...原创 2020-07-14 17:34:56 · 500 阅读 · 0 评论 -
单选按钮radio与文字如何对齐?
单选按钮radio与文字如何对齐?解决方法:1.以vertical-align:text-bottom为基础的css代码如下:vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px\9;2.以vertical-align:text-top为基础的css代码如下:height:13px; vertical-align:text-top; margin-top:0;3.以vertical-align:bottom为基础...原创 2020-07-14 17:06:54 · 2506 阅读 · 0 评论 -
css中链接a的样式 a{blr:expression(this.onFocus=this.blur())}
a{blr:expression(this.onFocus=this.blur())}blr没有特殊意思,expression 条件,这句话的意思是链接 a 在获得焦点的同时失去焦点。如果你用的是图片链接什么的,他不会显示周边的虚线。此段代码的作用是清除 A 链接在点击时会产生虚线的问题。三种写法:1、正常写法 1 <ahref="#" onfocus=this.blur();>链接标题</a> 2、CSS写法 .原创 2020-07-14 10:12:21 · 1135 阅读 · 2 评论 -
火狐兼容性问题
1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width转载 2020-07-10 16:21:31 · 1026 阅读 · 0 评论 -
Css 常用属性
Css 常用属性目录导航1. overflow:hidden和zoom:1 2.ul li 3.dl dd dt 4.outline 5.背景色渐变按钮 6.背景图片(兼容)1.overflow:hidden和zoom:1verflow:hidden;的作用1. 隐藏溢出 ;2.消除浮动<style type="text/css">#div1 { height:auto;border:solid 1px red;zoom:1;overflow...原创 2020-07-10 16:14:44 · 192 阅读 · 0 评论 -
CSS hack:针对IE6,IE7,firefox显示不同效果
CSS hack:针对IE6,IE7,firefox显示不同效果做网站时经常会用到,衡量一个DIV+CSS架构师的水平时,这个也很重要。区别不同浏览器的CSS hack写法:区别IE6与FF:background:orange;*background:blue;区别IE6与IE7:background:green !important;background:blue;区别IE7与FF: background:orange; *background:gre...原创 2020-07-10 16:01:46 · 172 阅读 · 0 评论 -
HTML5 respond.js 解决IE6~8的响应式布局问题
目录导航一、书写基本样式 二、插件原理 三、核心结论 四、文档提示 五、实例demo CDN的支持 响应式布局,理想状态是,对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑。 那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这样一个文件:respond.js。文件下载地址:https://github.com/scottjehl/Respond。原创 2020-07-10 15:08:49 · 184 阅读 · 0 评论 -
移动端像素与viewPort
viewport是什么?设备屏幕上能用来显示网页的哪一块区域。具体点说 ,就是浏览器或APP的webview用来显示网页的那部分区域。css中的像素与设备的物理像素在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。在移动设备上,必须明白这点。安卓设备根转载 2020-07-10 14:59:24 · 87 阅读 · 0 评论 -
css伪类 :before和 :after的使用详解 以及实现的一些效果
css伪元素 ::before和::after的使用详解 以及实现的一些效果之前写过css 伪类的文章,但是不是很详细 。只是总结伪类和伪类元素。今天就详细特说一下 :before和:after的使用。CSS - :before 伪元素基本用法如下:“::before” 伪元素可以在元素的内容前面插入新内容。#example:before { content: " "; color: red;}“:after” 伪元素可以在元素的内容之后插入新内容。#example:a...转载 2020-07-10 14:56:38 · 1033 阅读 · 0 评论 -
16种方法实现水平居中和垂直居中【转载】
水平居中1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.2) 若是块级元素, 该元素设置 margin:0 auto即可.3) 若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置: .parent{ width: -moz-fit-content; width: -webkit-fit-content; .转载 2020-07-10 14:43:59 · 325 阅读 · 0 评论 -
css如何让图片全屏显示?
一张清晰漂亮的背景图片能给网页加分不少,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动。以下是用CSS实现图片全屏显示的方法:html:<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-转载 2020-07-09 21:43:37 · 5570 阅读 · 0 评论 -
css内容过长显示省略号的几种解决方法
单行文本(方法一): 语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (clip这个参数是不常用的!) ellipsis : 当对象内文本溢出时显示省略标记(...) 说明:设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。 ...转载 2020-07-06 11:30:35 · 1474 阅读 · 0 评论 -
CSS will-change 属性
介绍如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了CPU、GPU和硬件加速硬件加速意味着Graphics Processing Unit(GPU)会通过代替Central Processing Unit(CPU)做一些负荷比较大的事情,来协助浏览器快速渲染页面,当CSS操作使用硬件加速的时候,通常会使页面渲染速度加快顾名思义,CPU和GPU都是计算机处理单元。CPU在电脑主板,几乎处理电脑的一切操作,有电.原创 2020-07-03 17:37:29 · 811 阅读 · 0 评论 -
html初级p标签带来的块级元素与内联元素的嵌套问题
学了这么久,感觉html实在是没有什么可学的,但是还是太年轻了。猜一猜浏览器会怎么解析下面的代码:想不到吧,结果竟然是这样的:以前从来没有写过这样的代码,p标签嵌套p标签这种的,或者说可能一不小心写过,但是浏览器没出什么差别所以自己也忘了。但是今天真的被重重打了一锤,p标签是块级元素,是不能再嵌套块级元素的。但是那为什么div也是块级元素,却可以嵌套p标签呢,问题来了:有几个特殊的块级元素只能包含内联元素,而不能包含块级元素,他们分别是h1-h6,p,dt。所以刚才的代码,浏览.原创 2020-06-28 08:31:49 · 294 阅读 · 0 评论 -
CSS完全兼容IE6、IE7、IE8、IE9和firefox方法【重要】
1、圆角左上角、右上角、右下角、左下角(顺时针)/* Gecko browsers */-moz-border-radius: 20px 20px 20px 20px;/* Webkit browsers */-webkit-border-radius: 20px;/* W3C syntax */border-radius:20px;2、(十年积累)div+css完全兼容ie6 ie7 IE8 IE9和firefox方法简单方法:IE6,IE7,IE8,FF的兼容方法(...转载 2020-06-11 22:42:28 · 974 阅读 · 0 评论 -
CSS兼容IE6、IE7、IE8和Firefox浏览器的方法
DIV+CSS相对IE6 IE7和IE8兼容问题整理 1.区别IE和非IE浏览器以下是代码片段:#tip{background:blue;/*非IE背景?色*/background:red\9;/*IE6、IE7、IE8背景?色*/} 2.区别IE6,IE7,IE8,FF 【区别符号】:「\9」、「*」、「_」 【示例】:以下是代码片段:#tip{background:blue;/*Firefox背景变蓝色*/background:red\9;/*IE8背景变红色*/*b转载 2020-06-11 22:36:39 · 206 阅读 · 0 评论 -
css浏览器兼容问题的一些总结(IE6等)
说到浏览器兼容问题,所有前端开发人员肯定都遇到过,这个问题需要面对,也必须得面对。记得2011年年底,刚刚来兴安得力实习的时候,做的第一个页面是一个信息港的页面,布局完这个页面之后。领导第一次让我考虑浏览器兼容问题,让我下载了IEtester。对各个浏览器进行测试,也是这一次,我才了解到,做网站还要考虑浏览器兼容,不同浏览器可能有不同的效果。在这个时候,我刚刚接触IE6,对IE6是既爱又恨,爱它使我增长了不少见识,恨他是有很多问题让我浪费了大量的时间,且达不到我想要的效果。在这个时候,由于我代码书写规范原创 2020-06-11 22:16:45 · 224 阅读 · 0 评论