zoukankan      html  css  js  c++  java
  • css样式随记

    样式布局很让我头疼额

    遇到一个记一下

    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 实现下拉选择 条目点击的事件处理

  • 相关阅读:
    jQuery源码分析-01总体架构
    JS框架的一些小总结
    jquery validate表单验证插件
    jQuery $.extend()用法总结
    详解;(function ($,window,document,undefined){...})(jQuery,window,document);
    (function(){... })();
    同源策略 JSONP(实践篇)
    **字符集--发展史
    Django X 和 druid
    Django xadmin的使用 (三)
  • 原文地址:https://www.cnblogs.com/azterzmshan/p/5251049.html
Copyright © 2011-2022 走看看