css
star...
这个作者很懒,什么都没留下…
展开
-
display:inline、display:block和display:inline-block的区别
display:inline 转化成内联元素,不换行display:block 转换成块元素,换行display:inline-block 内联块元素,既不换行又可以使用块元素所拥有 的属性,类似于块元素加了浮动效果,但低版本浏览器对这个不支持。原创 2017-05-11 19:30:41 · 1282 阅读 · 0 评论 -
移动终端h5页面常用的meta属性
apple-mobile-web-app-capableapple-mobile-web-app-capable是设置web应用是否以全屏模式运行语法:<meta name="apple-mobile-web-app-capable" content="yes">说明:如果content设置为yes,web应用会以全屏模式运行。content设置为no,表示正常显示。可以通过...原创 2019-05-24 10:19:59 · 1470 阅读 · 0 评论 -
h5页面唤醒app
h5页面发送请求打开app自定义url scheme,如taobao://home(淘宝首页) 、etao://scan(一淘扫描));如果安装了客户端则会直接唤起,直接唤起后,之前浏览器窗口(或者扫码工具的webview)推入后台;如果在指定的时间内客户端没有被唤起,则js重定向到app下载地址。window.location.href = 'taobao://home'setTimeo...原创 2019-05-23 20:13:20 · 1751 阅读 · 0 评论 -
-webkit-text-size-adjust的用法
-webkit-text-size-adjust的用法如下:1、当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 html{-webkit-text-size-adjust:none;} 或者html{-webkit-text-size-adjust:100%;}2、-webkit-text-size-adjust放在body上会导致页...原创 2019-05-23 19:58:58 · 11775 阅读 · 0 评论 -
移动端几种tab切换及实现方式
看了下 FrozenUI(QQ)、Jquery WeUI(微信)、SUI Mobile(淘宝)的tab实现方式,自己整理了一下。1、FrozenUI<div class="wrap"> <ul class="tab border-b"> <li class="tab-item current"> <span&g...原创 2019-05-23 17:00:19 · 8491 阅读 · 1 评论 -
div水平居中及div水平垂直居中的方法总结
水平居中1、margin:auto<div class="wrap"> <div class="wrap-txt"></div></div>.wrap{ width: 100%;}.wrap-txt{ width: 6rem; height: 2rem; background: #00FFFF; ...原创 2019-05-23 16:41:39 · 393 阅读 · 0 评论 -
BFC
1、常见布局模式CSS中的三种布局模型:流动模型(flow)、浮动模型(float)、层模型(layer)2、BFC的原理 BFC即 Block Formatting Context(块级格式化上下文),它属于上述布局模式中的流动模型。 它是W3C CSS2.1规范中的一个概念,它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及...转载 2019-04-09 18:03:50 · 118 阅读 · 0 评论 -
CSS盒模型
基本概念盒模型由里向外是content,padding,border,margin盒模型有两种:标准模型和IE模型标准模型:盒模型的宽高是内容(content)的宽高IE模型:盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高CSS如何设置两种模型css3的属性box-sizing标准模型 box-sizing:content-...原创 2019-04-09 17:05:32 · 95 阅读 · 0 评论 -
CSS3动画
1、 @keyframes规则@keyframes规则用于创建动画,在@keyframes中规定某项css样式,就能创建由当前样式逐渐过渡为新样式的动画效果。定义动画的方式有两种:1)<head> <meta charset="UTF-8"> <title></title> <style type="text/css">...原创 2019-04-11 11:39:11 · 322 阅读 · 0 评论 -
清除浮动效果的三种方式
浮动效果 满足我们的页面排版要求,使竖列的盒子横向的排列起来。 负作用:因为浮动元素脱离了标准文档流,会导致父级元素无法被撑开。解决方式:清除浮动负面效果(三种方式)添加空盒子 优点:较流行 缺点:为清除浮动,页面添加的空盒子太多,新手容易晕 用法:在浮动元素后面(同级元素)添加一个空的div,并且定义一个clear类,附给该div .clear{clear:both;}overfl原创 2017-05-03 20:21:36 · 2636 阅读 · 0 评论 -
css选择器
1、交集选择器既是p标签类名称又是text的字体变成红色p.text{color: red}2、并集选择器让container下的所有元素内容为蓝色#container p, span, em, strong{color: blue}3、兄弟选择器选择h1 元素后出现的段落h1~p{color:red;}<p>Hello word!</p>&...原创 2019-08-13 10:19:51 · 237 阅读 · 0 评论