WEB前端开发CSS小技巧(不断更新)

智联前端开发模板
web前端开发模板百度云
前端开发模板推荐

此文记录自己在css上遇到的小知识小技巧,会不断更新

(1)padding-top、padding-bottom、margin-top、margin-bottom 设置百分比,参照的是父元素的宽度
(我和你一样吃惊…
(2).a{font: 12px/2 arial;} 这里line-height是24px,参照的是font-size(即12px)
(3)line-height继承
line-height: 300%; 先计算后继承,根据父元素的字体大小计算出行高,并且子元素依然沿用这个计算后的行高。
line-height: 3; 直接继承,即子元素的行高是子元素的字体乘以3。
(4)color: rgba(0,0,0,0) 等同于 color: transparent;
(5)text-indent: -9999px; 针对seo,隐藏文字
(6)outline: 5px dashed blue; 记住outline是不占据空间的,显示在border外
(7)background-color: green; 背景色一定在最下面一层,而且也会在border下面(你把border设为非实线,就看到了)
(8)background-position: 50%; 如果仅规定一个值,另一个则默认是50%
(9)background-origin的默认值是padding-box
(10)display:inline; 默认内容宽度,同行显示,不可设置宽高
(11)display: none; 不显示,不占据空间
visibility: hidden; 不显示,占据空间
(12)height与line-height值相等时,文字垂直居中
(13)登录时全屏遮罩代码段(fixed是相对视窗)
<div class=”mask”></div>
.mask{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999;}
(14)float元素半脱离文档流
对元素,脱离文档流
对内容,在文档流
( 15 ) css指定的font-size生效,chrome开发者工具调试pc端正常,但移动端computed的字体大小和css指定的显示大小不一样
原因: webkit 给移动端浏览器提供的一个特性,这个特性被称做「Text Autosizer」,又称「Font Boosting」、「Font Inflation」:当我们在手机上浏览网页时,很可能因为原始页面宽度较大,在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大,保证在即不需要左右滑动屏幕,也不需要双击放大屏幕内容的前提下,也可以让人们方便的阅读页面中的文本。
解决方法:比如body * { max-height: 999999px; } 就可以无副作用的禁掉 Font Boosting 特性。

( 16 ) 文字如超过二行隐藏,第二行末显示省略号,适用移动端(webkit内核)
p{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
( 17 ) 移动端滚动不流畅,滑动的手指松开后,滚动立刻停止,失去了原本的流畅滚动特性。—–> webkit环境下,增加该属性,可以增加弹性,使滑动更加顺畅
-webkit-overflow-scrolling: touch;
( 18 ) 水平垂直居中的一种方式
<div class=”parent parent-d”>
<div class=”child child-d”>demo-d</div>
</div>

    .parent-d{
        position: relative;
    }
    .child-d{
        width: 50%;
        height: 50%;
        margin: auto;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

( 19 ) 移动端虚拟键盘挡住输入框
解决方法:让输入框出现在顶部或者判断设备,在获取焦点时做一下页面滚动。(还未实践过)
(20)踩了个坑,移动端ios系统input获取不到焦点,安卓没问题。我通过去掉user-select: none;
(21)background缩写 => background: url(“../common/images/sceneChooseCoupon/youhuiquan@2x.png”) #F4F5F7 no-repeat 50% 50%/contain;
(22) 背景渐变图的兼容写法
background: #fff;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#eee));
background: -webkit-linear-gradient(top,#fff 0,#eee 100%);
background: linear-gradient(to bottom,#fff 0,#eee 100%);
( 23 ) css全局样式
html, body{
width: 100%;
height: 100%;
box-sizing: border-box;
}
, ::before, *::after{
box-sizing: inherit;
}

( 24 )a标签不能嵌套a标签,html结构会错乱

前端开发讲解 ppt模板
.net前端开发模板
前端界面开发模板
» 本文来自:前端开发者 » 《WEB前端开发CSS小技巧(不断更新)》
» 本文链接地址:https://www.rokub.com/6191.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!