day02

今天学到什么

1.盒子模型的传参

margin：100px; 四个方向都改变
margin：50px 100px  top bottom为50px ; left right 为100px.
margin :50px 100px 150px ; top为50px; left right 为100px;bottom 为150px.

2.HTML标签的分类

• 2.1块标签

特点：1.独占一行 2.能够设置宽高
div,h1~h6,p,ul,li,dl,dt,dd

• 2.2内联标签

1.并排显示
2.不能设置宽高
3.不能设置margin-top,margin-bottom
a,span,em,strong

• 2.3内联块

1.并排显示
2.可以设置宽 高
button input img

• 2.4如何让内联元素和内联块元素水平居中

1.
display:block;
margin-left:auto;
margin-right:auto;
2.
给父级加text-align:center

3.选择器

• 3.1分类

(1).css元素选择器
  文档的元素就是最基本的选择器
(2).class选择器
.test{color:yellow}
(3).id选择器
#first{color:blue}
(4).分组选择器
p,h4{background:gray}
(5).后代选择器
  .parent>h1{}
    选择parent之后的直接子元素(亲儿子)

    .parent h1{}选中parent之后的所有h1元素
  
(6).兄弟选择器
  div+p{}选取紧邻div之后的第一个兄弟元素
  div~p{}选取紧邻div之后的所有兄弟元素
(7).伪类选择器
  div:hover{} //鼠标移上去
  input:focus{}//鼠标选中
(8).伪元素
":before" 伪元素可以在元素的内容前面插入新内容
p:before{
  content:''
}
":after" 伪元素可以在元素的内容之后插入新内容。
p:after{
 content:''
}
(9).属性选择
div[class='test']{}

• 3.2选择器的优先级排序

！important>id>class>元素

4 背景

• 4.1背景设置

 background-color设置背景颜色 */
 background-color: #eee;
 background-image: url("images/icon1.png");
 background-repeat:no-repeat|repeat-x|repeat-y  
 background-repeat:no-repeat;
 background-position-x水平方向偏移 
 background-position-x: 50px; 
 background-position-y垂直偏移 
 background-position-y: 50px; 
 background-position:x y
 x水平方向
 y垂直方向            

• 4.2背景吸附

 background-attachment:scroll|fixed
 默认值为scroll
 fixed背景图片不会随鼠标的滚动滚动          

• 4.3背景大小

            width:800px;
            height:400px;
            background-image: url("images/down.jpg");
            background-repeat: no-repeat;
            background-color: red;
            background-size: 100% 100%;
//down 如果没有800 400  也会占满

• 4.3背景简写

                    颜色  图片            重复         位置
background:color img("images/xx.jpg") no-repeat center center

• 4.4 sprite图 （雪碧图）

width:18px;
height:18px;
background-repeat:no-repeat;
background-image:url("images/icons_type.png");
background-position-x:-19px; //负数向左移动