CSS
关注
分享
扫一扫
soosgo
这个作者很懒，什么都没留下…
展开
-
CSS3制作波浪的动画效果
使用css3制作波浪的移动效果原创 2023-04-25 09:21:59 · 1606 阅读 · 2 评论 -
css中 calc不生效
calc()函数生效问题：1.运算符前后必须空格隔开，否则不生效；常用的长度值几乎都可以使用calc()函数进行计算（包括%，px等），calc()函数支持 “+”, “-”, “*”, “/” 运算；2.calc()函数在less中不能使用不生效（less的运算方式和calc发送了冲突），比如calc(100% - 250px )会被编译为calc(-150% )，解决办法将函数写为calc(~“100% - 250px”)...原创 2021-08-05 11:34:51 · 2186 阅读 · 0 评论 -
css文件与资源路径相关
css文件与资源路径相关：../表示当前文件所在层级的上一层级。./表示当前文件所在的层级。/表示根目录。原创 2021-01-05 14:49:43 · 186 阅读 · 0 评论 -
Flex 布局
Flex 布局网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法，下一篇文章给出...转载 2021-01-05 10:25:33 · 142 阅读 · 0 评论 -
CSS中link和@import的区别
外部引入CSS有2种方式，link标签和@import。1.从属关系区别@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。2.加载顺序区别加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。3.兼容性区别@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。原创 2020-08-28 16:27:25 · 207 阅读 · 0 评论 -
CSS3自适应布局单位vw，vh
在说这两个单位之前，我们首先明白一个概念，什么是视口（Viewport）？在桌面端，视口指的是浏览器的可视区域即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小；在移动端，涉及3个视口：Layout Viewport(布局视口)，Visual Viewport(视觉视口)，Ideal Viewport(理想视口)，而视口Viewport指的就是Layout Viewport(布局视口)。什么是vw(viewport W原创 2020-08-28 15:20:39 · 542 阅读 · 0 评论 -
CSS类选择器
[class*="col-"]选择所有类名中含有"col-"的元素，col-也可以是col-6等形式。[class^="col-"]选择所有类名中以"col-"开头的元素。[class$="-col"]选择所有类名中以"-col"结尾的元素。...原创 2018-08-13 17:17:27 · 344 阅读 · 0 评论 -
display:table;使用小结
IE8支持很多新的CSS display属性值，包括与表格相关的属性值：table、table-row和table-cell，它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束，同时也给了HTML表格布局致命一击。最终，使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。一、为什么不用table元素？目前，在大多数开发环境中已经不用table原创 2018-01-10 14:26:27 · 22597 阅读 · 3 评论 -
webfont字体的使用
在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3，web 设计师可以使用他们喜欢的任意字体。当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在 CSS3 @font-face 规则中定义的。浏览器支持：Firefox、Chrome、Safari 以及 Ope原创 2018-01-10 15:35:03 · 2624 阅读 · 0 评论 -
响应式与自适应的区别
先给大家体验一下响应式和自适应的区别，请放大缩小一下屏幕尝试 ：响应式的体验：segmentfault官网自适应的体验：携程wap APP起初，网页设计者都会设计固定宽度的页面，最开始的电脑显示器分辨率种类不多，因为当时电脑本来就少，即使有变化也是 800 850 870 880。后来随着显示器越来越多，以及笔记本的普及，这种方式的页面出现了问题。于是出现了一种新的布局方式宽度自适应布局。我们平时转载 2017-12-29 15:33:57 · 706 阅读 · 0 评论 -
关于IE7半透明背景问题
透明度和半透明背景是我们在编辑前端页面时经常使用的CSS属性，但是这两个属性在IE8以下的IE浏览器却不兼容性。透明度我们都知道通过opacity:0.5;filter:alpha(opacity=50);进行去兼容低版本的IE浏览器，但是对于半透明背景却没有比较实用的方法。下面是关于半透明背景在低版本浏览器使用的一个小的总结，希望对大家有帮助！1、通过filter:progid:DX原创 2017-12-28 17:07:28 · 1036 阅读 · 0 评论 -
鼠标悬浮图片特效
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>背景图片悬浮放大</title> <style> *{padding: 0px;margin: 0px;} .container{width: 80原创 2018-09-03 17:36:47 · 635 阅读 · 0 评论 -
table边框合并
border-collapse 属性设置是否将表格边框折叠为单一边框：表格文字对齐方式：原创 2018-11-15 22:06:57 · 1121 阅读 · 0 评论 -
css选择器权重问题
css选择器简单分为标签选择器、类选择器、id选择器以及通配选择器，那么选择器的优先级是怎么排序的呢？优先级：ID选择器>类选择器>标签选择器>通配选择器。当然除了这四种基本选择器还有很多的组合选择器，那么组合选择器的优先级怎么计算呢？我们通常通过选择器的权重进行计算，各选择器的基本权重如下：那么组合选择器的权重就是个选择器的权重之和，权重大的优先级就高，就优...原创 2018-12-05 21:36:43 · 329 阅读 · 0 评论 -
web前端响应式布局
一理解几种布局的概念1、静态布局（Static Layout）即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置； 对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。2、弹性布局 弹性布局是CSS3引入的强大的布局方式，用...转载 2019-01-20 17:46:28 · 1370 阅读 · 0 评论 -
nth-child和:nth-of-type的区别
:nth-child可以选择父元素下的子元素，:nth-of-type也可以。但是它们到底有什么区别呢？ 其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素， 而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。 ...转载 2019-01-28 14:42:15 · 414 阅读 · 0 评论 -
clip做loading图标
定义：clip 属性剪裁绝对定位元素，和绝对定位一块使用position:absolute;或position:fixed;一块使用。语法：rect (top,right,bottom,left)。通过clip结合css3做loading动画，代码如下：<!DOCTYPE html><html> <head> <meta cha...原创 2019-07-27 11:39:58 · 222 阅读 · 0 评论 -
修改滚动条样式
/*scrollbar style*/::-webkit-scrollbar { width: 8px; height: 8px; background-color: #fff}::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #bfbfbf}::-webkit...原创 2019-08-07 11:30:52 · 279 阅读 · 0 评论 -
关于input的placeholder内容的样式问题
有时候我们需要使用input的placeholder内容，但是内容的字体又有颜色或其他要求，那怎么办呢，以下是我的简单的总结的input的placeholder的内容样式的修改，以便后期查阅： input::-webkit-input-placeholder {color: #FFFFFF;font-weight: 600;font-size: 14px;} input原创 2017-07-27 13:59:29 · 3042 阅读 · 0 评论 -
background相关属性
一、设置背景色：background-colorbackground-color: transparent || background-color其主要用来设置元素的背景颜色，其默认值为transparent（不设置任何颜色情况下是透明色），用来设置背景色彩，常用的颜色格式为：颜色名：如“red”；rgb色:如rgb(255, 0, 0)或rgb(100%, 0%, 0%)；h原创 2016-09-26 09:37:52 · 460 阅读 · 0 评论 -
背景设置透明度字体不透明
如果想将背景设置透明度，但是又要保证其中的字体透明度不变，可以通过background属性background:rgba(255,255,255,0.6);来设置，背景透明度为0.6，字体透明度不变。原创 2016-09-26 09:42:30 · 7092 阅读 · 0 评论 -
appearance属性：
appearance属性允许您使元素看上去像标准的用户界面元素。语法：appearance:normal|icon|window|button|menu|field;对应值：normal:将元素呈现为常规元素。icon:将元素呈现为图标（小图片）。window:将元素呈现为视口。button:将元素呈现为按钮。menu原创 2016-09-26 09:44:53 · 949 阅读 · 0 评论 -
word-wrap与word-break的区别
word-wrap与word-break一直都分得不是很清楚，在这里再细分一下：word-wrap与word-break一般都是用于是否允许单词内断句。word-wrap首先是先将长单词换行，看新的一行是否能容纳这个长单词，如果还放不下就会在单词内断句。word-break就非常果断啦，第一word-break不会首先换行，而是在当前行内，如果放不下该单词，就直接在末尾处单词内断句。原创 2016-12-24 09:47:49 · 599 阅读 · 0 评论 -
table中元素的border不显示问题
一般写的时候也没有太在意，但是最近用table时，老是出现table中的tr的border不显示问题，于是就搜了一下，在此特意记录一下如果遇到这种现象在table的样式中添加border-collapse: collapse;即可解决！原创 2016-12-27 17:49:49 · 8979 阅读 · 0 评论 -
自定义radio与checkbox的样式
由于input中的radio与checkbox的样式比较单一而且样式不是很美观，所以我们一般都想定义一个自己比较喜欢的样式，偶然发现这种自定义方法比较容易理解，在此特意分享一下：首先是自定义单选框样式及复选框样式具体代码如下： split方法 *{ margin: 0; padding: 0; } .one{ margin:原创 2016-12-30 14:11:06 · 4012 阅读 · 0 评论 -
使用阿里巴巴图标库生成iconfont字体图标
iconfont字体图标就是用字体来代替图标、图片文件的做法，并且通过字体图标可以对图标的大小、颜色等进行控制，但是缺点就是只能实现一种颜色，不能像图片那样含有各种颜色。通过阿里巴巴图标库制作字体图标步奏如下（默认已注册阿里巴巴图标库）：1、首先搜索所要展示的图片，找到后点击入库。2、点击入库的图标，结果如下图所示，选择添加至项目或点新建项目。3、点击确定之后如下图所示，鼠原创 2017-01-09 17:22:13 · 15264 阅读 · 4 评论 -
浏览器兼容性问题：页面错乱 兼容模式和急速模式
在做web工程时总是出现兼容模式css样式就没有了，整个页面就错乱了的现象。看了这篇文章会对浏览器的模式有一些了解http://old.ui3g.com/artdetail.aspx?id=153IE浏览器从IE8开始添加了兼容模式，开启后会以低版本的IE进行渲染。兼容模式有可能会导致网页显示出问题，于是我们通常在HTML中添加下列代码来使 IE 使用固定的渲染模式：转载 2017-02-28 17:09:24 · 3325 阅读 · 0 评论 -
CSS书写规范 顺序
注意事项：css中所有命名最好都用小写表现与结构完全分离，代码中不涉及任何表现元素，如style、color...到的定义，应遵循从大到小的原则，体现文档的结果，而且有利于搜索引擎的查询给每个表格和表单加上一个唯一的、结构标记id给图片加上alt标签尽量不缩写，除非是一看就明白的单词不建议使用"_"下划线来命名CSS选择器，可以用"-"中划线，因为输入的时候少按一下shift键；浏览器转载 2017-05-16 14:04:53 · 887 阅读 · 0 评论 -
超过单行多余的显示...与显示多行超出的显示...
超出一行多余的显示"..."与显示多行超出的显示"..."是我们经常遇到了，但是老是容易忘记，在此特意记录一下超出一行多余的显示"...".class{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }超出一行多余的显示"...".class{ over原创 2017-04-24 17:33:42 · 1566 阅读 · 0 评论 -
media的使用规则
关于media的的使用规则，对于不同的浏览器设备或屏幕大小选择不同的css样式，可使用如下写法：原创 2017-06-05 21:00:31 · 544 阅读 · 0 评论 -
关于left与offsetLeft的区别
style.left&&offsetLeft区别offsetLeft获取的是相对于父对象的左边距，获取的结果是一个数值，可以用于计算，是个只读属性另外，如果要修改元素offsetLeft属性值只能通过style.left修改。left获取或设置相对于具体有定位属性（position定义不为static）的父对象的左边距，其返回的结果是一个字符串，可以对其进行获取或设置，另外，sty原创 2017-06-06 15:38:09 · 2127 阅读 · 0 评论 -
媒体查询分界点阈值
在栅格系统中，我们在Less文件中使用以下媒体查询（media query）来创建关键的分界点阈值。/*超小屏幕（手机，小于768px）*//*没有任何媒体查询相关的代码，因为这在Bootstrap中是默认的（Bootstrap是移动设备优先的）*//*小屏幕（平板，大于等于768px）*/@media(min-width:@screen-sm-min){...}/*中等屏幕（转载 2017-06-22 17:02:11 · 3017 阅读 · 0 评论 -
关于IE7的display:inline-block失效问题
有时候我们必须要有display：inline-block;属性，但是IE7并不支持，这是开发过程中经常会遇到的问题，下面特意记录一下以便后期使用：解决IE7不支持display：inline-block问题：.selector{display:inline-block;*display:inline;*zoom:1;}注意：zoom:1是必须的。原创 2017-06-14 15:16:38 · 1040 阅读 · 0 评论 -
lt IE8
.browserupgrade{ width: 100%; height 100%; text-align:center; } .browserupgrade .tip{原创 2017-07-05 16:43:15 · 617 阅读 · 0 评论 -
关于手机尺寸的问题
最近关于移动端高度设置多少合适，比较苦恼，就搜集了一些移动端的尺寸，再次特意总结一下以便下次使用。4/4S是3.5英尺 分辨率是320*4805/5S是4英寸 分辨率是320*5686/6s是4.7英寸 分辨率375*6676P/6SP是5.5英寸 分辨率414*736由于安卓手机型号很多，就算尺寸一样，分辨率也可能会不一样。一般样式方面用flex/box布局的话原创 2017-06-28 13:22:59 · 580 阅读 · 0 评论 -
display:box;与display:flex;区别
display:box;是09年以前的弹性盒模型，display:flex;是12年新出的css属性，两者没有什么区别，仅是各阶段草案命名不同，推荐使用display:flex;(个人意见仅供参考)原创 2017-07-10 14:51:59 · 976 阅读 · 0 评论 -
CSS样式表中的z-index总结
CSS中的z-index属性用于设置节点的堆叠顺序，z-index的值越大同一层次上对象显示的越靠上，但是只有在设置了position 的基础之上的，必须对position设置为relative、absolute、fixed ，z-index属性才生效。原创 2015-12-06 10:16:09 · 631 阅读 · 0 评论