!--思路：先定外层，再定内层-->
     
     
    
      
        
       
            
        *收藏本站        
       
        
       
            
        登录            
        免费注册            
        我的订单            
        VIP会员俱乐部            
        客户服务        
       
    
      
     
     
    
      
     
     
    
      
        
       
新用户注册
        
       
            
        
用户名：
 　　　　　　　
        
        
       
    
      
    
      
    
      
     
     
          2004-2015 www.autohome.com.cn All Rights Reserved.汽车之家 版权所有
     
*{    margin: 0;    padding: 0;}.header{    width: 100%;    height: 30px;    background-color: grey;}.headerContent{    width: 80%;    height: 30px;    margin: 0 auto;    line-height: 30px;}.keep{    float: left;}.action{    float: right;}.action a{    margin-right: 10px;}.logo{    width: 80%;    margin: 0 auto;}.content{    border: 1px solid red;    width: 80%;    height: 600px;    margin: 0 auto;}.regForm{    width: 60%;    background-color: antiquewhite;    height: 100%;    float: left;    /*border-right-style: dashed;*/}.loginBtn{    width: 40%;    height: 100%;    background-color: aqua;    float: left;}

.regForm h3{
     margin-top: 20px; margin-left: 30px; } #form{ margin-top: 20px; margin-left: 40px; } #c1{ line-height: 30px; } #form .submit{ padding: 5px 20px; background-color: red; margin-top: 10px; color: white; border: none; }

CSS选择器
     
      DIV
     
PPP
PPPP
div,p{color: red}div,.c1{color: red}p.c1{color: red}    只有第二行，且的关系
     
      div
     
class可以有多个值，空格隔开class为何要有多个值
     
      <
     
     
      <
     
.btn{    width: 30px;    height: 60px;    background-color: darkgray;    opacity: 0.5;    font-size: 22px;    color: white;    text-align: center;    line-height: 60px;    margin-top: 10px;}.left{float: left;}.right{float: right}
     
    
      
       
P1
      
    
      
P2
     
P3
P4
后代选择器 作用P1 p2.outer p{color: red}子代选择器 作用p2.outer >p{color: red}毗邻元素选择器 作用紧挨着p3.outer +p{color: red}兄弟选择器 作用p3 p4outer ～ p{color: red}自定义属性 属性名=属性值
     
      
P1
      
P2
      
P3
     
[egon]{color:red;}同时包含egon，alex[egon][alex]{color:red;}同时egon值xxx，alex[egon="xxx"][alex]{color: red}div标签下egon值ooodiv [egon="ooo"]{color:red}
P7
[egon～="row"]{color:red;}只匹配egon属性值开头为xx[egon^="xx"]{color:red;}只匹配egon属性值包含sb[egon*="sb"]{color:bisque}伪类选择器 ancher伪类伪类都是选择的hello yuana{color:red;}a:link{color:blue;}a;hover{color: green;}a:active{color:yellow}a:visited{color: aquamarine}
     
.c1{    width: 100%;    height: 30px;    background-color: yellow;}.c1:hover{color: red;}下划线红色字体，悬浮.headerContent a:hover{color: red;text-decoration: underline;}.c2,.c3{width: 100px;height: 100px;background-color: darkgreen}.box{border: 1px solid red;}当悬浮到box时对c2操作.box:hover .c2{background-color: green}before,after用法.outer:after{content: "world";color:red;}CSS选择器优先级： id>class>element(p,div)        内嵌式(style="color:red")(权值1000)>id(权值100)>class(权值10)>element(p,div)(权值1)        不在规则内：!important;!important会直接采用此部分格式.c4{color:red !important;}CSS继承继承是在没设置时会继承父类.c1{color:red;}a标签有自己的格式，不会继承父类颜色代码对应表 设置文本颜色 RGB(红，绿，蓝)（0-255）文本：基线、底线、顶线、中线img{vertical-align: middle;}img{vertical-align: -30px;}title:     .font_text{    font-family: Tahoma; 字体格式    font-weight: 600;   粗细    font-size: 15px;    font-style: italic; 斜线    text-indent: 150px; 首行缩进    letter-spacing: 10px; 字母间距    word-spacing: 15px; 单词间距}背景属性.c1{    background-image: url("img/美乐乐.png");    background-repeat: repeat-x; 只在x轴平铺 repeat-y,no-repeat.    background-position: 200px 300px;   左右200px，上下300px.    background: usl("img/美乐乐.png") no-repeat center center;    background-position: -200px -200px; 调整img的位置}列表属性line-style:none;line-style:square;方块 lower-roman小写罗马字 upper-roman大写罗马字display属性    display: inline; 显示为内联标签    display: block; 块级标签    display: inline-block;CSS布局关键点：如何能够在一行显示多个可以调节长宽的元素思路1：float思路2：display.myHide{    display: none;会被隐藏，不占位置 } 希望哪个标签隐藏就将标签的class设置为myHide.float属性  非完全脱离文档流/半脱离文档流float清楚浮动clear:none/left/right/both;clear:left 左边不能有浮动元素。如果有，自己走。clear:right 右边不能有浮动元素。如果有，自己走。clear:both  左边右边都不能有浮动元素float父级塌陷.header{width: 100%;height: 60px;background-color: green;}*{margin: 0;padding: 0;}.item1,.item2,.item3{width:60px;height: 60px;background-color: yellow;float: left}.item3{float:right}.header:after{content: "";display: block;clear: both;}一般命名：发生塌陷问题 命名为header即可直接引用.clearfix:after{content: "";display: block;clear: both;}定位position返回顶部