样式布局很让我头疼额
遇到一个记一下
1、padding、margin的区别,从w3cschool copy的图形。css框模型,每个元素都有一个框模型。以边框为基准划分的。。。而且可以用css的尺寸单位em,相对于当前字体的尺寸。
2、data-role="none" 防止jquery mobile 设置一些样式 有时候需要自己定义
3、有时候元素的定位不好解决,特别是手机上跑的。通常需要具体指定元素的宽度,有时候padding、margin解决不了。其实可能是定位出现了问题,可以用绝对定位。
4、!important 如果有重复定义的样式 当前覆盖已有。
5、应用里面会用到好多小的图标,为了便于维护和管理,通常将这些小图片都放到一个图像文件中。然后如何截取这些小图标呢。就要定位这些小图标的位置了。
向上、向左平移多少像素数是负值。比如:background-position: -55px -12px;
6、啊快疯啦。。可以使用伪元素:after 在某元素后面追加新的内容,如下图,确认按钮就是after指定的样式:
7、position:absolute 和vertical-align共用,对齐失效。将含有样式[position:absolute]的外面加一层div指定下高度100% 就可以啦,如下图用到了对齐:
8、可以只指定部分元素的宽度
9、单行文字居中:指定line-height(行高)=height即可 + text-align: center
10、line-height: 100% 以其包含的内容为基准、line-height、height要指定清楚、特别是有固定像素数的padding 、margin。可能会影响到。
11、看了jquery mobile里面的有些样式 觉得还是很有用的 利用margin值为负值 实现了元素的平移效果。包括绝对位置配合left、right 百分比的使用。。如下图,图标在文字的上面
12、没有指定line-height 而是通过padding+元素高度计算出父元素的高度。 padding使用尺寸单位 em(相对于当前对象内文本的字体尺寸),可以防止子超出父容器。
13、一些样式 可能的想法是 虽然包含某个元素 但是父元素高度没有指定 可以用padding em的方式以相对于子元素的大小实现高度可变。
14、样式方面还是有很多不明白额。。。头疼
15、可以创建遮罩层 阻止用户输入
比如:
100%;
height: 100%;
background: rgba(0,0,0,0.3);
position: absolute;
top: 0;
left: 0;
z-index: 999;
16、使用jquery mobile时列表经常是动态的,如果有用到jquery mobile 添加上去的样式通常失效。可以调用listView的refresh来刷新添加。如:$('#goods-list').listview().listview('refresh');
17、border宽度算不算进行高呢。?
18、精简样式命名 譬如:用 , 分割赋相同的样式 元素筛选是否用 > . 元素类型开头等
19、css的浮动 jquery mobile的网格布局ui-block-a...就用到了float:left。使元素向左浮动,内部元素变为行内元素。w3cschool也有个例子就是将ul变成行显示。
20、ul li 代替 select 实现下拉选择 条目点击的事件处理