![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
天空之枫
这个作者很懒,什么都没留下…
展开
-
css探照灯效果
【代码】css探照灯效果。原创 2022-11-22 17:12:06 · 307 阅读 · 0 评论 -
关于怎么让div宽度自适应文字内容?
1 2 3 4 5 <divclass="divbotuser" > <h2style="text-align: center;width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;" > <imgstyle="border:1px solid #ddd;width:35px;height:...转载 2022-04-06 15:17:31 · 4411 阅读 · 0 评论 -
按钮循环波动
:after{ content: ""; animation: pulse-border-2 2s ease-out infinite; top: 36px; left: 50%; background: #fff; width: 100%; border-radius: 36px;}原创 2022-02-24 15:26:50 · 528 阅读 · 0 评论 -
使浏览器支持12px字体的方法
chrome浏览器默认最小字号为12px,原因是因为chrome团队认为汉字小于12就会增加识别难度一.解决方法常见的解决方法有:1.zoom2.-webkit-transform:scale()3.-wekit-text-size-adjust:noneZoomZoom字面的意思是变焦,可以改变页面上的元素尺寸,属于真实尺寸其支持的值类型有//zoom:50&,//表示缩小到原来的一半//zoom:0.5 //表示缩小到原来的一半<style>原创 2021-04-26 09:45:59 · 1016 阅读 · 0 评论 -
iview tab选项卡拓展
在iview项目中遇到一个问题,当选项卡内的内容高度不同时,我们切换选项卡时页面显示的高度会被最高的选项卡顶高,导致其它选项卡底部多出多余的空间,页面不美观.我在这里改进了下tabs,原理就是在每个选项卡上套上一层高度且overflow:scroll,超出滚动,代码如下,<template> <Tabs value="name1" style="border:1px solid #00ff00"> <TabPane label="标签一" na原创 2020-08-14 16:59:47 · 618 阅读 · 0 评论 -
css 对角线
利用渐变背景 linear-gradient 实现width: 200px;height: 100px;background: linear-gradient( to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 1.5px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 1.5px), rgba(0, 0, 0, 0)转载 2020-06-05 11:15:15 · 1775 阅读 · 0 评论 -
css Hack
1.css hack的概念由于不同厂商的浏览器或浏览器的不同版本(如IE,firefox/Safari/Chrome等),对css的支持,解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时我们为了获取统一的页面效果,就需要针对不同的浏览器或不同的版本写特定的css样式。我们把针对不同的浏览器/不同版本写相应的css code的过程叫做css Hack2.css H...转载 2020-04-03 15:31:46 · 188 阅读 · 0 评论 -
上下高度固定,中间自适应,且可以滚动
html布局三部分<div class="wrap"> <div class="header">header</div> <div class="main"> 弹性滚动区域 </div> <div class="footer">footer</div&g...原创 2020-03-01 22:46:15 · 1299 阅读 · 0 评论 -
css弧度border-radius
加上一段简单的cssborder-radius: 0 586px 586px/0 0 104px 104px; background: #f7f7f7; overflow: hidden; box-shadow: 0 0 5px#888888;原创 2019-12-24 10:17:29 · 356 阅读 · 0 评论 -
ie兼容问题
在回答ie等兼容问题时,得意忘形吃了亏。ie6 ie7 ie8 ie9兼容问题终极解决方案放下包袱,解决低版本兼容问题这是一个老生常谈的问题,自然解决这个问题的方案也比较多,下面整理了一些解决方法:1.强制使用高版本渲染模式。强制使用Edge模式来解析网页代码<meta http-equiv="X-UA-Compatible" content="IE=Ed...转载 2019-08-02 16:37:01 · 132 阅读 · 0 评论 -
上方固定,下方滚动
在工作中学到了,对一个页面实现上方导航固定,下方内容滚动的功能,所以在这与大家分享一下, 其中,我主要用的是position:absolute; .nav{ width:100%; border:1px solid #000; height:20rem; position:absolute; top:0; } .out-content{ width;100%原创 2017-08-14 00:37:41 · 1682 阅读 · 0 评论 -
你了解word-wrap和word-break的区别吗?
我想很多人会在想这两个东西是什么鬼东西,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句,又或者是因为这两个东西实在是太拗口了,长得又差不多,导致连背都很难背下来。我们还是直接看用法吧!<style>.text{ width:200px; ...原创 2016-12-18 17:06:48 · 993 阅读 · 0 评论 -
对css浮动的理解以及清除浮动
首先我们要了解什么是浮动, 在css中浮动就是使元素及元素内容脱离文档流,并且使其移动到其父元素的最左或最右边。 移动到其父元素的最左或最右边:是指向左或向右移动直至碰到另一个浮动元素或是父元素的边界(不包括padding) 如何清除浮动? 通常我们最普遍的作法是直接清除浮动:clear:both; 另一种:overflow:hidden;为原创 2016-11-29 15:26:34 · 351 阅读 · 0 评论 -
css之盒子模型
css之盒子模型:其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型。 w3c标准的盒子主要由4部分:margin、border、padding、content,并且 content 部分不包含其他部分。如下图 而ie 盒子模型的范围也包括 margin、border、padding、content,和标准 w3c 盒子模型不同的是:转载 2016-11-24 16:56:10 · 198 阅读 · 0 评论 -
display,和posiion
display的值说明他们的作用。position的值,relative和absolute定位原点是什么? display的值有: block:设置成像块一样显示; inline-block:像行内元素一样显示,但内容像块一样显示; none:向行内元素一样显示; list-item:像块元素一样显示,并添加样式列表标记;position: a原创 2016-11-29 15:24:51 · 323 阅读 · 0 评论 -
css的权重
css的权重,大家应该都有所接触过吧,关于权重主要就是css的优先级问题了,先来讲权重的规则吧! 标签的权重是:1;类选择器的权重是:10:id选择器的权重是:100;内联样式(在html里面有style=“”包裹的元素):1000;还有一最特殊的(最高优先级,暂时不管):!important; 注意:(*),(>),(+)的权重为0; 举个栗子: div #a...原创 2016-11-29 14:30:56 · 248 阅读 · 2 评论