本周总结

视觉格式化模型(visual gormatting model)

：css的一种机制，它规定了页面中的多个盒子如何布局

一、视觉格式化模型要求，所有的元素必须放置在他的包含块中，元素在包含块中的尺寸和位置，主要受到两个因素的影响：

• 元素的盒模型

• 元素的定位体系

  什么是定位体系

  视觉格式化模型规定，定位体系一共有三种：

  ①常规流（normal flow）

  ②浮动（float）

  ③绝对定位（absolute positioned）

  任何一个元素，必须属于其中一种定位体系，不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异

二、定位体系判断(postion的默认值是static,float的默认值是none)

​ 1、判定元素的postion的属性性 是不是以下的取值：

​ absolute(绝对位置)、fixed(固定位置)

​ 如果是其中某一个取值，则当前元素就属于”绝对定位“

​ 2、判定元素的float的属性性 是不是以下的取值：

​ left(左浮动)、right(右浮动)

​ 如果是其中某一个取值，则当前元素就属于”浮动“

三、盒模型大的尺寸

• margin:px\ em\ % \auto padding:px\ em\ % height:px\ em\ %\ auto

  boder:px\ em width:px\ em\ %\ auto

%尺寸是包含块尺寸的百分比

• margin、padding、width的百分比：是包含块宽度的百分比
• height的百分比

盒模型中的auto值

大部分情况下，盒子中的auto值计算规则和浮动盒子相同

margin-left: auto; 尽量撑满包含块 0px

margin-right: auto; 尽量撑满包含块 0px

margin-top: auto; 0px 0px

margin-bottom: auto; 0px 0px

width: auto; 尽量撑满包含块 适应内容高度

height: auto; 适应内容高度 适应内容高度

包含块(containing block)

：每个元素都有一个包含块(HTML的包含块是初始化包含块-initial containing block)，它是指元素在页面中摆放的区域，

通常情况下，元素的包含块是它父元素的内容盒(注:当定位体系发生变化的时候就不一定是父元素)

盒子位置

• 垂直方向是，若两个外边距相邻，则进行合并（折叠）

外边距合并

触发条件：俩个外边距之间没有padding,border,content

外边距合并（规则）：

• 相同值，取一个。
• 都是正值取最大值
• 都是负值取最小值
• 一正一负则相加

浮动

当元素的float属性取值为left或right时，元素属于浮动定位

默认值：none
取值：none不浮动	left左浮动		right右浮动

子级浮动，父级高度塌陷（父级没有高度，，，，即父级高度为零）

清除浮动

对一个元素清除浮动时，可以让该元素在摆放时，出现在浮动元素的下方

• 属性名：clear 属性值：left right both

方法：

• clear:both;----缺点:需要在HTML里加一个空标签

常规流盒子和浮动盒子混合摆放

• 浮动盒子在摆放时，要避开常规流盒子
• 常规流盒子在摆放时，无视浮动盒子
• 常规流盒子的自动高度计算时，无视浮动盒子——高度塌陷

---

3.23

一、盒子的相对位置

指相对于盒子原来位置的移动，但属于常规流（即：不会对其他盒子产生影响）

先设置postion:relative,在设置所需要移动的方向（可取负值）

二、绝对定位

• 当浮动元素被设置为绝对定位

  属于绝对定位，float属性被强制设置为none

• 绝对定位的元素不会对其他元素造成任何影响

• 绝对定位元素的位置

  可通过left、top、right、bottom来设置

• 绝对定位元素的包含块

  当position属性值为fixed时(固定位置)，它的其实位置时视口的左上角，即包含块为视口。

  固定位置的适用场景：

  pc：页面头部

  移动端：footer 广告 目录 回到顶部 即时通讯 侧边栏

绝对位置寻找包含块:

包含我，离我最近元素的position值不等于static

position: absolute;(在没有相对位置的最近盒子里取绝对位置)

堆叠级别(Z-index)：

有效的取值范围：相对、绝对、固定位置。（默认值为0）

取值范围：正负值（数字越大越靠前）

三、雪碧图、精灵图、图片整合技术

雪碧图操作步骤：

• 给定尺寸（雪碧图中图标的尺寸）
• 引用图片（background-img:url("")）
• 设置背景图片的位置（background-position:x值 y值）注:x y值也可以跟center之类的

四、弹性布局（flex）

• 四要素

  容器：父元素

  项目：子元素

  主轴：x轴

  交叉轴：y轴

• display不具有继承性

  添加flex的标签就是容器，子元素就是项目。

• 功能：

  1、所有项目默认情况下在一行显示。

  2、如果所有的项目宽度之和大于容器的宽度。项目会自动缩小。即不会超出容器的尺寸（不会换行）

• flex-direction改变主轴的方向

  row(行) 默认值 X轴（默认起始位置为左侧）

  column(列) Y轴

flex-direction：row;(改变主轴为水平方向)
flex-direction：row-reverse;(改变主轴的起始位置为右侧)
flex-direction：column;(改变主轴为垂直方向)
flex-direction：column-reverse(改变主轴的起始位置为底部)

• 设置换行(flex-wrap)

  nowrap不换行/wrap换行

  注：项目的尺寸大于容器的尺寸时才会换行

flex-wrap：wrap-reverse;(起始位置为底部且换行)
flex-low：(主轴方向) (是否换行)；

