html随笔CSS(*^__^*)

时间：2021-10-13 08:12:41

控制文本显示字数，超过规定的文本长度  x显示...

white-space:nowrap;        //规定不能换行

overflow:hidden;

text-overflow:ellipsis;       //超出长度，“...”显示

width:320px;

设置  div内div居中显示（此方法中的display:flex 为较高版本的所以ie9 不兼容）

父层div加上css属性

display:flex;
justify-content:center;
align-items:center;

input 框初始提示文字

placeholder="手机号/邮箱/用户名"/

子层的margin与父类的margin合并问题：http://blog.csdn.net/hnxieyi/article/details/52818236

可以通过以下方式避免margin的合并问题

都用float来定位（有条件要求，适用范围较广）
为父元素添加overflow不为visiable 的属性 （适用范围极广，推荐使用）
为元素添加border（一般不用）
使用绝对定位（适用范围较窄）
父元素增加padding-top属性（改变尺寸，不建议使用）

然鹅我在用margin-top的时候又发现一个问题： 在上一个层有clear属性的时候margin-top不起作用，应该还是margin合并的问题，但是具体原因我没有分析清楚，只提供几个解决方案，供大家参考：

中间加一个层<div style=”clear:both”></div>
设置上一个层的margin-bottom来代替下一个层的margin-top
使用包裹层，并设置上下层都用float:left;
使用绝对定位
全部加上border

父层 往下 遍历子层 可以用  find();

childern()       //children() 方法返回返回被选元素的所有直接子元素。

animate使用

div,animate({“”:“” ，“”:“”},1200)

其中{}可以为执行动画的style e.g height、left....

“1200”为毫秒或者“fast”“normal”“slow” 为动画的执行速度

js后期新加元素绑定事件可以通过下方法

$(document).on("click",'.addspan',function(){
$(this).remove();

});

或者我们可以通过在加元素前 。将绑定的事件写入 加元素的html中

e.g

var eleSpan = "<span onclick='labelClick(this)'>"+sign+"</span>";   //将this 作为绑定事件的参数

if(spanlength == 0){

            $(".selected").empty();

            $(".selected").append(eleSpan);

            } else if(spanlength <){

                $(".selected").append(eleSpan);

                }else{

                    alert("最多添加三个哦~");

                    }

function labelClick(ele){

        $(ele).remove();

    }

jquery方法：

removeClass（）；                        //删除类

addClass（）；                            //加类

empty（）；                                 //从被选元素内移除所有内容，包括所有文本和子节点。

remove（）；                              //移除被选元素，包括所有文本和子节点。

val（）；                                     //返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。value为js的属性

text();                                          //返回或设置 被选元素中的所有文本值

index（）；                               //同类同胞所在的位置 从0开始，找不到为-1

对于格式比较特殊的我们可以用table

html随笔CSS(*^__^*)

table的行间距设定

border-spacing: 2px 15px;     //横向   2px；    纵向     15px

去掉相邻重复的边框

margin: 0 0 -1px -1px; （根据边框宽度来调节）

position   absolute  relative区别

absolute：  对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。
            如果其父层中都未定义absolute或relative，则其将相对body进行定位，

relative:           relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式

background  定位

120px 12px 水平120px； 竖直方向12x；

随机推荐

  1. 第七章 springboot &plus; retrofit&lpar;转载&rpar;

    本篇博客转发自:http://www.cnblogs.com/java-zhao/p/5350861.html retrofit:一套RESTful架构的Android(Java)客户端实现. 好处: ...

  2. PHP 如何显示大数字，防止显示为 科学计数法 形式

    PHP 数字超过一定长度时,会自动转换为 科学计数法 的形式,如 1.2345678912346E+16: 如何 避免转换,让它原样展示呢? 不过,可以用PHP函数 number_format() 来 ...

  3. nyoj138 找球号&lpar;二）&lowbar;离散化

    找球号(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:5   描述 在某一国度里流行着一种游戏.游戏规则为:现有一堆球中,每个球上都有一个整数编号i(0<=i< ...

  4. C&plus;&plus;中String类的实现

    原文:http://noalgo.info/382.html String是C++中的重要类型,程序员在C++面试中经常会遇到关于String的细节问题,甚至要求当场实现这个类.只是由于时间关系,可能 ...

  5. 设计模式之单例（singleton）设计模式代码详解

    单例有两种:懒汉式和饿汉式 /** * 懒汉式的单例模式 * 这种单例模式如果采用到多线程调用该方法,有可能会产生多个实例,原因是: * 当线程一进入了①处,此时轮到线程二的时间片,线程二也来到①处, ...

  6. 教你如何用Qt做透明的窗体，setMask&comma; Opacity

    // In this function, we can get the height and width of the current widgetvoid Widget::resizeEvent(Q ...

  7. SWFObject文件上传使用记录

    SWFObject文件上传使用方法记录,该插件使用起来相当强大也很灵活,与uploadify各有千秋. 值得一说的是,如果要设置button_image_url这个参数,该参数是按钮的背景图,但是一定 ...

  8. CodeForces 631C Print Check

    排序+构造+预处理 #include<cstdio> #include<cstring> #include<cmath> #include<algorithm ...

  9. POJ 3469&period;Dual Core CPU 最大流dinic算法模板

    Dual Core CPU Time Limit: 15000MS   Memory Limit: 131072K Total Submissions: 24830   Accepted: 10756 ...

  10. linux服务器ssh免密码登录

    假设有三台服务器的ip分别是10.9.1.101.10.9.1.102.10.9.1.103 修改hosts文件 分别修改三台服务器的hosts的文件(vi /etc/hosts), 在hosts文件 ...

相关文章