今天完成的事情：

9-8

Css外边距：

  围绕在元素边框的空白区域是外边距。最简单的是用margin设置。

用法：连写（margin:上 左 下 右；）、分写（margin:top/right/left/bottom;）、简写（margin: 上/下 左/右；）

Margin：0 auto；常用来设置盒子水平居中

Margin合并现象：相邻元素合并，父子元素合并，空白元素合并

解决合并方法：给父元素设置边框，激活bfc（display，overflow等）

Css内边距

元素的内边距在边框和内容区之间。最简单的是用padding设置。

用法：连写（padding:上 左 下 右；）、分写（padding:top/right/left/bottom;）、简写（padding: 上/下 左/右；）

边框

Border属性

用法：连写（border：宽度 样式 颜色；），单独某一条边框也可以连写，也可以分别设置宽度，样式和颜色

定位position

相对定位：position：relative，相对于自己以前在标准流中的位置来移动

·在相对定位中同一个方向上的定位属性只能使用一个

top/bottom 只能用一个

left/right 只能用一个

·相对定位是不脱离标准流的, 会继续在标准流中占用一份空间

·由于相对定位是不脱离标准流的, 所以在相对定位中区分块级元素/行内元素/行内块 级元素

·由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以 当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

绝对定位：position：absolute，相对于body或者某个定位流中的祖先元素来定位

·绝对定位的元素是脱离标准流的, 不会占用标准流中的位置

·由于绝对定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元 素/行内块级元素

·如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高 度作为参考点, 而不是以整个网页的宽度和高度作为参考点 ，相对于body定位会随着 页面的滚动而滚动

·一个绝对定位的元素会忽略祖先元素的padding

绝对定位参考点:

·默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

·如果一个绝对定位的元素有祖先元素, 并且祖先元素中有一个是定位流中的元素, 那 么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点

·如果一个绝对定位的元素有祖先元素, 并且祖先元素中有多个是定位流中的元素, 那 么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点

绝对定位一般配合相对定位来使用，子绝父相。

固定定位：position：fixde；可以让某个盒子不随着滚动条的滚动而滚动

·固定定位的元素是脱离标准流的, 不会占用标准流中的位置

·由于固定定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素

·IE6不支持固定定位

z-index属性：用于指定定位的元素的覆盖关系

定位元素的覆盖关系:

默认情况下定位的元素一定会盖住没有定位的元素

默认情况下写在后面的定位元素会盖住前面的定位元素

默认情况下所有元素的z-index值都是0, 如果设置了元素的z-index 值, 那么谁比较大谁就显示在前面

定位元素的从父现象

父元素没有z-index值, 那么子元素谁的z-index大谁盖住谁

父元素z-index值不一样, 那么父元素谁的z-index大谁盖住谁

input标签

input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同

明文输入框

作用: 用户可以在输入框内输入内容

账号:<input type="text"/>

暗文输入框

作用: 用户可以在输入框内输入内容

密码:<input type="password"/>

给输入框设置默认值

账号:<input type="text" value="123"/>

密码:<input type="password" value="123"/>

规定输入字段中的字符的最大长度

账号: <input type="text" name="fullname" maxlength="8" />

单选框(radio)

作用: 用户只能从众多选项中选择其中一个

单选按钮，天生是不互斥的，如果想互斥，必须要有相同的name属性

<input type="radio" name="xingbie" /> 男

<input type="radio" name="xingbie" /> 女

多选框(checkbox)

作用: 用户只能从众多选项中选择多个

复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

<input type="checkbox" name="aihao"/> 篮球

<input type="checkbox" name="aihao"/> 足球

<input type="checkbox" name="aihao"/> 棒球

给单选、多选设置默认值

指定radio和checkbox默认值, 前提是同一组内容必须设置相同name属性

    <input type="radio" name="xingbie" checked="checked"/> 男

    <input type="radio" name="xingbie" /> 女

    <input type="radio" name="xingbie" /> 妖

<input type="checkbox" name="aihao" checked="checked"/> 篮球

<input type="checkbox" name="aihao" checked="checked"/> 足球

<input type="checkbox" name="aihao"/> 棒球

label标签

作用: label标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性

注意事项:

表单元素要有一个id，然后label标签就有一个for属性，for属性和id相同就表示绑定了

所有表单元素都可以通过label绑定

<!--给文本框添加绑定--><label for="account">账号:</label><input type="text" id="account" />

<!--给单选框添加绑定--><input type="radio" name="sex" id="man" /> <label for="man">男</label>

<!--给多选框添加绑定--><input type="checkbox" id="basketball" /><label for="basketball">篮球</label>

提交按钮

作用:定义提交按钮。提交按钮会把表单数据发送到action属性指定的页面

<input type="submit" />

注意事项:

这个按钮不需要写value自动就有“提交”文字

要想通过submit提交数据到服务器, 被提交的表单项都必须设置name属性

Button：定义一个按钮

在 button 元素内部，可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

button、input、a标签都可以加上一定的样式之后成为外观上没有太大差别的按钮，那么，这三个标签都适合在什么场景下作为按钮使用呢？

<button>提交</button>： 
通过onclick绑定javascript事件。

<input type="submit" value="提交" />： 
将表单内用户设置或选择的所有数据一并提交到后台

<a href="#">提交</a>： 
通过添加链接访问到页面中的某一个位置或另一个页面，不向后台提交数据。

明天计划的事情：

做任务，写代码的时候注意标签语义化

遇到的问题：

button标签什么时候使用，布局方面有时候还是会有点混乱，浮动，定位，只要能达到效果乱用一通，不知道什么时候用什么最合适

收获：