css
文章平均质量分 62
一行注释
这个作者很懒,什么都没留下…
展开
-
圣杯布局 vs 双飞翼布局
圣杯布局 vs 双飞翼布局双飞翼布局要求header和footer各自占领屏幕所有宽度,高度固定。中间的container是一个三栏布局。三栏布局两侧宽度固定不变,中间部分自动填充整个区域。中间部分的高度是三栏中最高的区域的高度。双飞翼布局的实现left、center、right三种都设置左浮动设置center宽度为100%设置负边距,left设置负边距为100%,right设置负边距为自身宽度设置content的margin值为左右两个侧栏留出空间,margin值大小为left和r原创 2021-11-19 09:58:25 · 226 阅读 · 0 评论 -
CSS flex 属性
flex:flex-growflex-shrinkflex-basis|auto|initial|inherit原创 2021-06-11 16:51:39 · 255 阅读 · 1 评论 -
Flex 布局 属性定义
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法,下一篇文章给出常见布局的 Fle...转载 2021-02-02 17:27:35 · 170 阅读 · 0 评论 -
vue项目打包后样式-webkit-box-orient: vertical
vue项目打包后样式-webkit-box-orient: vertical居然神奇的消失了,相关插件 optimize-css-assets-webpack-plugin,解决办法:https://github.com/postcss/autoprefixer/issues/7761.css/* autoprefixer:ignorenext*/-webkit-box-or...原创 2020-03-17 14:26:31 · 202 阅读 · 0 评论 -
搞一搞静态png图片实现gif效果
摘自csdn渲染图页面放一个div背景设置图片div{background:url('//csdnimg.cn/release/bss/fe/2b69291/themes/topic/blog_star2019/images/banner.png')no-repeatcenter;background-size:cover;height...原创 2019-12-19 09:48:31 · 709 阅读 · 0 评论 -
position:sticky粘性定位
position:sticky属性值值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成固定定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "lef...原创 2019-10-14 16:10:49 · 247 阅读 · 0 评论 -
特效loading图以备不时之需
原创 2019-07-25 15:29:34 · 147 阅读 · 0 评论 -
css处理文字两端对齐
span{ width: 65px; text-align: justify; &::after{ content: ''; display: inline-block; width: 100%; }}原创 2019-07-11 14:21:29 · 117 阅读 · 0 评论 -
vue+iview 实现项目中一件切换主题
<Button @click="changetheme(0,$event)" type="primary">主题</Button><Button @click="changetheme(1,$event)" type="primary">主题</Button><Button @click="changetheme(2,$event)" t...原创 2019-06-12 16:57:11 · 2863 阅读 · 1 评论 -
css实现聊天框箭头样式
li{ list-style: none; padding:30px 62px; &.right{ color: #ff7063; text-align: right; &>div{ float: right; .poptip{ border:1px sol...原创 2019-05-05 10:39:48 · 2980 阅读 · 2 评论 -
CSS实现单行、多行文本超出显示省略号
overflow: hidden;text-overflow:ellipsis;white-space: nowrap;多行文本display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;原创 2019-04-03 10:17:33 · 171 阅读 · 0 评论 -
不依靠插件自定义滚动条
直接上css即可 给添加滚动条的标签加上类名隐藏自带滚动条 添加伪元素替换样式/* 给滚动条标签添加类名 scroll-style */.scroll-style { overflow-y: auto; overflow-x: hidden;}.scroll-style::-webkit-scrollbar { /*滚动条整体样式*/ width: 4px; ...原创 2018-12-05 09:40:30 · 180 阅读 · 0 评论 -
文字前设置首字多行或者图片占位如何修改css
如下格式//设置首字位置div样式<style>float: left;height: 62px;font-size: 43px;</style>原创 2018-11-27 14:48:51 · 398 阅读 · 0 评论 -
不常见jq and css
<div id="connHead***">...</div>div[id^=connHead] 选择id的开头是connHead的div元素原创 2018-09-30 09:48:27 · 180 阅读 · 0 评论 -
CSS3弹性布局内容对齐(justify-content)属性使用详解
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配,也会在发生内容溢出时影响项目的对齐。注意:弹性布局中有两个基本术语main axis和cross axis,一般情况下,我们可以把它们各自看作是屏幕上的行向和列向(但是严格讲,这和写模式以及弹...转载 2018-09-29 15:13:43 · 4304 阅读 · 0 评论 -
移动web开发中的常见问题
本文将详细介绍移动web开发中的常见问题Input【光标颜色】 默认情况下,光标颜色与字体颜色color相同,但也可以通过caret-color属性来单独设置caret-color: auto;caret-color: transparent;caret-color: currentColor;caret-color: red;caret-color: #5729e9...转载 2018-08-28 18:02:32 · 650 阅读 · 0 评论 -
display:line-block的标签有文字的下移问题
效果如图<span class="a">1</span><span class="gray"></span><span class="red">1</span>span{ display: inline-block;width: 200px;height:原创 2018-08-02 16:54:36 · 1470 阅读 · 0 评论 -
input的radio 样式兼容与ios中的hover
input的radio在苹果手机里的样式兼容,另外就是在苹果手机微信里的点击效果兼容。常规样式首先插入标签<div class="condition"> <input type="radio"> <input type="radio"></div>其次是css样式.condition in原创 2018-08-01 09:29:04 · 2257 阅读 · 0 评论 -
line-height:150%与1.5的区别所在
line-height:150% 是继承父元素的距离line-height:1.5 是计算各子元素的距离当line - height 为百分比时:div{font-size:14px; line-height:150%;}p{font-size:21px;} 结果就是: div{line-height:21px;//14*150%=21}...原创 2018-07-31 14:55:05 · 1073 阅读 · 0 评论