页面布局的相关内容

相对定位

开启相对定位: 不脱离文档流。

如果把当前元素设置为脱离流的话，margin实现的水平居中失效。

由于父级容器没有设置height属性，父级元素出现高度塌陷的问题。

可以让menu元素相对于当前元素设置定位，只需要为当前元素开启定位。

注意：软件开发的基本原则：低耦合。软件开发最理想的状态：零耦合。耦合度：简单来说，就是指很多值之间的关联大不大。

固定定位

固定定位: 设置当前元素相对于浏览器窗口定位。

继承

这里所说的继承，指的是 CSS 中的样式属性的继承。所谓继承，就是指当前样式属性不仅能作用于当前的元素，还能作用于所有的后代元素。

CSS 的样式属性分成两类:

• 具有可继承性的属性, 比如 color 属性

• 不具有可继承性的属性, 比如 margin 属性

层叠

在浏览器运行 HTML 页面时, 最终看到的 HTML 页面的效果, 实际上是多个样式叠加在一起的综合效果:

• 浏览器本身对 HTML 页面提供了一个默认样式

• 用户对 HTML 页面也可以定义样式(比较少见)

• 开发者对 HTML 页面也会定义样式

用户定义的样式会覆盖浏览器提供的样式, 然后开发者定义的样式会覆盖用户定义的样式。

对于我们(开发者)比较关注的:

• 浏览器提供的默认样式

• 开发者定义的样式

注意：即使是开发者定义的样式: 多重样式根据CSS选择器的优先级别, 判断最终有效的哪一个。CSS选择器的优先级别, 存在一个例外:当将某个样式属性设置为 !important, 表示该属性的级别最高。 !important吧(不建议使用)。

堆叠

堆叠: 更多指的是在开启定位的情况下(relative)在多个脱离文档流的元素中, 通过堆叠可以设置某个元素的层级高。z-index属性的值允许是负值, 但一般情况下不用。

兄弟关系的元素: 当这两个元素都脱离文档流之后。后面的元素会在前面的元素的上面。

什么是布局

所谓的布局, 就是 HTML 页面的结构。实现布局是要通过 HTML 元素和 CSS 样式结合。布局特别想盖楼的时候的设计图纸。

布局的分类

目前比较流行的布局:

• 居中布局: 水平方向居中布局、垂直方向居中布局以及水平和垂直都居中的布局

• 多列布局: 两列布局和三列布局、等分布局和等高布局(圣杯布局和双飞翼布局)

• 全屏布局：使用百分比。

从技术角度分化的话:

• CSS3 新增的弹性(flex)盒子模型

• CSS3 新增的网格(grid)布局

根据场景不同, 也可以这样划分:

• 响应式布局: 一个 HTML 既可以在 PC 电脑端浏览器打开, 也可以在移动端浏览器打开

• 移动端布局: 在手机端或平板电脑端浏览器打开

之前比较流行的布局:

• 圣杯布局(三行三列布局)

• 双飞翼布局(优化版的圣杯布局, 淘宝前端团队推出的)

• 瀑布流布局

实现水平局中

第一种实现水平居中的解决方案:

问题: 子级元素的文本内容同时也会居中对齐，为了实现子级元素的水平居中, 为父级元素设置额外的样式属性。

将实现水平方向居中效果的元素设置为inline-block:

• 多个inline-block元素之间水平方向排列

• inline-block元素可以设置width和height属性的

• inline-block元素具备inline元素的特性

text-align属性: 原本作用是设置文本内容的对齐方式，对inline-block元素同样有效

第二种实现水平居中的解决方案:

问题: 如果当前元素脱离了文档流, margin属性失效了。

为当前元素设置width属性(定宽)

使用margin属性实现水平居中

第三种实现水平居中的解决方案:

问题:为了实现子级元素的水平居中, 为父级元素设置额外的样式属性。如果使用transform属性: CSS3 新增属性。实现水平居中时:如果使用margin-left属性: 导致耦合度升高。

