day5

A今天学习的内容

1.关于margin的一些小问题

假如给子元素添加一个margin-top样式，父元素移动，子元素相对于父元素不移动，此时的解决方法如下（常用）：
1.给父元素一个overflow：hidden样式；
2.给父元素设置一个伪元素
：before{
conten：" ";
display:table;
}

图例：

01.PNG

结果：

02.PNG

父、子元素都移动了100px，此时给父元素设置一个伪元素：

03.PNG

结果：

04.PNG

2.绝对路径和相对路径

绝对路径：从电脑的某个盘开始的路径
比如：
用绝对路径插入某张图片，想要在html中看到这张图片就要在本地打开这个html文件

相对路径：相对当前文件所在的路径
同级目录 src="file.jpg"
上一级目录：src="images/file.jpg"
下一级目录：src="../file/file.jpg"

3.HTML表单相关元素

1.一个登陆页面需要的最主要元素：

05.PNG

标签为input元素定义标注（标记），它不会向用户呈现任何特殊效果，但为鼠标用户改进了可用性，如果在label元素内点击文本，就会触发此控件（如上图，鼠标点中账号，对应的input输入框就会出现光标），注意，标签的for属性应当与相关元素的id属性相同。

2.设置单选框

图片.png

在input里加入一个“checked”，对应的选项就会变成默认选项。

3.多选框

图片.png

同样的，在input里加入一个“checked”，对应的选项就也会变成默认选项。

4.下拉选框

图片.png

在option里加入一个“selected”，对应的选项就也会变成默认选项。

5.关于input
文本输入框：（输入的文本可以看见）
密码输入框：（输入的文本会显示为黑点）
提交按钮：（在value里输入的文本会显示在这个按钮中）

6.转义字符（常用的几个）
 ；表示空格
<；小于号
>；大于号
©；©

7.文本域
，需要给文本域添加一个样式textarea{width:200px;height:120px;resize: none;}这样文本域才会固定。

>4.雪碧图

iconfont的使用方法

5.css样式的几种引入方式

外部样式表

内部样式表（位于标签内部）

内联样式（在HTML元素内部）
例如：
hhh

给同一个选择器设置同一样式，离元素近的样式设置方式优先级高。

4.使用选择器的一些小技巧(给一个父级元素里的某个/某些子级元素添加样式)
比如说一个div里面包裹着数个p，要选择特定的某个/些p：

15.PNG

5.fieldset 元素定义和用法

 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 
 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

例1：

17.PNG

结果：

18.PNG

例2：

图片.png

结果：

16.PNG

B今天掌握的内容

1.解决margin出现的一点小问题
2.绝对路径和相对路径的区别
3.登录页面包括一些什么样的基本的标签以及它们的用法，单选和多选，下拉选框，默认选项的设置方法
4.文本域的使用方法
5.关于input不同的type的表现形式
6.常用的转义字符
7.雪碧图的使用方法
8.css样式的三种引入方式
9.给一个父级元素里的某个/某些子级元素添加样式的小技巧
10.

C还未掌握的内容