• 在主轴的对齐方式（不换行的情况下）

  水平方向

   justify-content: center; 主轴居中
  
   justify-content: flex-start; 主轴向左靠齐
  
   justify-content: flex-end;主轴向右靠齐
  
   space-between：项目和容器之间的距离=项目和项目之间的距离*0
  
   space-around：项目和容器之间的距离=项目和项目之间的距离*0.5
  
   space-evenly：项目和容器之间的距离=项目和项目之间的距离*1
  

• flex-flow:(是否换行)(主轴方向)

---

3.24

• **在交叉轴上的对齐方式 **（align-items）

  取值：

  flex-start(end) 交叉轴起点（终点）对齐

  center 交叉轴中点对齐(垂直对齐)

  baseline (基线对齐)

  stretch 默认值(项目高度为auto，项目的高就是容器的高，即自动撑满容器的高)

• 多跟轴线的对齐方式

align-content:。。。

• order(项目的排序)

  默认值为0，可以去正负值

  取值越大靠后，取值越小靠前

• flex-grow

  1、如果所有项目中只出现一次flex-grow，不管取值是多少，所有剩余空间都给当前标签

  2、如果所有项目中的属性出现多次flex-grow，则按照每个项目取值的数值按照分量分给各个拥有flex-grow属性的项目。

• flex-shrink(默认值为1)规则同flex-grow相似

• 设置某个项目交叉轴的对齐方式(align-self)

---

3.25

一、背景

• background-repeat（背景图片平铺方式）

  repeat	平铺(默认值)		图片尺寸小于标签的尺寸
  no-repeat	不平铺
  repeat-x	x轴方向平铺
  repeat-y	y轴方向平铺
  

• 设置背景图片的位置（background-position:x值 y值）注:x y值也可以跟center之类的

• background-img:url(“图片地址”)——背景图片

• background-size:——设置背景图片大小

  取值：如果取两个值(一个宽度一个高度)

  ​ 如果取一个值(代表的是宽度，高度是原始尺寸)

二、背景颜色

关键字:red、skyblue

• 十六进制：#+6位数字或字母+；

• rgb(1，2，3) 每个参数取值范围(0~255)

• rgba(1，2，3，4) 前三个取值范围是(0_{255)，第四个参数代表的是透明度，取值(0}1)

• 渐变色(分线性渐变、径向渐变)

  ①:线性渐变

  background-image: linear-gradient(to top,red,blue);(从下往上由红变蓝)——第一个参数是方向，第二个及以后是颜色

  ②:径向渐变

  background-image:radial-gradient()

三、表格

• 祖先元素table

• 后代元素

  子元素tr(行、是thead、tbody、tfoot的子元素)

  注：thead里的tr的子元素是th

  单元格td(是tr的子元素)

  注：如果table的子元素是tr，浏览器会自动补tbody标签

• 合并单元格

  在所需要合并的单元格标签内加上属性row行(col列)span

  设置td的距离

  cellspacing——表示td之间的距离

  celpadding——表示td之间的内边距

  注：引用重置文件将会失效

---

3.26

一、表单

适用场景：

• 登录、注册页面

• 搜索功能

• 以上情况都需要用户的输入或选择

  祖先元素：form

  <form action="#" method="GET"></form>
  

  属性：

  action提交地址

  method提交方式 取值：get/post

  get：提交信息展示到地址栏（默认值） post：隐藏提交信息

• 单行文本输入框(input)

  <input type="">
  

  type里的值适用场景：input——姓名 password——密码

  ​ 单选框radio——性别(使用性别时，可以在type后再加一个属性：name="gender"实现单选框)

  ​ submit——提交按钮

• 多选框、复选框

  type值为checkbox name值为hobby value的值为文本框的默认值

• required（放在input里的属性名 ，可以将输入框设置为必填项）

  checked（input的属性名，表示选中当前input标签(即为默认值)）——仅适用单选和多选框

二、按钮

提交按钮

<input type="submit" value="sumbit">

重置按钮

• 功能：所有form里的标签恢复默认值

普通按钮

<input type="button">

HTML5新增

• 按钮（提交按钮button——即可以当属性，也可以当标签名）

<button>提交</button>

• 颜色

<input type="color">

• 上传文件

<input type="file">

• 取值范围：

<input type="range">

• 数值类型——不能输入非数值的内容，右侧会出现上下按钮【

<input type="number">

手机号

手机号：<input type="text" maxlength="11" placeholder="请输入十一位手机号">——————maxlength表示最大长度
placeholder表示提示信息

value和placeholder的区别：1、视觉上placeholder的字体颜色较深 2、placeholder的值为文本框的内容需要修改而value的提示

三、下拉列表（select）——标签名option

select祖先元素 name属性即键名

option后代元素——可选择的项目（option的value值时select的value值）

optgroup——选项的分组(提升用户体验，label属性optgroup在页面展示的内容)

label(作为标签时)——点击label时，激活相关联的input标签。实现:label的for属性与input的id值相同，则关联成功

例子：

<select name="city" id="city">
        <optgroup label="川内">
            <option value="成都">成都</option>
        	<option value="绵阳">绵阳</option>
        	<option value="光源">广元</option>
        </optgroup>
        <optgroup label="川外">
            <option value="广东">广东</option>
        	<option value="北京">北京</option>
        </optgroup>
    </select>
                                                                                optgroup——将列表按想要的类型分组

四、textarea：多行文本输入框

  <textarea name="" id="" cols="30" rows="10">
      123
  </textarea>

cols：列数 rows：行数

五、datalist：数据列表（标签）

用户键入，联想提示

input和datalist关联