day02

今天学到可什么？

1. 盒子模型margin,padding的传参

margin:0;    //如果使用一个参数，四个方向都改变
margin:0 10px;    //如果使用二个参数，第一个参数改变top,bottom；第二个参数改变left,right;

2. HTML标签的分类

块标签：

1.独占一行
2.能够设置宽高

列如：div,h1~h6,p,ul,li,dl,dt,dd

内联标签:

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

列如：a,span,em,strong

内联块:

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

列如：button,img,input

思考

1.如何让内联元素和内联块元素水平居中

display:block;
margin-left:auto;
margin-right:auto;

2.如何让内联元素和内联块元素水平居中

给父级加text-align:center

3. css选择器

.分组选择器

p,h4{background:gray}

.后代选择器

div>parent{} //选取div之后的第一个的元素
div parent{} //选择div之后的的所有的元素

.兄弟选择器

div+p{}选取紧邻div之后的第一个兄弟p元素
div~p{}选取紧邻div之后的所有兄弟p元素

.伪类选择器

div:hover{}
input:focus{}

.属性选择

div[class='test']{}

.伪元素

":before" 伪元素可以在元素的内容前面插入新内容
p:before{
  content:''
}
":after" 伪元素可以在元素的内容之后插入新内容。
p:after{
 content:''
}

选择器的优先级别排序

<div class='test' id='first'>hello world</div>
元素选择器<class选择器<ID选择器<!important
div{color:pink}<div.test{color:blue}<div#first{color:yellow}<div{color:red !important}

4. 背景图片的一些知识

1.去重复的问题

background-repeat:no-repeat;//没有重复
background-repeat:repeat-y;//保留y轴的图片
background-repeat:repeat-x;//保留x轴的图片

2.偏移的的问题

background-postion:-x //水平方向偏移
background-postion:-y //垂直方向偏移
background-postion:centery//居中

/* background:color img repeat position */简写
 background:#eee url("images/down.jpg") no-repeat center center;

3.背景吸附

子元素不给width，他会继承父类的width，只发生在块元素之间
background-attachment:fixed;// 默认值为scroll
background-attachment:scroll;// fixed背景图片不会随鼠标的滚动滚动 background-size: 100% 100%;