2018-06-21

A.今天学到什么

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.能够设置宽高

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,img,input

3.css选择器

• 3.1分类：

(1).css元素选择器
文档的元素就是最基本的选择器
p{color:pink}
(2).class选择器
.test{color:yellow}
(3).id选择器
first{color:blue}
(4).分组选择器
p,h4{background:gray}
(5).后代选择器
div>span{} //选取div所有子元素为span的标签
(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选择器的优先级别排序

元素选择器<class选择器<ID选择器<!important

div{color:pink}<div.test{color:blue}<div#first{color:yellow}<div{color:red !important}

4.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%;

B.今天没掌握的

今天学的要死记硬背的东西比较多，所以没掌握的都是些需要去记的，去背的。