Html的布局

男娘i 2022-05-27 02:23 227阅读 0赞

一、html的简介

html和css是前端的主要框架和样式的，而JavaScript主要是实现一些逻辑的或者改变原来原始的。所以在html+css要学会整体的**布局结构**，js就是如何将显示的东西绑定一些**逻辑结构**。

二、html在浏览器渲染的原理

浏览器解析的整个流程就是：**先普通流排序**，之后每个位子的大小位置等等用**盒模型来进行显示**。

**HTML的普通流**：浏览器在读取HTML源代码的时候是根据元素在代码出现的顺序读取，最终元素的呈现方式是依据元素的盒子模型来决定的。行内元素是从左到右，块状元素是从上到下。如果你不改变元素的默认样式前提下，元素在HTML的普通流中会“占用”一个位置，而“占用”位置的大小、位置则是由元素的盒子模型来决定。而Position、Float属性**会使元素脱离这个普通流是一个关键点**。也是在html布局的关键点。

**盒模型**：在HTML中元素的盒子模型分为三种：块状元素、行内元素、内嵌块级元素

三、position和float

1）position属性：static、relative、absolute、fixed、inherit

**satic**:所有元素在**默认**的情况下position属性均为static，而我们**在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right在position为static的情况下无效**。其用法为：在改变了元素的position属性后可以将元素重置为static让其**回归到页面默认的普通流中**。static属性让元素在html普通流中。

**relative**:俗称的相对定位，重点在于对**相对**理解。我们此前说过每个元素在页面的普通流中会有“**占用**”一个位置，这个位置可以理解为**默认位置**，而相对定位就是将元素**偏离**元素的**默认位置**，**但****普通流中依然保持着原有的默认位置，并没有脱离****普通流，只是视觉上发生的偏移。**

position: relative并**没有改变行内元素的Display属性，**这个概念非常重要**（注意与接下来的absolute的区别）**

**absolute**:俗称的绝对定位，绝对定位是相对而言的，应用了position: absolute的元素会循着节点树中的父（祖）元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。应用了position: absolute的元素会**脱离页面中的普通流并改变Display属性（重点）**！

块状元素在position(relative/static)的情况下width为100%，但是设置了position: absolute之后，会将width变成auto（会受到父元素的宽度影响）。

元素设置了position: absolute之后，如果没有设置top、bottom、left、right属性的话，浏览器会默认设置成auto，而auto的值则是该元素的“默认位置”。即设置position: absolute前后的offsetTop和offsetLeft属性值不变。

**fixed：**会改变行内元素的呈现模式，使display变更为**block**。会让元素脱离普通流，不占据空间。默认会覆盖到非定位元素上。

2）float的属性值有none、left、right

只有横向浮动，并没有纵向浮动；当元素应用了float属性后，将会**脱离普通流**，其容器（父）元素将得不到脱离普通流的子元素高度。会将元素的display属性变更为**block**。浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片），与应用了position的元素相比浮动元素并不会遮盖后一个元素。浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float。

浮动的框可以向左或向右移动，直到它的外边缘碰到**包含框**或**另一个浮动框**的**边框**为止。 由于浮动框不在文档的普通流中，所以**文档的普通流中的块框表现得就像浮动框不存在一样**，浮动框是脱离了文档流的，其中浮动的位置是相对于父容器或者父元素的位置来进行浮动的，其中**碰到父元素的边框，或者在父元素中有其他的浮动框的边框**，碰到父元素的其他浮动元素的边框。

3）

![70][]

四、Html的元素的分类

1）块级元素block

块级元素特点：

—>每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

—>元素的高度、宽度、行高以及顶和底边距都可设置。

—>元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

2）行内元素   内嵌元素inline

行内元素特点：

—>和其他元素都在一行上；

—>元素的高度、宽度、行高及顶部和底部边距不可设置；