css常见问题
CSS:
1、垂直居中布局
(1)已知宽高
(2)未知宽高
https://segmentfault.com/q/1010000004073623
2、文字退格
text-indent: 4em;
3、文字阴影
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
4、图片置顶
父元素:position:absolute,top0 left0 bottom0 right0
子元素:width100% height100%
5、隐藏div时候不会变形重绘
用visibility :visible/hidden取代display:none
6、textarea
rows="30px" 定义高度
overflow:hidden滚动条隐藏
7、font中
(1)目前已知的绝对长度单位有in,cm,mm,pt,pc,px。即如果一个长度单位所指定的长度是根据另一个长度
相对长度单位
em 元素的字体高度
ex 字体x的高度
px 像素Pixels
% 百分比Percentage
绝对长度单位
in 英寸Inches(1英寸=2.54厘米)
cm 厘米Centimeters
mm 毫米millimetre
pt 点Points(1点=1/72英寸)
pc 皮卡Picas(1皮卡=12点)
(2)绝对大小值在w3c只有7个值,xx-small,x-small,small,medium,large,x-large,xx-large这7个绝对值,具体看7个绝对大小值,
而单位px,em,百分比都不在里面,所以这些都不是绝对大小值。
(3)对于百分比和em:
都会根据父元素来计算自身比例
假如div包含一个span标签,span标签指定为font-size:1.125em;
或font-size:120%;
,那么这个span标签文字大小计算如下:
16*1.125em=18px
16*120%=19.2px //显示应该是19px
(4)对于rem:
是从根元素计算,不管你的div标签包含N个子元素,你的子元素的字体大小都是直接由根元素计算得出
(5)假如你头部的meta设置像这样
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"/>
那么你在设置文字字体的时候应该是为设计稿的2x,而不是直接按照设计稿输出。
8、retina屏下图片高清问题
图片放大到两倍,然后容器50%
如图片实际为:400px × 600px;
容器
img{
width:200px;
height:300px;
}
背景图片
img{
width: 200px;
height: 300px;
background-image: url(image@2x.jpg);
background-size: 200px 300px; // 或者: background-size: contain;
}
9、解决1px问题
当dpr(window.devicePixelRatio)为3时,线是原本的3倍,粗线缺乏美感
解决
测试发现绝大部分android机器用下面的vieport设置也完全可以实现1px的真实效果。但是新webkit下已经移除了对target-densitydpi=device-dpi的支持。所以主流android还是用标准的设置上述initscale=scale,因此最后的方案是主流的设备设置viewport为
<meta name="viewport" content="densitydpi=device-dpi,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5">设置以上viewport还是无法改变默认980viewport的非主流设备(如vivo,云os等),设置如下:
<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,user-scalable=no"/>因此,最后的实现代码如下:
metaEl.setAttribute('content', 'target-densitydpi=device-dpi,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale);
//不通过加入具体设备的白名单,通过此特征检测 docEl.clientWidth == 980
//initial-scale=1不能省,因为上面设置为其他的scale了,需要重置回来
if(docEl.clientWidth == 980) {
metaEl.setAttribute('content', 'target-densitydpi=device-dpi,width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1');
}
其余方案还有用图片、用background-image、用box-shadow、用transform: scale(0.5)
详情看http://www.atatech.org/articles/26335#0
JS:
1、获取移动端设备的像素点
window.devicePixelRatio
代码规范:
1、js用驼峰、css用横杠
2、css横杠不要超过3个
3、不要用中文命名
4、不要用.xxx p .xxx div,改回用命名
5、所有弹窗用一个section包着
6、float的时候外面用一个div包着
7、数据交互用到的元素用id
8、bg名字和css3重复。改
9、background的样式分开一行行写,不要放一起
10、page页面留下<div id="page-index"></div>.页面内容在components/boot/xxl里全局变量var $page, $root;对外两个方法page.show和page.hide
css常见问题的更多相关文章
- CSS常见问题及兼容性
CSS常见问题 1 (IE6,7)H5标签兼容 解决方法1:(只显示核心代码) 1<script> ; ; ; ;;;};;;;;;;; ...
- XHTML CSS 常见问题和解决方案
原文地址:XHTML CSS 常见问题和解决方案 作为前端开发人员,在日常的页面制作时,不可避免的会碰上这样那样的问题,我挑选了其中的一些进行总结归档,希望对大家会有所帮助: 1.如何定义高度很小的容 ...
- CSS 常见问题笔记
CSS 常见问题 布局 一.盒模型宽度计算 问题:div1 的 offsetWidth 是多少? <style> #div1 { width: 100px; padding: 10px; ...
- Html / CSS常见问题 解决方案
解决Safari下input光标过大 input { line-height: normal; } 设置浮层 html, body { /*只有父元素设置宽高为100%子元素设置宽高100%时才能撑满 ...
- DIV+CSS常见问题:DIV如何设置一个像素高度?
CSS如何控制DIV实现1像素高度呢?问题看起来很简单,但万恶的IE6会让你很麻烦,不过解决办法很多,本文将介绍最简单的一种:DIV{height:1px;line-height:1px;font-s ...
- 实战中总结出来的CSS常见问题及解决办法
一.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 二.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次.对 一个标签同时使用cla ...
- DIV+CSS 常见问题及解决办法整理
http://blog.shaogroup.com/divcss-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E5% ...
- 分针网—IT教育: Html / CSS常见问题的解决方案
1. 解决Safari下input光标过大 2. 设置浮层 3. CSS绘制三角形 4. 清除浮动 1) 浮动元素父级添加样式 2) 父元素后添加伪元素 3) 同样可以使用 ...
- css常见问题汇总
1. 如果我想显示两行文字第二行超出部分‘...’? 限制在一个块元素显示的文本的行数. -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit proper ...
随机推荐
- Dancing Link 详解(转载)
Dancing Link详解: http://www.cnblogs.com/grenet/p/3145800.html Dancing Link求解数独: http://www.cnblogs.co ...
- android studio...混淆打包全揭秘
前言,当前android studio使用的版本较新,低版本的如果有差异,或者问题,欢迎拍砖! 1.修改配置文件 找到配置文件,build.gradle,修改如下. signingConfigs ...
- SVN 忽略文件但不删除文件
SVN忽略一些不必要的文件但不删除 如果svn仓库中有一些不希望被别人提交的文件 该如何忽略掉对这个文件的更改但又不删除这个文件呢? 在找了一堆解决方案后得出了如下结论 去除要被忽略文件的版本控制 基 ...
- ActiveReports 报表应用教程 (9)---交互式报表之动态排序
在 ActiveReports 中除了提供对数据源进行排序的功能之外,还提供了最终用户排序功能,最终用户可以对报表进行区域内排序和整个数据源排序,结合数据钻取.过滤等功能可以让用户更方便地分析报表数据 ...
- Python轻量Web框架Flask使用
http://blog.csdn.net/jacman/article/details/49098819 目录(?)[+] Flask安装 Python开发工具EclipsePyDev准备 Flask ...
- 泛函编程(24)-泛函数据类型-Monad, monadic programming
在上一节我们介绍了Monad.我们知道Monad是一个高度概括的抽象模型.好像创造Monad的目的是为了抽取各种数据类型的共性组件函数汇集成一套组件库从而避免重复编码.这些能对什么是Monad提供一个 ...
- 【GPU编解码】GPU硬编码
一.OpenCV中的硬编码 OpenCV2.4.6中,已实现利用GPU进行写视频,编码过程由cv::gpu::VideoWriter_GPU完成,其示例程序如下. int main(int argc, ...
- ASP.NET Web API通过ActionFilter来实现缓存
using System; using System.Collections.Generic; using System.Linq; using System.Threading; using Sys ...
- mysql服务器的字符集
文章:http://www.cnblogs.com/fantiantian/p/3468454.html 的评论中有这样的文字: 谢谢沧海一滴的总结 在Linux中一般都是UTF-8字符集.我们在建数 ...
- javascript --- 只继承于原型
正如上次所述,,出于效率考虑,我们应该尽可能的将一些可重用的属性和方法添加到原型中去. 如果养成了这个好习惯,我们仅仅依靠原型就能顺利的完成继承关系的构建了. 毕竟采用new her()方法将her的 ...