A我学习到了什么？

1温习day01的知识点

盒子模型：
margin外边距，border边框，padding内框的直接画面调节

样式重置：开发环境中的默认值
如：*｛margin：0；padding：0；｝

水平居中：
margin-left:auto;
margin-right:auto;
仅限是块标签的水平居中

常用HTML语义化：
div：//块元素，
p：//段落,
h1~h6：标题,
img//图片项,
input//对话框,
a//链接,
button//按键

套标签：
ul：无序列表，
li：列表描述;
dl:定义段，
dt：定义描述，
dd定义称述
  <ul>                         
        <li></li>                     
 </ul>                                                                 

<dl>
       <dt></dt>
        <dd></dd>
</dl>

常用CSS的样式：
background-color：背景颜色；
background-image:背景图片；
color：颜色；
width：宽度；
herght：高度；
line-herght:行高；
text-aline：文本对齐方向；
border-width：边框宽度；
border-style:边框样式；
border-color:边框颜色；
p:hover{color:red;}光标移动到元素变色；

CSS常用选择器：
p{},元素选择器；
class选择器：.text{};
id:选择器；
伪选择器：p:hover；
重要选择器：！importinent；
//他们比较级的大小
//元素<class<id<!importinent

2拓展HTML标签的分类

块标签：特点是独占一行，设置宽高
div,h1~h6,p,ul,li,dl,dt,dd
默认样式【display:block;】

内联标签：特点是并排显示，不能设置宽高
不能设置margin-top,margin-bottom
如：a,span,em,strong
默认样式【display:inline;】

内联块:特点是并排显示，可以设置宽高
button,img,input
默认样式【display:inline-block;】

让内联元素和内联块元素水平居中
display:block;//以改变默认样式进行
margin-left:auto;
margin-right:auto;//仅限块标签
给父级加text-align:center//仅限内联块标签

3CSS选择器

分组选择器：
p,h4，~{background:gray}//可以设置标签属性的样式

后代选择器：
div>span{} //选取div所有子元素为span的标签
div span{} //选取div之后的所有span元素
//可以设置标签属性的样式

兄弟选择器:
div+p{}选取紧邻div之后的第一个兄弟元素//仅限下个元素指定的元素
//div+h3+p可以跳过指定
div~p{}选取紧邻div之后的所有兄弟元素
//可以设置标签属性的样式

伪类选择器：
div:hover{}//光标移动到改变
input:focus{}//光标聚焦到改变
//可以设置标签属性的样式

伪元素：
":before" 伪元素可以在元素的内容前面插入新内容
p:before{
  content:''//可以不写，但是必写语句
}
":after" 伪元素可以在元素的内容之后插入新内容。
p:after{
 content:''//可以不写，但是必写语句
}
//可以设置标签属性的样式

属性选择：
div[class='test']{}
//区分特定的标签以及文件

B我掌握到了什么

1温习day01的知识点

盒子模型：
margin外边距，border边框，padding内框的直接画面调节

样式重置：开发环境中的默认值
如：*｛margin：0；padding：0；｝

水平居中：
margin-left:auto;
margin-right:auto;
仅限是块标签的水平居中

常用HTML语义化：
div：//块元素，
p：//段落,
h1~h6：标题,
img//图片项,
input//对话框,
a//链接,
button//按键

套标签：
ul：无序列表，
li：列表描述;
dl:定义段，
dt：定义描述，
dd定义称述
  <ul>                         
        <li></li>                     
 </ul>                                                                 

<dl>
       <dt></dt>
        <dd></dd>
</dl>

常用CSS的样式：
background-color：背景颜色；
background-image:背景图片；
color：颜色；
width：宽度；
herght：高度；
line-herght:行高；
text-aline：文本对齐方向；
border-width：边框宽度；
border-style:边框样式；
border-color:边框颜色；
p:hover{color:red;}光标移动到元素变色；

CSS常用选择器：
p{},元素选择器；
class选择器：.text{};
id:选择器；
伪选择器：p:hover；
重要选择器：！importinent；

2拓展HTML标签的分类

块标签：特点是独占一行，设置宽高
div,h1~h6,p,ul,li,dl,dt,dd
默认样式【display:block;】

内联标签：特点是并排显示，不能设置宽高
不能设置margin-top,margin-bottom
如：a,span,em,strong
默认样式【display:inline;】

内联块:特点是并排显示，可以设置宽高
button,img,input
默认样式【display:inline-block;】

让内联元素和内联块元素水平居中
display:block;//以改变默认样式进行
margin-left:auto;
margin-right:auto;//仅限块标签
给父级加text-align:center//仅限内联块标签

3CSS选择器

分组选择器：
p,h4，~{background:gray}//可以设置标签属性的样式

后代选择器：
div>span{} //选取div所有子元素为span的标签
div span{} //选取div之后的所有span元素

伪类选择器：
div:hover{}//光标移动到改变
input:focus{}//光标聚焦到改变
//可以设置标签属性的样式

伪元素：
":before" 伪元素可以在元素的内容前面插入新内容
p:before{
  content:''//可以不写，但是必写语句
}
":after" 伪元素可以在元素的内容之后插入新内容。
p:after{
 content:''//可以不写，但是必写语句
}
//可以设置标签属性的样式

属性选择：
div[class='test']{}
//区分特定的标签以及文件

C我没有掌握的

兄弟选择器:
div+p{}选取紧邻div之后的第一个兄弟元素//仅限下个元素指定的元素
//div+h3+p可以跳过指定
div~p{}选取紧邻div之后的所有兄弟元素
//可以设置标签属性的样式

兄弟选择器，后代选择器还是不怎么熟练，可能要多接触

QQ图片20170913194942.jpg QQ图片20170913193305.png