zoukankan      html  css  js  c++  java
  • css基本的东西

    0 css本来也是一个比较乱的东西,我们需要在最恰当的情况下,写出最杂乱的效果。
    1 面对body设置了 -webkit-font-smoothing:antialiased (默认值为subpixel-antialiased),在黑又粗的大号文本面前还可以一看,但到了到处是小字的小组帖子那边就快眼瞎了,
    2 浮动和绝对定位好相,不建议使用
    3 <hgroup> 已经从 W3C 标准中移除,不建议使用.
    4 window.addEventListener('load', function() {
    FastClick.attach(document.body);
    }, false); 移动领域为了防止300毫秒的延迟。
    5 margin:0 auto;失效的两个原因,一个是因为,div没有宽度,另一个是因为,fixed.这个时候只能通过。
    6 关于绝对定位和相对定位。fixed默认是绝对定位,并且margin:0 auto 失效此时。
    绝对定位和相对定位相对于最近父元素的绝对和相对。
    如果一个绝对和相对没有设置top和left的话,那么就不需要考虑他的父类为了,他可能是别人的父类。
    绝对定位不占空间。如果都是绝对的话,看层级。层级相同的话,看出现的事件,谁后看谁的。
    7.css中默认img的display属性是inline,只有body、div、p、h1等少数拥有块定义。
    如果需要img有块的属性,还需在css中定义
    img {display:block;}
    8. div1的层级是1,div1里边的div2即使层级是4,和div1层级相同的div2的层级3,那么div2也不能盖住div1.
    9. 当你定义的CSS中有position属性值为absolute、relative或fixed时,用z-index此取值方可生效。此属性参数值越大,则该标签被层叠在最上面。
    10.font: 12px/20px font-size/line-height 规定字体尺寸和行高
    font:12px/20px "5FAE8F6F96C59ED1",Arial,sans-serif;
    11.text-decoration 文本修饰的属性
    none 默认。定义标准的文本。
    underline 定义文本下的一条线。
    overline 定义文本上的一条线。
    line-through 定义穿过文本下的一条线。
    blink 定义闪烁的文本。
    inherit 规定应该从父元素继承 text-decoration 属性的值。
    12.outline这个样式。
    13.很多时候不需要100%的,因为我们resize中设置好width的宽带就行。但是里边的内容可能撑破,所以才会用minwidth,规范。
    14. h标签的居中可以用text-align:center;
    15. <a href="#">良友商学院<span>BUSINESS SCHOOL</span></a>这种形式表示的是一个跳转的文字,下边还有一个不跳转的问题。通常给下边的span一个display:block;就变为两行了。
    16.text-decoration:none;去掉a标签的下滑线。
    17. <a>江苏淮州 <img src='./1.jpg'/></a> 通常江苏淮州和后边的图片在同一行。
    18.<li>清心总监:<img src="images/qq.png" align="absmiddle"></li>
    <li class="last">电话:400-009-6359</li> 下边的这个文字居中完全可以用,text-align;
    19.scrollTop的表示的是滚动条过去的高度。
    20. text-indent 属性规定文本块中首行文本的缩进。
    21. line-height: 50px;文字的这个高度和外边的高度相同的话,文字有居中的效果。
    22.
    background:url(../images/list01.png) no-repeat 0 center;
    的意思是 图像地址 不重复 水平位置0 垂直位置居中
    0 center 的意思就是 水平位置0 垂直位置居中
    这个意思是图片位于这个div的位置,多余出的不显示。不考虑图片的大小。
    23. stop这个方法的妙用。减少多少bug和代码量。
    $("#flQQ ul li").eq(2).hover(function(){
    $(this).find(".tel").stop().animate({"160px"},500);
    },function(){
    $(this).find(".tel").stop().animate({"0px"},500);
    });
    24.添加抛物线:
    var flyer = $("<img src='"+src+"' class='fly'/>");
    flyer.fly({
    start:{
    left:event.clientX, // 获取点击购物车按钮的X,Y坐标
    top:event.clientY
    },
    end:{
    left: offset.left,
    top: offset.top,
    20,
    height:20
    },
    onEnd:function(){
    flyer.fadeOut("slow",function(){
    $(this).remove(); //
    });
    }
    25. 用font代替icon图标
    http://www.jb51.net/css/70033.html
    26. $(".top div").eq(index).show(500).siblings().hide();
    27.$(this).find(".hover").slideToggle(1000);
    $(this).siblings().removeClass("select").find(".hover").slideUp(1000);
    slideToggle slideDown slideUp
    28. @font-face 自定义字体,IE也支持的很好。
    http://www.w3cplus.com/content/css3-font-face
    29.
    从外部引入到样式分为两种:(注意写在head标签里面) Link样式表式: <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路径)> Html式: <style type="text/css">@import url("css.css");></style>
    30.自定义列表以 <dl> 标签开始; 每个自定义列表项以 <dt> 开始; 每个自定义列表项的定义以 <dd> 开始。 (定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等)
    31. this.auto = a ? a : false;
    32. white-space:nowrap;中文强制不换行33. $("span:eq(0)").text("" + $("div").data("test1"));注意这种选择器的选择方式。

    33. 那些属性可以被继承,margin: 0 auto;就不可以。继承的属性的优先级是最高还是最低。
    width可以继承么,还是只能撑大。
    =======================================
    一些时刻应该记住的东西
    34.<link href='my.css' rel='stylesheet' type='text/css'/>
    35.清除浮动的三种方法。
    36. http://blog.jobbole.com/49173/
    http://blog.dimpurr.com/css-before-after/
    http://www.zhangxinxu.com/wordpress/2010/09/after%E4%BC%AA%E7%B1%BBcontent%E5%86%85%E5%AE%B9%E7%94%9F%E6%88%90%E5%B8%B8%E8%A7%81%E5%BA%94%E7%94%A8%E4%B8%BE%E4%BE%8B/

  • 相关阅读:
    【JSOI 2008】 最大数
    【Usaco2008 Dec】Patting Heads
    【AHOI 2005】 约数研究
    【HAOI2007】反素数
    BZOJ3676 APIO2014回文串(manacher+后缀自动机)
    Luogu3804 【模板】后缀自动机(后缀自动机)
    后缀自动机学习笔记
    Codeforces ECR47F Dominant Indices(线段树合并)
    BZOJ1127 POI2008KUP(悬线法)
    BZOJ4652 NOI2016循环之美(莫比乌斯反演+杜教筛)
  • 原文地址:https://www.cnblogs.com/coding4/p/5450064.html
Copyright © 2011-2022 走看看