CSS实战技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/wtcsy/article/details/7465659

做前端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 一些bug的记载

http://www.cnblogs.com/yangjunhua/archive/2012/01/20/2328055.html