将子级元素设置为绝对定位(父级元素设置相对定位)，left设置50%和translateX()设置-50%实现水平居中。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ryiEVTVJ-1605718076241)(https://i.loli.net/2020/06/11/lSZmDeo5CTX7UBr.png)]

margin-left属性的值与当前元素的width属性的值有关的

translateX()函数的50%指的是当前元素宽度的50%

垂直居中

第一种实现垂直居中:

问题: 为了实现子级元素的水平居中, 为父级元素设置额外的样式属性。

将父级元素设置为table-cell，在父级元素设置vertical-align属性垂直居中。

默认作用: 设置文本内容在垂直方向的对齐方式vertical-align: middle;

table-cell值相当于HTML中的元素display: table-cell;

第二种实现垂直居中:

问题:为了实现子级元素的垂直居中, 为父级元素设置额外的样式属性。实现垂直居中时:如果使用margin-top属性: 导致耦合度升高，如果使用transform属性: CSS3 新增属性。

将子级元素设置为绝对定位(父级元素设置相对定位)，left设置50%和translateY()设置-50%实现垂直居中。

两列布局

所谓的两列布局, 并不是简单将两个元素水平排列, 而是一列是定宽的, 另一列是自适应的。

• 其中一列是定宽: 将该元素的宽度设置为固定的宽度

• 其中一列是自适应: 除了定宽之外所有的宽度都为第二列

第一种两列布局：

通过浮动和移动或遮挡实现两列布局。

第二种两列布局：

通过overflow: hidden;开启·BFC: 创建出一个完全隔离的空间。

第三种两列布局：

通过display: table;改变了父级元素的显示类型。将外层div变成table里面的元素转变为表格元素。

三列布局

所谓的三列布局, 其中两列是定宽, 另一列是自适应。划分成以下两种情况:

• 定宽+定宽+自适应: 两个定宽的列是相邻的

• 定宽+自适应+定宽: 两个定宽的列不是相邻的(自适应这一列在中间)

三列布局的第一种情况：

通过display: table;改变了父级元素的显示类型。将外层div变成table里面的元素转变为表格元素。

三列布局的第二种情况：

通过margin移动遮挡达到显示效果。改变了HTML的结构。

等分布局

第一种实现等分布局：

通过百分比等分效果实现。

第二种实现等分布局：

利用表格的单元格宽度是自动分配的:每一列的内容结构保持一致。

第一种空白间隙的等分布局：

通过border-spacing: 5px;实现。

第二种空白间隙的等分布局：

使用padding设置左右边距，再嵌套一层div抵消移动达到显示效果。

第一种实现等高布局:

通过display: table;改变了父级元素的显示类型。

第二种实现登高布局：

伪登高：使用padding-bottom: 9999px;强制拉成后使用overflow: hidden;截断多余内容。

表单

为什么说表单在 HTML 中很重要的原因:

• 表单是允许接收用户输入的信息, 其他元素仅是用来向用户展示信息。

• 在 HTML 元素中, 可以与服务端进行通信的只有表单。

目前, 在真实的 Web 应用或网站中, 有哪些是由表单完成的:

• 网站的用户注册和登录功能

• 搜索功能中的搜索框

• 写博客的发布功能

<form>元素

<form>元素: 代表表单(块级元素)作用:

• 用来接收用户输入的信息

• 与服务端进行通信(向服务端提交信息)

属性:

• action属性: 设置提交表单的服务端地址

• method属性: 设置提交表单时的请求类型；值：GET，POST。

enctype属性: 设置表单提交时的MIME类型，主要可实现文件上传。

表单可以划分两个组成部分:

• <form>元素: 表单的容器元素

表单组件元素: 才是真正用来接收用户输入的信息

• <input>元素: 输入框

• <textarea>元素: 文本域

• <select>元素: 下拉列表

<input>元素: 空元素

属性:

• type属性: 设置输入框的类型

• value属性: 设置输入框的默认值

• disabled属性: 设置输入框是否可用(只设置属性名)

• readonly属性: 设置输入框是否为只读

HTML5新增属性

• autofocus属性: 设置输入框自动获取焦点

• placeholder属性: 设置输入框的默认提示内容

用来替代value属性为用户展示提示信息，输入框类型:text: (单行)文本框，password: 密码框(显示与隐藏动态切换功能)，radio: 单选框，checkbox: 复选框，button: 按钮，submit: 提交按钮，reset: 重置按钮，file: 文件域，hidden: 隐藏域。

HTML5新增：email: 电子邮件，url: URL地址，search: 搜索框，tel: 电话框，，，，。

单选框或复选框: 定义相同的name属性值, 表示为一组，checked属性: 表示当前单选框或复选框被选中。

<input type="radio" name="like" checked>html
<input type="radio" name="like">css
<input type="radio" name="like">javascript

<input type="checkbox" name="like" checked>html
<input type="checkbox" name="like">css
<input type="checkbox" name="like">javascript

<input>元素: 按钮

• button: 普通按钮

• submit: 提交按钮(提交表单)

• reset: 重置按钮

<input type="button" value="按钮">
<button>按钮</button>
<input type="submit" value="提交">
<input type="reset" value="重置">

注意：与元素没有关系。

文件域: 一般用来实现文件上传或选择头像等功能：

• 数量设置

• 单文件选择: 默认情况

• 多文件选择: 设置multiple

类型设置: 规定选择文件的类型

• 默认: 可以选择任何类型

• accept属性: 设置选择文件的类型

<input type="file" multiple accept="video/*">

一般用来存储一些不想用户知道的数据内容, 比如用户ID

<input type="hidden">

提供了Email地址格式的验证

<input type="email">

提供了URL地址格式的样式(验证不完整)

<input type="url">

搜索框: 移动端显示(右下角按钮显示"搜索")

<input type="search">

电话框: 移动端显示(软键盘显示数字)

<input type="tel">

date: 日期控件

<input type="date">

week: 星期控件

<input type="week">

month: 月控件

<input type="month">

color: 颜色控件

<input type="color">

number: 数字控件

<input type="number">

<label>元素: 一般配合元素

作用: 为某个文本框提供文本提示内容

• 属性:for属性: 设置的值与元素的id属性值一致。

输入框的样式

input {
      /* 用来设置输入框的获取焦点时的外边框的样式 */
      outline: none;
      /* 用来设置输入框的边框 */
      border: none;
      border-bottom: .5px solid lightgray;
    }

<textarea>元素: 多行文本框

属性:

• cols: 设置文本域的可视宽度。必须是正数, 默认值为20

• rows: 设置文本域的可视高度。必须是正数

特点: 允许用户调整在HTML页面中显示区域

/* 禁止用户改变文本域的显示区域 */
resize: none;

<select>元素: 下拉列表

默认情况下, 下拉单选下拉多选：

• multiple属性: 表示多选

• size属性: 设置显示几个选项

<select>
      <option value="beijing">北京</option>
      <option value="shanghai" selected>上海</option>
      <option value="chongqing">重庆</option>
    </select>

元素: 列表项目

属性:selected: 设置当前项目被选中，分组: 将元素放在元素中。

<select multiple size="3">
      <option value="beijing">北京</option>
      <option value="shanghai" selected>上海</option>
      <option value="chongqing">重庆</option>
    </select>
    <select>
      <optgroup>
        <option value="html">html</option>
        <option value="css">css</option>
        <option value="javascript">javascript</option>
      </optgroup>
      <optgroup>
        <option value="html5">html5</option>
        <option value="css3" selected>css3</option>
        <option value="ecmascript6">ecmascript6</option>
      </optgroup>
    </select>

组合表单元素

<form action="#">
    <!-- 将表单组件元素进行分组 -->
    <fieldset>
      <!-- 为每个分组设置一个标题 -->
      <legend>19级启嘉班</legend>
      <!-- 表单组件元素 -->
      <label for="username">用户名: </label>
      <input type="text" id="username" placeholder="请输入你的用户名">
      <label for="password">密码: </label>
      <input type="password" id="password">
    </fieldset>
  </form>将表单组件元素进行分组

元素与元素配合使用

• 元素设置list属性: 值与元素的id属性值一致

• ’‘元素设置id属性

元素:

• 作用: 提供了一组列表项

与元素的区别:

• ’‘元素: 必须在该元素内部定义‘’元素

• ’‘元素: 是一个独立的列表项

允许复用的

元素: 刻度条

属性:

• value: 表示当前刻度的值(介于min和max之间的值)

• min: 设置刻度的最小边界

• max: 设置刻度的最大边界

• low: 设置刻度的最小预警值

• high: 设置刻度的最大预警值

<meter value="30" min="0" max="100" low="40" high="80"></meter>

元素: 进度条

属性:

• value: 表示当前进度的值

• max: 设置进度的最大值

<progress max="100" value="70"></progress>

元素状态伪类选择器

/* :disabled伪类表示选中不可用的元素 */
    input:disabled {
      background-color: lightsalmon;
    }

    /* :enabled伪类表示选中可用的元素 */
    input:enabled {
      background-color: magenta;
    }

    /* :checked伪类表示选中被选中的单选框或复选框 */
    input:checked {
      box-shadow: 0 0 0 3px orange;
    }

HTML5新增有关表单验证的内容:

提供一系列可用于验证的元素或类型, 比如‘’

提供一系列用于验证的属性:

• required属性: 验证是否为空

• pattern属性: 验证与指定正则表达式是否一致

• min属性: 验证是否小于最小值

• max属性: 验证是否大于最大值

• step属性: 验证是否符合步长

• minlength属性: 验证内容的长度是否小于最小长度

• maxlength属性: 验证并限制内容的长度是否大于最大长度

注意：验证是在提交表单时进行验证，验证属性一般情况需要与DOM(visibility对象)配合使用。

<form action="#">
    <input type="text" placeholder="请输入你的用户名" required>
    <input type="text" placeholder="请输入你的地址" pattern="^[a-zA-Z0-9]{6,12}$">
    <input type="password" minlength="4" maxlength="8">
    <input type="number" min="2" max="10" step="2">
    <input type="submit" value="提交">
  </form>