![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css样式
文章平均质量分 82
Eighteen Z
此人不懒,但还是什么都没写。
展开
-
关于Div 高度height: auto 时的计算规则。
自身height>子元素为block且指定了高度>子元素为block时内容的高度>其他其他包括子元素为行内,行内块,自身的line-height(font-size)等。会以line-height,font-size为最小高度,然后谁大取谁。(最后一部分优先级较为麻烦,不便记忆,以实际效果为准。)...原创 2021-04-01 14:28:05 · 2626 阅读 · 0 评论 -
CSS揭秘:6.复杂的背景图案(下)
文章目录前言一、网格Svgsvgcss小结相关阅读前言上一篇文章中我们学会了如何使用实现棋盘背景的方法,但是显而易见的代码量是比较多的。那么怎么可以优化代码量,降低维护成本呢?一、网格Svg我们可以看到下面的代码,其实内容是比较多的。如果要修改格子的尺寸或者颜色,要同时修改好几个地方。当然我们可以通过scss或者less等工具提取变量简化代码,但是代码量依然很多。 width:200px; height:200px; background: #eee; background: #e原创 2021-02-26 16:47:21 · 368 阅读 · 0 评论 -
CSS实验:linear-gradient 详解及实践
文章目录前言一、 介绍示例小结二、场景用法1. 四角边框背景2.读入数据总结前言 本文想要介绍一些linear-gradient的更多实用性比较强的用法,前面有根据CSS揭秘总结的讲线性渐变实现条纹背景的方法。CSS揭秘:5.条纹背景(上)一、 介绍示例 background: linear-gradient(red, yellow, blue); background: linear-gradient(red 0%, yellow 50%, blue 100%); back原创 2020-11-16 19:01:21 · 12042 阅读 · 2 评论 -
CSS揭秘:6.复杂的背景图案(上)
文章目录前言一、网格1. 网格 First Try总结相关阅读前言上一篇文章中我们学会了如何使用渐变实现条纹状的背景,但是实际上条纹背景并不是我们能实现的唯一的背景图案,利用渐变我们可以实现很多更为复杂的图案,本篇会介绍一些其他的简单而实用的背景图案。提示:以下是本篇文章正文内容,下面案例可供参考一、网格网格的原理其实很简单,目前我们已经实现了条纹背景,那么如果我们将条纹背景组合呢?互相穿插组合,那么是不是很简单就实现了各种各样的网格背景。1. 网格 First Try代码如下:wi原创 2020-09-21 10:05:03 · 643 阅读 · 0 评论 -
CSS揭秘:5.条纹背景(下)
上篇文章讲述了实现条纹效果所使用的CSS特性并实现了水平和垂直条纹,接下来我们来实现斜向条纹。回忆一下之前的效果水平条纹background: linear-gradient(#fb3 33%, #58a 0, #58a 66%, yellowgreen 0);background-size: 100% 60px;垂直条纹background: linear-gradient(90deg, #fb3 33%, #58a 0, #58a 66%, yellowgreen 0);backgro原创 2020-07-08 12:23:53 · 553 阅读 · 1 评论 -
CSS揭秘:5.条纹背景(上)
条纹背景背景知识:CSS线性渐变,background-sizeCSS线性渐变 background: linear-gradient(red, yellow, blue); background: linear-gradient(red 0%, yellow 50%, blue 100%); background: linear-gradient(to right, red 0%, yellow 50%, blue 100%); background: linear-gradien原创 2020-07-03 01:04:02 · 589 阅读 · 0 评论 -
CSS揭秘:4.边框内圆角
边框内圆角背景知识:box-shadow,outline,“多重边框”一、两个div嵌套两个div实现内圆角很容易,只需要内圆角外直角即可。div First Try.box{ width: 200px; padding: 20px; background-color: #655; }.content{ background-color: tan; border-radius: .8em; paddi原创 2020-06-19 00:17:15 · 2476 阅读 · 1 评论 -
CSS揭秘:3.灵活的背景定位
灵活的背景定位背景知识:background-position的扩展语法,background-origin,calc()background-position扩展语法background-position扩展语法: css3 中background-position 语法可以通过在偏移量前指定关键字,来设置四条边的偏移量。background-positon: right 20px bottom 10px;background-originbackground-origin: cs原创 2020-06-12 00:38:06 · 261 阅读 · 1 评论 -
CSS揭秘:2.多重边框
多重边框背景知识:box-shadow的基本用法,outline基本用法/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);以上是box-shadow的基本参数。box-shadow是为元素添加阴影效果的样式。但是我们可以通过对其属性的设置,呈现边框效果。box-shadow 方案First Try将x偏移量 ,y偏移量设置为0px,此时阴影会在元素下面不会超原创 2020-06-11 00:07:53 · 520 阅读 · 0 评论 -
CSS揭秘:1.半透明边框
半透明边框背景知识:RGBA/HSLA 半透明颜色, 它们同样是一种颜色,并非只适用于背景。background-clip 背景裁切属性,定义了背景的延伸范围,是否延伸到边框、内边距盒子、内容盒子,内容文字下面。分别对应border-box,padding-box,content-box,text四个属性值First Try首先我们来尝试一下,假如我们想要实现一个半透明的边框,该如何写样式border: 10px solid hsla(0, 0%, 0%, 0.5);background-c原创 2020-06-09 23:37:20 · 811 阅读 · 0 评论 -
IOS移动端1px解决方案
.item { position: relative; } .item:after { content: ”; display: block; position: absolute; width: 100%; left: 0; bottom: 0; height: 1px; background-color原创 2017-09-25 21:48:32 · 412 阅读 · 0 评论 -
移动web之em和rem
我们应该如何根据rem来布局移动端的页面,而不是使用百分比原创 2016-11-24 22:01:08 · 1395 阅读 · 0 评论 -
border-radius失效了?
欢迎 Eighteen blog - border-radius失效了?今天涉及两个属性:overscroll: scroll-y / scroll-x / scroll;border-radius: 10px;原本这两个属性是没有什么联系的,但是当同时出现在同一个元素上时,就会发生圆角效果被滑动条覆盖的情况。例如:<style> div { border-r...原创 2019-08-29 10:55:57 · 2929 阅读 · 0 评论 -
掘金头像的旋转(transform)
在浏览掘金个人主页的时候鼠标放在了头像上发现了头像竟然旋转的越来越快,想用js的setInterval实现一下这个旋转,但是发现效果不好,最后发现掘金的实现方式只用了css3。#pic:hover { transform: rotate(666turn); transition-delay: 1s; transition...原创 2019-01-09 18:28:36 · 1669 阅读 · 1 评论 -
总结影响z-index的几种情况
偶尔我们在使用z-index的时候,会发现,无论怎么样增大z-index的值,都无法改变目标元素的层级。大概有这么几种情况positionfloatopcity父盒子的层级问题,当你的父盒子层级小于另一个父盒子层级的时候,你子元素的z-index再高都是没有用的。该元素的层级只在该元素所在的容器内起作用。该种情况大家应该容易理解,不过也可以看下面的例子。&amp;lt;styl...原创 2018-10-31 19:02:40 · 1134 阅读 · 0 评论 -
HTML5 drag & drop 拖拽与拖放
拖拽与拖放drop & drag 是html5自带的拖拽与拖放的api语法:所有需要被拖动的元素都要加上draggable属性,默认除了a,img等标签外不可拖动。// html 行内绑定<element ondrag="myScript">// js 绑定元素object.ondrag=function(){};// 全局监听object.addEven...原创 2018-10-12 17:01:55 · 695 阅读 · 0 评论 -
vue-cli 引入 element u
vue配套ui框架 element ui(饿了么开源项目)进入项目先安装element uinpm i element-ui -S也可以直接引入文件&lt;!-- 引入样式 --&gt;&lt;link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css&q原创 2018-09-19 18:59:07 · 236 阅读 · 0 评论 -
table的td宽度控制
前言:td在我们有具体宽度控制的时候显的格外难以驯服,但是知道了它的原理,解决起来就不会再怕了。。首先table的宽度我们可以设置,具体的px或者百分比,浏览器会自动按比例给td分配宽度。<table style="width: 600px;border-collapse: collapse;" > <tr> <td style=...原创 2018-07-19 18:27:33 · 26454 阅读 · 8 评论 -
opcity引发的元素层级变化
发现这个问题是在图片上定位了一个删除按钮,当我用opcity属性对图片进行透明化处理的时候,发现删除按钮不管用了,最后发现删除按钮是被图片覆盖了,究其原因是因为opcity这个属性造成的层级变化。我发现含有opcity属性的元素层级会比其他元素的层级高,这时候z-index是不起作用的,opcity会一直高于其他元素的层级。给其他元素加上position属性,会使该元素跟opcit...原创 2018-06-29 10:38:47 · 852 阅读 · 0 评论 -
字体和font-family对照表
windows常见内置中文字体 字体中文名 字体英文名 字体应用 ...原创 2018-05-30 11:42:25 · 77341 阅读 · 2 评论 -
css3+js:图片的局部模糊
css3+js: 局部高斯模糊的实现 前两篇文介绍了css3的过滤器filter用来实现图片的高斯模糊效果,还有js拖拽的功能。 要实现局部模糊就要把两者结合起来,计算位移就可以了。实现原理 原理其实很简单,就是两张图的叠加。底部一张清晰的图,上面一个高斯模糊过的图,局部显示与下面的图片无缝重合,这样看起来就行下面的图片部分模糊了一样。代码<style...原创 2018-05-21 17:34:32 · 2901 阅读 · 0 评论 -
css控制一行文字超出省略
话不多说上代码 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis;原创 2017-10-11 17:46:39 · 521 阅读 · 0 评论 -
ie78里使用html5新标签
首先我们知道html5的新标签再老版本的ie中并不被支持和识别,所以如果你的代码使用的是html5新标签例如header footer等那么就需要做一些工作了。 首先加在表头加入以下代码:<!--[if lte IE 8]> <script type="text/javascript"> (function(){if(!/*@cc_on!@*/0)return;var原创 2017-10-17 17:36:44 · 582 阅读 · 0 评论 -
不确定宽高的图片或者视频在一个盒子里的上下左右居中
因为有这个需求就发现了一个特别好用的方法来让一个在你不能确定图片或者视频的宽高的时候,让他在盒子里面上下居中或者左右居中。当图片是个比较宽的图片的时候,我们往往就是以宽为百分比,高度自适应来布局。但是有时候图片是长方形的话,这时候盒子里面就会之显示一部分,那么我们要解决这个问题就得先加上两个属性 :max-width:100%;和max-height:100%; 这两个属性保证了图原创 2017-06-28 14:32:38 · 1909 阅读 · 0 评论 -
Sass编译
Sass的单文件监听 1,进入.scss文件夹中。shift+右键打开命令行工具输入以下命令sass --watch common.scss:common.css //对当前文件夹下common.scss监听,并自动编译生成common.cssSass的文件夹监听 1,进入文件夹所在目录文件夹中。shift+右键打开命令行工具输入以下命令输入命令: sass --watch sass文件夹名:c原创 2017-08-07 16:58:41 · 286 阅读 · 1 评论 -
CSS3选择器
CSS选择器复习通用选择器:* 选择到所有的元素 选择子元素:> 选择到元素的直接后代(第一级子元素) 相邻兄弟选择器:+ 选择到紧随目标元素后的第一个元素 普通兄弟选择器:~ 选择到紧随其后的所有兄弟元素 伪元素选择器: ::first-line 匹配文本块的首行 ::first-letter 选择文本块的首字母 伪类选择器: :before, :after在元素内转载 2017-08-07 16:50:42 · 355 阅读 · 0 评论 -
CSS文本超过省略
1、现webkit内核的浏览器支持display: -webkit-box;属性, 所以网页中显示两行文字,超出部分省略,可以用样式{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}并且可以达到效果,2、为兼容原创 2017-07-07 13:29:03 · 377 阅读 · 0 评论 -
移动端一像素的边框问题
将下列css复制到自己的样式表,可以自行修改,添加类名即可在移动端添加1像素的边框.border1:after { position: absolute; right: 0; bottom: 0; left: 0px; height: 1px; content: ''; -webkit-transform: scaleY(.5);原创 2017-06-23 16:05:00 · 583 阅读 · 0 评论 -
工作中float引发的问题
当属性中同时存在float属性时: 1。margin:0 auto; 会失效。 2。display: table-cell; vertical-align: middle; 使图片上下居中的效果也会失效。原创 2017-06-19 16:57:37 · 303 阅读 · 0 评论 -
ie7css兼容写法
加*例如 *color:red 仅ie7识别; 普通 width:500px; *width:400px; 仅在ie7下显示400px宽度原创 2017-10-12 18:13:32 · 1612 阅读 · 0 评论 -
列表禁止点击的效果样式
.disabledBG { background: #f7f7f7;!important; color: #cbced2; cursor: not-allowed; } 灰色文字和背景加上鼠标悬浮的状态,表现出禁止点击的效果。原创 2017-12-12 10:36:38 · 2273 阅读 · 0 评论 -
CSS3:图片的高斯模糊效果
CSS3:图片的高斯模糊效果 最近项目中需要预览视频中加马赛克的效果(高斯模糊),于是找到了css3的一个属性filter来进行高斯模糊filter(滤镜) 可以用来定义图片或者div的饱和度,模糊程度,亮度等一系列。具体参考 CSS3:filter 属性兼容性兼容性方案//高斯模糊-webkit-filter:blur(10px);fi...原创 2018-05-18 14:49:20 · 5047 阅读 · 1 评论 -
angular文字省略filter
angular文字省略filter.filter('text_length_set', function () { return function (str, length, tail) { if (!str) { return ''; } if (str.length原创 2018-01-16 16:57:23 · 651 阅读 · 0 评论 -
文本图片垂直水平居中显示
文字居中垂直居中(vertical-align)我们都知道有这么一个属性可以让图片,文本等在元素中垂直居中vertical-align:middle;vertical-align值有很多,常用的就是middle,bottom,text-bottom等,我们先说middle。vertical-align时而没效果然而真实使用的时候,我们会发现这个属性“时灵时不灵”...原创 2018-01-17 15:24:06 · 134709 阅读 · 4 评论 -
网页p标签两端文案对齐
text-align:justify!important;废话不多说上属性 加在p标签上就可以。文本两边对齐原创 2017-10-13 19:46:45 · 5527 阅读 · 4 评论 -
h5中的画布----Canvas
Html5中新增标签有canvas canvas是一个用来展示绘图效果的标签,它和img类似,都是行内块元素。 同一个页面可以拥有多个canvas标签。 画布默认300*150,要设置画布的宽高,需要借助canvas元素的属性。var cvs=document.getElementById(‘cvs’); var ctx=cvs.getContext(‘2d’);canvas中有很多的方法和原创 2017-12-07 17:55:49 · 813 阅读 · 0 评论 -
BFC(边距塌陷)
BFC(边距重叠解决方案)父子元素边距重叠 兄弟元素边距重叠 空元素边距重叠BFC的基本概念 块级格式化上下文BFC的原理(BFC的渲染规则) BFC元素垂直方向的边距发生重叠 BFC的区域不会与浮动元素的box重叠 BFC是页面上一个独立的容器,内外的元素不会相互影响 计算BFC的高度时,浮动元素也参与计算。如何创建BFC 1. float值不为none 2. posi原创 2017-12-05 10:25:22 · 596 阅读 · 0 评论 -
css盒模型(IE和标准)
CSS盒模型文档中每个元素都会被描述为一个矩形盒子,盒子有一个边界,分别为margin edge,border edge,padding edge,content edge。盒子模型分为标准盒子模型和IE盒子模型(微软没有遵从W3C标准)标准模型和IE模型之间的区别?这两者的关键差别在于:W3C盒子模型——属性高(height)和属性宽(width)这两个值不包括(padding)和边框(borde原创 2017-12-05 10:09:21 · 1344 阅读 · 0 评论 -
前端经典三栏布局,中间自适应。
首先第一种我们常用的float方法 需要注意的是该方法的中间部分center要放在right盒子之后。 html *{ padding:0; margin: 0; } .layout article div{ min-height: 100px; } .lay原创 2017-12-04 18:35:40 · 1615 阅读 · 0 评论 -
取消表单聚焦的样式和富文本的可调节
取消表单项聚焦时产生的黄色边框:input,button,select,textarea{outline:none}取消textarea的拖动改变大小的功能:textarea{resize:none}最后把以上两个CSS合并后如下input,button,select,textarea{ outline:none;} textarea{resize:none;}原创 2017-01-11 16:16:41 · 427 阅读 · 0 评论