day02

今天学到了什么

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

margin:0;  //四个方向都改变
margin:0 10px; //top,bottom为0px;left,right为10px
margin:0 10px 20px; //top 0;left,right 10px;bottom 20px;

2.html标签的分类

• 2.1 块标签
  特点：
  1.独占一行
  2.能够设置宽（width），高（height）
  eg：

div,h1~h6,p,ul,li,dl,dt,dd

• 2.2 内联标签
  特点：
  1.并排显示
  2.不能设置宽高
  3.不能设置margin-top，margin-bottom
  eg:

a,pan,em,strong

• 2.3 内连块
  特点：
  1.并排显示
  2.可以设置宽高
  eg:

button,input,img

• 2.4 如何让内联元素和内联块元素水平居中
  2.4.1第一种方法：

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

2.4.2第二种方法：

给父级加text-align:center

3.css选择器的分类

• 3.1 css 元素选择器，文档的元素是最基本的选择器

p{color：pink}

• 3.2 .class选择器

.one{color：yellow}

• 3.3 .id选择器

#first{color：blue}

• 3.4 分组选择器

p,h4{background:gray}

• 3.5 后代选择器

div>span{} //选取div所有子元素为span的标签

• 3.6 兄弟选择器

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

-3.7伪类选择器

div:hover{}
input:focus{}

• 3.8伪元素

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

• 3.9属性选择

div[class='test']{}

4.选择器的优先级别排序

<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}

5.css背景的选择

背景颜色:background-color
背景图片:backgorund-image
背景重复:background-repeat
背景吸附:background-attachment:fixed | scroll
//背景位置有两个参数,第一个参数表示离x轴的距离,y表示离y轴的距离
背景位置:background-position: x y 
简写background: color image repeat  position
background-size属性指定背景图片大小。
background-size: x y;
x表示宽度，y表示高度
background-size:cover;
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于background-size:100% 100%;