盒子模型和表单06.09

1. 盒子模型

1.1 margin外边距（外填充）

margin：上边距 右边距 下边距 左边距（设置了4个边距）

margin：上下边距 左右边距（设置2个边距）

margin：上边距 左右边距 下边距（设置3个边距）

margin：上右下左同时设定（设置1个边距）

1.2 margin居中

margin：auto；居中效果

text-align：center；

1.3 盒子距离

        如果两个盒子水平，那么它们之间的距离为两者之间的margin值的和（即左边的右侧margin加上右边的左侧margin）

        如果两个盒子垂直，那么它们之间的距离取上边盒子下侧margin与下边盒子的上侧margin的较大值。

如果为浮动的元素，则依然为两者距离之和。

推荐：盒子之间的位置关系（垂直方向）推荐使用padding调整。

1.4 padding内边距（内填充）

padding为盒子内部元素到盒子边框的距离。其四个属性的设定顺序和margin相同分别是：上、右、下、左。

1.5 W3C盒子和IE盒子

1.5.1 w3c盒子（标准盒子模型）：

        margin 外填充/外边距（两个盒子之间的距离）

        boorder 边框

        padding 内填充/内边距（内容与边框之间的距离）

        content 内容

        四部分相互独立。

1.5.2 IE盒子

        margin  border  padding  content（包含border和padding）

        box-size：border-box/content-box；切换盒子（IE和w3c）

2.浮动框架

2.1 iframe 

 iframe：就是页面中嵌套一个子浏览器窗口

用法如下：

<a href="" target="目标窗口名称（111）"></a>

<iframe name="窗口名称（111）" src=“默认显示的页面”></iframe>

表示在点击超链接标签后将会在111窗口中显示超链接的内容。

3.定位

3.1 什么是定位？

将元素放到页面的指定位置上。任意防止。绝对定位和固定定位会脱离文档流。

3.2 position定位

3.2.1 静态定位static

默认值，标准文档流的方式，流式布局，块状元素从上往下，行内元素从左到右。

3.2.2 相对定位relative

相对定位：相对于自己本身原有的位置，发生偏移。没有脱离文档流。

偏移：设置top，left，right，bottom

3.2.3 绝对定位absolute

绝对定位：先判断父（不仅仅是直接父亲还包含以上元素）元素没有进行定位（相对定位，绝对定位，固定定位）

1）如果没有：以浏览器窗口左上角原点为基准，偏移。

2）如果定位：以已经定位的父（不仅仅是直接父亲还包含以上元素）元素为基准，偏移。

包含块：容器设置position属性为relative，absolute，fixed任意一种，那么该容器就变为了包含块。此时，包含块中的子元素，进行定位偏移的时候，会以包含块为基准进行偏移。

一般推荐用relative属性作为包含块设置。absolute，fixed会脱离文档流，没法自动居中。

偏移：设置top,left,right,bottom

3.2.4 固定定位fixed

固定定位：将元素固定在某个页面中的某个位置上，部随页面的滚动而滚动。

/* 渐变色 */
/* radial-gradient径向渐变 */
background-image: radial-gradient(circle, red, yellow, green);
/* linear-gradient 线性渐变 */
background-image:linear-gradient(15deg,blue,green,white,yellow,pink,black,purple);
/*形状变化*/
transform: rotate(0deg) scale(1.1,1.3);
/*补间动画*/8transition: transform 1s;

 4.表单

表单：收集用户数据，提交给服务器。注册，登录，添加商品。

4.1 表单概述

概念：收集用户信息并将信息发送给指定的服务器程序处理。

4.2 表单的创建/使用

<form action="" method="get/post">
    表单元素
</form>

4.3 常用标签和属性

<input /> 标签

属性：

        name：表单元素的名称  区分表单元素。

        value：表单元素的初始值  一般指 text/password

        checked：单选或多选中的默认选中项 checked="checked/true"

        selected:下拉框中的默认选中项

        placeholder：输入提示语

        readonly：只读属性

        disabled：失效  可以用于按钮和选项

        requried：必填验证

html中：

        type：确定输入的类型

        text：任意文本

        password：密码

        radio：单选

        checkbox：多选/复选

        image：图片类型

        button：按钮

        file：文件

        hidden：隐藏

        reset：清空/重置

        submit：提交

html5中新增了一些类型：

        color：颜色

        date：日期

        datetime：日期时间

        datetime-local：从当前的日期时间开始

        email

        month：月份

        number：数字

        range

        search

        tel

        time

        url

        week

<select>&<option>标签：下拉选择标签

<select>

        <option>选择的内容</option>

        <option>选择的内容</option>

</select>

<textarea>标签：用于生成一个设定的文本区域

<textarea cols="设定行" rows="设定列"></textarea>