![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
前无止境CSND
这个作者很懒,什么都没留下…
展开
-
flex之flex:1含义
这篇文章写得非常棒:http://blog.sina.com.cn/s/blog_6a8557730102wso6.html转载 2020-06-07 09:43:22 · 479 阅读 · 0 评论 -
vh、vw、calc使用方法和踩坑
vh、vwvh: 相对于视窗的高度, 视窗被均分为100单位的vh;vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;视区所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。calccalc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定...原创 2020-02-15 20:23:17 · 4859 阅读 · 1 评论 -
css3 transform缩放scale空白隐藏
1、使用overflow:hidden解决.lm-seat-wrap { overflow: hidden; -webkit-transform: scale(0.62); transform: scale(0.62); -webkit-transform-origin: 10% top; transform-origin: 10% top;}2、使用posi...原创 2019-11-12 10:59:49 · 4589 阅读 · 0 评论 -
CSS实现文本两端对齐
效果:HTML代码:<div class="demo"><span>姓名</span>:小王</div>CSS代码: .demo span { display: inline-block; width: 60px; text-align: justify; text-align-last: justify...原创 2019-11-08 09:44:10 · 125 阅读 · 0 评论 -
disabled和readonly的区别
1.Readonly只针对input(text/password)和textarea有效,而disabled对于所有的表单元素有效,包括select,radio,checkbox,button等。2.在表单元素使用了disabled后,我们将表单以POST或者GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去.3.disabled后不能触发JS事件,而read...原创 2019-10-11 10:12:21 · 225 阅读 · 0 评论 -
什么是CSS Hack?
IE浏览器Hack一般又分为三种,条件Hack、属性级Hack、选择符Hack(详细参考CSS文档:css文档)。例如:1、条件Hack<!--[if IE]> <style> .test{color:red;} </style><![endif]--> <!--[if IE 8]> <html cl...原创 2019-10-11 10:05:11 · 146 阅读 · 0 评论 -
左边定宽,右边自适应以及三栏布局
1、左边定宽,右边自适应1.左边设置浮动,右边宽度设置100%.left{float:left} .right:{width:100%}2.父容器设置display:flex right部分是设置flex:13.左设置浮动,右用cacl去补宽度计算 .left{float:left} .right:{width:cacl(100vw-200px}4.首先修改页面结构,为自适应...原创 2019-10-11 09:39:53 · 110 阅读 · 0 评论 -
使元素消失的方法
visibility:hidden、display:none、z-index=-1、opacity:0区别:1.opacity:0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定了一些事件,如click事件也能触发;2.visibility:hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件;3.display:none, 把元素隐藏起来,...原创 2019-10-11 09:30:21 · 180 阅读 · 0 评论 -
CSS清除浮动的几种办法
1.给父级元素定义高度2.让父级元素也浮动3.父级定义display:table 或者 display:inline-block;4.父元素设置overflow:hidden5.后面元素增加 clear: both;6.clearfix:使用内容生成的方式清除浮动.clearfix:after { // :after选择器向选定的元素之后插入内容content:""; // 生成内...原创 2019-10-11 09:26:11 · 75 阅读 · 0 评论 -
骨架屏中的那一道光
效果:HTML<div class="skeleton-wrapper"></div>CSS:.skeleton-wrapper { width: 600px; height: 300px; background-color: #eee; position: relative; font-size: 0...原创 2019-09-27 09:48:16 · 127 阅读 · 0 评论 -
如何制作骨架屏的一点思路?
骨架屏是结合了懒加载功能,在页面没有加载完成之前,先呈现页面基本结构。可以有两种实现方式:1、在页面元素后面增加一个骨架div,当页面加载完成后就隐藏这个div2、在页面元素结构中先嵌入骨架div,当页面加载完成后就替换这个div...原创 2019-09-18 10:49:22 · 900 阅读 · 0 评论 -
CSS实用小技巧
1、使用vw定制rem自适应布局要点:移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size,结合vw单位和calc()可脱离JS的控制场景:rem页面布局(不兼容低版本移动端系统)2、使用writing-mode排版竖文要点:通过writing-mode调整文本排版方向场景:竖行文字、文言文、诗词3、使用text-align-last对齐两端文本要点:通过text-...原创 2019-09-04 11:23:04 · 218 阅读 · 0 评论 -
CSS实现水平垂直居中
为了实现上面的效果先来做些准备工作,假设HTML代码如下,总共两个元素,父元素和子元素HTML:<div class="wp"> <div class="box size">水平垂直居中</div></div>CSS:注意:后面不在重复这段公共代码,只会给出相应提示/* 公共代码 */.wp { border: 1px...转载 2019-07-26 13:53:13 · 105 阅读 · 0 评论 -
常用的CSS代码技巧
1、重置元素的CSS样式{margin: 0;padding: 0;box-sizing: border-box;}将所有元素的内外边距都设置为0了,而正是没有了这些默认内外边距的影响,使得我们后面的CSS设置会更加的容易。2、将图片作为背景当给页面添加图片时,尤其需要图片是响应式的时候,最好使用background属性来引入图片,而不是标签。这看起来使用图片会更复杂,但实际...原创 2019-06-21 16:39:01 · 187 阅读 · 0 评论 -
浅谈css3属性pointer-events: none和will-change和user-select
1、pointer-events: nonepointer-events: none; 可以让某个元素实现类似于海市蜃楼的效果,具体理解为,你可以看的到某个元素,但是你无法摸的着。而display:none; 是你摸不着,但是你也看不见。pointer-events: none;摸不着,但是看得见。如果把某个元素再加上opacity:0;则可以很容易实现类似display:none;的效果(...原创 2019-06-12 17:15:08 · 1869 阅读 · 0 评论