码迷,mamicode.com
首页 > Web开发 > 详细

跟着老公学习html随笔CSS(*^__^*)

时间:2017-11-03 17:12:06      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:flex   范围   尺寸   定义   遍历   selected   位置   ace   删除   

控制文本显示字数,超过规定的文本长度  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 < 3){
                $(".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

技术分享

 

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;

 

 

 

 

 

    

跟着老公学习html随笔CSS(*^__^*)

标签:flex   范围   尺寸   定义   遍历   selected   位置   ace   删除   

原文地址:http://www.cnblogs.com/RonnieQin/p/7238759.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!