CSS
文章平均质量分 75
CSS积累
你好像很好吃a
吃不了自律的苦,就要吃平庸的苦。
展开
-
CSS 设置元素(img、video)在容器中的位置 object-position属性【积累】
object-position属性用于根据容器大小重置图片的大小,并设置图片的位置,类似于background-position属性,只不过一个是设置background-img在整个容器的位置一个是设置元素在容器中的位置。1、标签的使用说明:object-position一般与object-fit一起使用,用来设置元素的位置。object-position一般用于img和video标签。2、浏览器支持:3、语法:object-position: position|initial|inheri原创 2020-09-10 17:37:16 · 2013 阅读 · 0 评论 -
CSS 设置元素(img、video)自适应容器的宽高 object-fit属性【积累】
其实该标签有点类似于background-size,只不过一个是用来设置背景img的大小,一个使用来设置指定元素(img、video)的大小。1、标签使用说明:object-fit属性指定元素到的内容应该如何去适应指定容器的高度和宽度。object-fit一般用于img或video标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。可以通过使用object-position属性来切换被替换元素的内筒对象在元素框内的对齐方式。2、浏览器支持:表格中的数字表示支持该属性的第一个浏原创 2020-09-10 17:23:04 · 3558 阅读 · 0 评论 -
CSS 控制字与字间隔 letter-spacing【积累】
letter-spacing 属性:增加或减少字符间的空白。该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"&原创 2020-06-08 13:22:59 · 401 阅读 · 0 评论 -
CSS 实现文本不换行,超出部分省略【问题记录】
1、解决办法:将文本不换行,然后超出部分剪切掉不显示,将超出部分替换成省略号,三步完成。.*{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}2、分析上面属性:white-space 属性:指定元素内的空白怎么处理,通常 nowrap 比较常用,规定段落中的文本不进行换行。p{ white-space: nowrap;}其它属性值:3、分析上面属性:overflow 属性:规定当内容原创 2020-06-08 11:28:32 · 1310 阅读 · 0 评论 -
CSS3 添加阴影属性 box-shadow【学习记录】
1、语法:boxshaw: h-shadow v-shadow blur spread cplor inset;h-shadow:阴影的水平位置【必需】v-shadow:阴影的垂直位置【必需】blur:阴影的模糊半径【可选】spread:阴影的半径【可选】color:阴影的颜色【可选】inset:将外部阴影改成内部阴影(默认为outset:外部阴影)box-shadow: 10px 10px 20px 10px rgba(255,255,0,0.5) inset;2、参数:参考链接h原创 2020-06-08 10:19:42 · 444 阅读 · 0 评论 -
CSS 设置元素垂直对齐方式 vertical-align【学习记录】
1、应用场景:文字和图片同时被一个 div 包裹时,文字和图片不对齐,可以使用 vertical-align 属性来设置它们的垂直对齐方式。2、vertical-align用法:img{ vertical-align:text-top;}3、例子:在下面需求中正适用a、将img设置一个vertical-align属性值为bottom,图片与文本下对齐。.plan_page_con_plan-logo-i { width: 25px; vertical-align: bo原创 2020-06-04 15:07:19 · 1337 阅读 · 0 评论 -
去除div为inline-block时两个div之间的默认边距【问题记录】
1、问题:当两个div设置为 display: inline-block; 时,它们之间会出现默认的边距,即使将margin padding fontsitz设置为0也是无法消除的。2、解决方法:(两种)可以将两个div不换行<body> <div>我是第一个</div><div>我是第二个</div></body>还可以使用注释将两个div连起来<body> <div>我是第一个</原创 2020-06-04 14:01:18 · 651 阅读 · 0 评论 -
CSS 为 select 添加背景 和 将默认样式的小箭头替换为图片
为 select 添加背景 和 将默认样式的小箭头替换为图片:1)首先为select设置背景很简单:(和其它元素一样添加background属性即可)select { //背景:和其他元素一样,都是设置 background 属性 background: red;}2)改变下拉小三角样式:html代码:(添加select元素)<select> <option>选项列表</option> <option>option 1</optio原创 2020-06-04 11:50:04 · 1587 阅读 · 0 评论 -
CSS 强制修改元素的内联样式 !important 的使用【学习记录】
外联修改内联样式无效:1、方法:属性值后加 !important(注意使用英文的 ! 叹号)border-radius: 20px!important;2、解决问题:修改前端框架封装好的css样式在开发过程中经常使用一些前端框架(bootstrap,vue.js,laydate,Vant等等),在使用link导入css文件以后,发现有些css是在标签内使用内嵌的方式实现的,优先级最高,我们通过外联样式无法修改,这时我们就可以使用 !important 来实现。3、例子:css文件中的边框弧度样原创 2020-06-04 11:46:39 · 3640 阅读 · 0 评论 -
CSS 超出div固定的高,在div中出现滑动效果 overflow : auto
一个 div 中的内容实现上下滑动效果(而不是超出body的高以后上下滑动):1、方法:overflow:auto;2、解决问题:body 中的一个 div 内,如果设置了固定的 height,而内容的总 height 超出了 div 的高,则超出的部分就会被覆盖,而想实现超出的部分变成滑动的效果而不被覆盖,则用 overflow:auto;实现。...原创 2020-06-04 11:37:04 · 3608 阅读 · 0 评论 -
CSS 去除input的默认样式【总结记录】
去除ios中默认的边框样式:兼容不同浏览器appearance:none;-webkit-appearance:none;-moz-appearance: none; -o-appearance: none;去除input的边框和阴影:border: none;box-shadow:none;去除选中input时的蓝框框outline: none;...原创 2020-06-03 17:57:13 · 1242 阅读 · 0 评论 -
华为P30等手机对H5的部分不兼容问题【踩坑记录】
昨天做H5页面,在兼容性测试的时候,发现所有手机都兼容,只有华为p30pro这款手机不兼容,记录一下,下面效果对比。(公司新做的1元集盲盒活动,有兴趣的可以参与一下,关注沃小盒公众号,点击一元集盲盒参与即可)1、解决思路:华为部分手机自带浏览器使用的UC低版本内核,对flex支持非常有限,所以使用flex,calc等属性的时候,有时添加-webkit、 -moz-calc等前缀也是无效的,其原因就是不能用行内、行内块元素,要改成block才能更好的支持flex,当元素使用flex:1时,要增加width:原创 2020-05-22 11:25:48 · 4776 阅读 · 0 评论 -
CSS 控制边框长度、颜色、位置
1、之前碰到一个需求,就是在div的边上有一个小的竖条样式,之前是用一个图片然后使用定位移动到div的边上,这样比较麻烦,后来网上找了找资料,看看是否能用CSS来实现改变边框的长度,大多数都是使用的伪类选择器,但是都是直接贴的代码,正好前阶段遇到这个问题,来写个demo记录一下:2、思路:我们通过伪类选择器配合content在元素的周围设置内容,我们设置content为"",然后通过修改样式来实...原创 2020-01-07 10:20:20 · 17127 阅读 · 2 评论 -
CSS 选择器:nth-child和:nth-of-type之间的差异
1、:nth-child和:nth-of-type都是css3中的伪类选择器,其作用近似却又不完全相同,其实理解了这两个选择器的使用,其他的伪类选择器使用起来也就自然得心应手、游刃有余了。2、demo:我们创建一个父级元素,然后为它的子元素修改样式:html:(我们修改第二个p标签颜色为红色)<section> <p>我是第1个p标签</p> ...原创 2019-12-30 12:16:48 · 290 阅读 · 0 评论 -
响应式布局和自适应布局详解
响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小,但仍然也算做差异。它使得把握设计最终效果变得更难,同样让响应式布局更加的难以测试和预测。但同时说难,这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中,你也会因此更好的掌握一些基础知识...转载 2019-12-30 10:52:57 · 635 阅读 · 0 评论 -
CSS 伪元素 counter-increment的多种用法
之前已经对CSS content属性进行了大概的了解,我们知道content中有一个counter属性(计数器),而使用counter的过程中我们要使用到counter-increment来递增一个或多个计数器值,其实counter-increment和counter-reset一样还有不同的玩法,这篇文章就来单独的为counter-increment属性写几个小demo记录一下:1、count...原创 2019-12-27 17:52:03 · 2765 阅读 · 2 评论 -
CSS 伪元素 counter-reset的多种用法
之前已经对CSS content属性进行了大概的了解,我们知道content中有一个counter属性(计数器),而使用counter的过程中我们要使用到counter-reset来创建计数器或者重置计数器,其实counter-reset还有不同的玩法,我们下面就来写几个demo看一下:1、counter-reset属性创建或重置一个或多个计数器,counter-reset属性通常是和count...原创 2019-12-27 17:24:33 · 3405 阅读 · 0 评论 -
CSS 伪元素 counter(计数器)的使用方法
这篇文章是作为CSS 中伪元素before或after中content的特殊用法该文章的拓展,上一篇文章对content做了一些相关用法的赘述,这篇文章专门针对content中counter(计数器)这个属性值进行相关用法的距离,用于更好的理解这个counter属性。1、counter基本用法:在CSS里,content中的counter属性也是配合伪元素一起使用,counter产生的数值并不...原创 2019-12-26 18:01:01 · 2311 阅读 · 2 评论 -
CSS 系列之伪类与伪元素
一、伪类css伪类用于向某些选择器添加特殊的效果。锚伪类表单伪类结构化伪类1、锚伪类::link:visited:hover:activea:link {color: #FF0000} // 未访问的链接a:visited {color: #00FF00} // 已访问的链接a:hover {color: #FF00FF} // 鼠标...转载 2019-12-26 14:29:04 · 322 阅读 · 0 评论 -
CSS 伪元素 content的特殊用法
CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪类选择器中,有一个content属性,能够实现页面中的内容插入。1、插入纯文字:参考文章content:“插入的文章”,或者content:none不插入内容。html:<h1>这是h1</h1><h2>这是h2</h...原创 2019-12-26 11:59:50 · 6064 阅读 · 1 评论 -
记录@media使过程中趟过的坑
1、下面使用的是min-width属性:@media(min-width: 768px){//>=768的设备}@media(min-width: 992px){//>=992的设备}@media(min-width: 1200px){//>=1200的设备}说明:需要注意的是,使用min-width(其它的min属性也是同理)时,需要将min-width后面属性值最...原创 2019-12-25 10:42:25 · 398 阅读 · 0 评论 -
CSS 的background-size:cover属性值和contain属性值
1、语法:background-size:length|percentage|cover|contain;2、参数:参考文章:菜鸟教程3、浏览器支持:4、标签定义及使用说明:5、通常情况下都是使用第1个和第2个属性值,那么后两个如何使用呢?我们来写一个小demo记录一下:<div id="div4"></div>#div4{ width: 1000px...原创 2019-12-12 15:03:38 · 14813 阅读 · 1 评论 -
CSS 点击radio实现两个图片样式切换,并且多个radio中只能有一个checked
我们实现被点击的按钮为红色图片样式,即其它没选中的按钮为灰色图片样式,看下面图片样式:1、首先我这里创建两个radio:(也可以多声明几个,这里的数据正常是动态获取的)<input type="radio" name="defaultAddress" class="address_manager_content-d3-left-img" /><input type="ra...原创 2019-12-09 10:43:01 · 1860 阅读 · 1 评论 -
CSS3 的 box-sizing 属性
其实 box-sizing 这个属性网上各种教程中有很多但是不是那么的简单明了,都是一些书面语,看起来很繁琐,在这里记录一下这个属性,方便以后回来查看。1、定义:CSS3中的box-sizing属性定义了user agent应该如何计算一个元素的总宽度和总高度。2、语法:box-sizing:content-box | border-box | inherit;(默认值:content-box...原创 2019-12-06 15:57:15 · 287 阅读 · 0 评论 -
CSS 修改input中的placeholder默认颜色
使用input-placeholder属性来修改placeholder的默认颜色:1、说明:placeholder是input框中的提示文字,默认是灰色的,而color是修改input中用户输入文本的颜色,所以不能通过color来设置placeholder的颜色。2、修改页面所有input中placeholder颜色的语法:(直接写在<style></style>标签下...原创 2019-12-05 16:30:15 · 51985 阅读 · 8 评论 -
CSS 去除两个span之间的默认间距
一、去除两个span之间的默认间距:(两步解决:)1、将两个span的父级元素 font-size 设置为0。2、然后再分别设置两个span的font-size即可解决。二、之前遇到的问题,记录一下:1、需求是在页面的底部要显示下图的样式:2、思路:用一个div包裹两个span然后将div中的元素设置为居中,然后将左边的span设右边框,右边的span设置左边框。1)父级元素div的...原创 2019-12-05 14:13:35 · 7471 阅读 · 1 评论 -
CSS 为div单个角设置弧度 border-radius
1、 border-radius:该CSS属性是为一个div设置弧度值。下面遇到这样一个需求:如图:可见右边的两个角是没有弧度,设置左边的两个角有弧度即可。2、 对于border属性,CSS3提供了四个单独的属性:(可以实现弧度的转换)属性值说明border-top-left-radius为左上角设置弧度值border-top-right-radius为右上角...原创 2019-12-05 13:32:31 · 20408 阅读 · 2 评论 -
CSS 实现字体发光效果 text-shadow
一、CSS字体发光效果:CSS3 并没有直接设置发光效果的属性,但是利用text-shadow属性实现此效果1、text-shadow:该属性为文本添加阴影效果。text-shadow: h-shadow v-shadow blur color;2、参数:参数名称说明h-shadow水平阴影的位置(阴影水平偏移量),可为负值,必需v-shadow垂直阴影的...原创 2019-11-15 17:55:19 · 30122 阅读 · 3 评论 -
CSS 的 radial-gradient() 径向渐变函数(带例子)
一、CSS中的 radial-gradient() 函数:1、定义与用法:(取自菜鸟教程)radial-gradient() 函数用径向渐变创建" 图像 "。径向渐变由中心点定义。为了创建径向渐变你必须设置两个中止色。2、实例:以下实例演示了径向渐变 - 颜色结点均匀分布:#grad { background-image: radial-gradient(red, green, b...原创 2019-11-14 18:12:10 · 13169 阅读 · 1 评论 -
CSS 的 linear-gradient() 线性渐变函数(带例子)
一、CSS中的 linear-gradient() 函数:1、定义与用法:(取自菜鸟教程)linear-gradient() 函数用于创建一个线性渐变的" 图像 "。为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的度过,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。2、实例:以...原创 2019-11-14 16:18:10 · 29018 阅读 · 6 评论 -
CSS 实现div显示或隐藏的三种方法(display 和 visibility的区别)
一、使用CSS的 display 属性来隐藏或显示div:display 属性规定元素应该 生成的框的类型,可以通过 display:none 来隐藏某一元素。style="display: none;"document.getElementById("typediv1").style.display="none";//隐藏document.getElementById("typediv1...原创 2019-11-08 11:19:13 · 32005 阅读 · 0 评论 -
CSS 的 hsl() 和 hsla() 函数(设置颜色的方式之一)
一:CSS中的 hsl()函数:1、定义与用法:hsl() 函数使用色相、饱和度、亮度来定义颜色。HSL 即:色相(Hue)、饱和度(Saturation)、亮度(Lightness)。色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取0 ~ 100%的数值。亮度(L),取0 ~ 100%,增加亮度,颜色会向白...原创 2019-11-07 15:13:19 · 4533 阅读 · 0 评论 -
CSS 的 rgb() 和 rgba() 函数(设置颜色的方式之一)
一、CSS中设置颜色的四种方式:值描述color_name规定颜色值为颜色名称的颜色(如:yellow黄色)hex_number规定颜色值为16进制颜色值(比如:#ff0000)rgb_number规定颜色值为 rgb 代码的颜色(比如:255,0,0)inherit规定应该从父元素继承颜色上面是网上提供的设置颜色的表格:(实际上还可以细分一下...原创 2019-11-06 17:17:16 · 13454 阅读 · 4 评论 -
CSS3 的 calc()函数(为元素设置动态的属性值)【积累】
一、定义与用法: (定义这个东西都是大同小异的,我这里是取自菜鸟教程)calc是英文单词calculate(计算)的缩写,是CSS3新增的功能,用来指定元素的长度。比如说:你可以使用calc()给元素的border、margin、padding、font-size和width等属性设置动态值,为何说是动态值呢?因为是我们使用表达式计算得到的值。不过calc()最大的好处就是用在流体布局上,可以通...原创 2019-11-05 17:39:31 · 2556 阅读 · 0 评论 -
CSS 长度单位详细总结
一、CSS中的长度单位:在CSS中以不少值是以长度作为值的,盒子模型的属性就是一些明显的值属性:width、height、margin、padding、border。除此之外还有很多的css属性的值同样也是长度值,像偏移量offset、box-shadow的大小或字体大小、间距等,在CSS中存在众多的长度单位,下面我们就来说一下长度单位以及它们的用途。二、简单的介绍:(长度单位都有哪些:)在...原创 2019-11-04 16:36:10 · 8005 阅读 · 3 评论 -
CSS 实现一个div铺满整个屏幕的三种方法(CSS Reset)
让一个div铺满整个页面:一、需求描述:比如说我们现在有一个页面,页面中有一些文字,但是页面需要添加背景,并且整个页面要被背景铺满。二、问题描述:其实我们可以在body中添加一个div,然后设置这个div的height为auto,然后给整个div添加一个background,那么如果该div的内容足够多的话,该div就会铺满整个页面(即:整个页面都被添加的背景铺满),但是如果该div的内容...原创 2019-11-01 14:34:48 · 48989 阅读 · 1 评论 -
开发过程中积累的CSS样式(持续更新)
前言:平时写页面的时候有些样式使用完发现没过多久就忘记了,这篇文章主要是用来记录开发过程中容易忘记的CSS样式,与其总是去网上查,还不如一个一个记录下来,虽然说之前的都没有记录,但是知识的累积不论什么时候开始做都不会晚的。首先 记录几个好用的插件网站:layDate日期与时间组件:https://www.layui.com/laydate/Vant移动端插件库:h...原创 2019-10-29 17:33:18 · 457 阅读 · 0 评论