记一些css

朴灿烈づ我的快乐病毒、 2022-06-13 12:48 197阅读 0赞

做前端3年多了，却从来没有认真的 仔细的学一下css    真是惭愧！~~~~~~~~~

边看变记咯............

css简写

margin,padding

margin : 10px 20px 15px;                    top   right/left   bottom

====>上10px            左右间距20px             右间距15

background

background:\#ccc url("header/2.png") repeat scroll left center transparent;

=====> 背景色  背景图片 重复背景图片 背景不随滚动条移动 背景图的位置  默认背景透明

font

font : italic bold 12px/1.5 tahoma;

=======>斜体 粗体 字体大写12px line-height=12\*1.5=18px   tahoma字体   ps要有字体类型line-height才会生效

list

.............忽略

清除浮动

不清除浮动会引发很多不明原因的问题咧,清一下好

我一般是多加个元素,放到浮动元素的最后面 然后clear:both

也可以让父元素 overflow:hidden:zoom:1

<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    *{
    padding:0; margin:0;
    }
    .clear{
    clear:both;
    }
    .test{
    background-color:#FF0; padding:10px;
    }
    .test ul{
    list-style-type:none;
    overflow:hidden;
    zoom:1;
    }
    .test li{
    width:120px;
    float:left;
    line-height:30px;
    }
    .test2{
        background-color:#90F;
    }
    .list{
        height:30px;
        width:30px;
        background-color:#F00;
        margin:30px;
        float:left;
    }
    </style>
    </head>
    <body>
    <div class="test">
        <ul >
         <li>123</li>
            <li>123</li>
            <li>123</li>
        </ul>
    </div>
    <br/><br/>
    <div class="test2">
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>                              
        <div class="clear"></div>
    </div>
    </body>
    </html>

还有一种  
.c\{zoom:1; \}  
.c:after\{content:"";display:table;clear:both;\}

双边距

ie6下浮动元素设置了margin就产生双边距

设置浮动元素为内联display:inline;

布局的时候尽量用父元素的padding 而不用margin 这样会减少很多莫名其妙的问题

dl dt dd

dl是容器  dt标题  dd是描述

关于 text-indent:

今天做页面的时候发现ie下面    给textarea加text-indent  结果textarea本身也向前移动了

后来听欢哥解释  说是 非block元素 要是设置block     我擦

[http://sofish.de/1400][http_sofish.de_1400]  一些bug的记载

[http://www.cnblogs.com/yangjunhua/archive/2012/01/20/2328055.html][http_www.cnblogs.com_yangjunhua_archive_2012_01_20_2328055.html]

图片垂直居中  原来是在  ie6,7下 是设置字体的大小

html标签语义化

[http://www.blueidea.com/tech/site/2006/3771.asp][http_www.blueidea.com_tech_site_2006_3771.asp]

[http://blog.163.com/l\_lihanyu/blog/static/12003272320105211145106/][http_blog.163.com_l_lihanyu_blog_static_12003272320105211145106]

[http://www.cnblogs.com/PeunZhang/archive/2012/03/08/2385592.html][http_www.cnblogs.com_PeunZhang_archive_2012_03_08_2385592.html]

<nobr>标签  不换行

最近爱看别人写的技术blog  这是一个好习惯呀！

[http_sofish.de_1400]: http://sofish.de/1400
[http_www.cnblogs.com_yangjunhua_archive_2012_01_20_2328055.html]: http://www.cnblogs.com/yangjunhua/archive/2012/01/20/2328055.html
[http_www.blueidea.com_tech_site_2006_3771.asp]: http://www.blueidea.com/tech/site/2006/3771.asp
[http_blog.163.com_l_lihanyu_blog_static_12003272320105211145106]: http://blog.163.com/l_lihanyu/blog/static/12003272320105211145106/
[http_www.cnblogs.com_PeunZhang_archive_2012_03_08_2385592.html]: http://www.cnblogs.com/PeunZhang/archive/2012/03/08/2385592.html