css
关注
分享
扫一扫
武东10号
developer for ninjia
展开
-
CSS---使用flex布局做响应式页面,flex布局中主要属性值
传统的布局方法都是基于盒模型实现的，通过display，position，float属性设置到达目的。但是，垂直居中的布局就会有一点麻烦了…用flex作响应式布局，就会轻松的多flex布局相关属性(父元素) 1.display:display:flex;表示当前盒子为flex布局2.flex-direction:row（默认值）：主轴为水平方向，起点在左端。row-re原创 2017-04-12 23:12:47 · 3966 阅读 · 0 评论 -
css---flex布局中，如何响应式 得水平垂直居中？flex子元素左右 上下居中
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <style type="text/css"> div{ display: flex; justify-content:center;/*x轴对齐方式*/原创 2017-09-02 10:34:58 · 4921 阅读 · 0 评论 -
CSS---前端通过 css如何实现overflow:auto滚动超出部分的同时隐藏滚动条？
动端页面为了更接近原生的体验，是否可以隐藏滚动条，同时又保证页面可以滚动？使用 overflow:hidden 隐藏滚动条，但存在的问题是：页面或元素失去了滚动的特性。 由于只需要兼容移动浏览器（Chrome 和 Safari），于是想到了自定义滚动条的伪对象选择器::-webkit-scrollbar。应用如下 CSS 可以隐藏滚动条：.element::-webkit-scrollbar {d转载 2017-09-24 17:24:00 · 10970 阅读 · 0 评论 -
H5页面，iOS以及部分Android手机链接a等标签点击的时候，会有阴影，怎么解决？
-webkit-tap-highlight-color 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中，是webkit内涵浏览器扩展css，webkit专属。当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透原创 2017-08-16 22:37:25 · 2990 阅读 · 0 评论 -
H5页面，部分 Android手机点击number电话号码/成串数字时候，会跳转到其他页面造成404错误，如何解决？
.number{ pointer-events:none; }//其中，number为号码标签类名将其pointer-events属性设置为none即可。原创 2017-08-16 22:42:50 · 1975 阅读 · 0 评论 -
css---前端如何用css代码写省略号，单行省略号，多行省略号？
1、单行省略号width:100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;可以在scss中把width变为变量：@mixin overflow($width){ width:$width; overflow: hidden; text-overflow: ellipsis; whi原创 2017-06-11 15:53:39 · 10658 阅读 · 1 评论 -
css---pc、无线如果通过js获取屏幕宽度结合sass实现自适应页面
1、js生成html的font-size(即生产1rem的px数)//html顶部添加代码// <script type="text/javascript"> (function(){ var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1;原创 2017-06-11 15:45:03 · 2064 阅读 · 0 评论 -
css---父元素高度不确定，如何通过css样式垂直居中
案例代码：<div id='box'> <section class='boxLeft'> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </sec原创 2017-05-23 00:34:48 · 2328 阅读 · 0 评论 -
css---前端开发中，如何使盒子水平垂直居中？
1、使用margin负值 css部分.box{ position:relative; width:600px; height:400px;}.item{ height:100px; width:100px; position:absolute; top:50%; left:50%; margin-left:-50px; margin-top:-50px;}htm...原创 2018-07-06 16:31:28 · 1772 阅读 · 0 评论