网页的布局与定位看完这篇就够了

红太狼 2022-12-11 03:20 272阅读 0赞

> 写在前面的话:"你想要的东西很贵，你想去的地方都很远，只有不停的努力，才能攒好足够的勇气，跨过人生中的每一场冒险。"每次学习都会问自己这次学习，学习到了什么？通过反问可以让自己真正的去学习东西，而不是假装很努力。希望静下心来，体会身边的美好，探索未知的世界。我是梦阳辰！期待与你相遇！

### 文章目录 ###

*  01.元素的类型
 *   *  1.块元素
     *  2.行内元素
     *  3.行内块元素
 *  02.元素类型的转换
 *  03.元素在网页的定位
 *   *  1.定位模式（position)
     *  1.1静态定位static
     *  1.2 相对定位relative
     *  1.3 绝对定位
     *  1.4 固定定位fixed
     *  2.层叠属性z-index

# 01.元素的类型 #

HTML标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。

## 1.块元素 ##

**特点：**  
1.每个块元素通常都会独自占据一整行或多整行。

2.可以对其设置宽度，高度，对齐等属性。

3.常用于网页布局和网页结构的搭建。

**常见的块元素:**

1.<h1>~<h6>
    2.<p>
    3.<table>
    4.<div>
    5.<from>
    6.<ul>
    7.<ol>
    8.<li>

## 2.行内元素 ##

特点:  
1.和其他行内元素显示在同一行，知道显示不下才换行。

2.仅靠自身字体的大小和图像的尺寸来支撑结构。

3.一般不可以设置宽度高度等属性，常用于控制页面中的文本样式。

**常见的行内元素：**

1.<strong>
    2.<b>
    3.<em>
    4.<i>
    5.<del>
    6.<s>
    7.<ins>
    8.<u>
    9.<a>
    10.<span>

## 3.行内块元素 ##

特殊的行内元素：  
可以对他们设置宽高和对齐属性。

特点：  
inline-block 元素特点：  
1、和其他元素都在一行上；  
2、元素的高度、宽度、行高以及顶和底边距都可设置。

**行内块元素:**

1.<img/>
    2.<input/>

# 02.元素类型的转换 #

网页是由多个块元素和行内元素构成的盒子排列而成的。如果希望行内元素具有块元素的特性（如设置宽高…)，或者如果希望块元素具有行内元素的特性（不独占一行）可以使用display属性对元素类型进行转换。

display常见的属性值及含义：

**inline**:此元素将显示为行内元素（行内元素默认的dispaly属性值）

**block**:此元素将显示为块元素。

**inline-block**:此元素将显示为行内块元素，可以对其设置宽高和对齐属性，但是该元素不会独占一行。

**none**:此元素将被隐藏，不显示，也不会占用页面空间，相当于元素不存在。

代码书写规范:
    display:inline-block;
    display:inline;
    display:none;
    display:block;

# 03.元素在网页的定位 #

**浮动：**  
所谓浮动，即设置浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定的位置。

定义：

选择器{ float:属性值;}

常用的属性值：

left:向左浮动
    
    right：向右浮动。
    
    none：不浮动。（默认）

如果特定的某个标签你不希望他浮动。可以对其设置清除浮动：

选择器{ clear:属性值（left,right,both);}

浮动布局虽然灵活，但是却无法对元素进行精准定位。

## 1.定位模式（position) ##

语法格式：
    选择器{ position:属性值;}

position常见的**属性值**：

**static**:静态定位（默认的定位方式）

**relative**:相对定位，相对于原文档流的位置进行定位。

**absolute**:绝对定位：相对于上一个已经定位的父元素进行定位。

**fixed**:固定定位：相对于浏览器窗口进行定位。

注意：定位模式仅仅用于定义元素以哪种方式进行定位，并不能确定元素的具体位置。  
还需要通过边偏移属性top,bottom，left或right来精确定位元素的位置。

其偏移量是相对于父元素的。

## 1.1静态定位static ##

元素的默认定位方式。各个元素在在HTML文档流中默认的位置。如果没有定义position属性，或者定义为static，它会遵循默认显示为静态位置。静态定位状态下无法通过边偏移属性（top…)来改变元素的位置。

## 1.2 相对定位relative ##

相对于标准文档流中的位置进行定位。

可以通过边偏移量来改变元素的位置，但是他在文档流中的位置仍然保留。

## 1.3 绝对定位 ##

依据最近的已经定位的（绝对，固定或相对定位）的父元素进行定位。

如果所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。

文档流中的位置释放。

## 1.4 固定定位fixed ##

它以浏览器窗口作为参照物来定义网页元素。  
他将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。

不论浏览器窗口如何滚动，也不管浏览器窗口大小如何变化，该元素始终显示在浏览器窗口的固定位置。

## 2.层叠属性z-index ##

用于图层的上下关系，上面的图层会覆盖下面的图层。

只对定位元素有效。

其取值可为：正整数，0，负整数。默认属性值为0.

**关注公众号【轻松玩编程】回复关键字“电子书”，“计算机资源”，“Java从入门到进阶”，”JavaScript教程“，“算法”，“Python学习资源”，“人工智能”等即可获取学习资源。**

> ”当坚强成为你唯一的选择，你才知道自己可以有多坚强。在你坚持不住的时候，记得告诉自己，再坚持一下。想一千次，不如去做一次。华丽的跌倒，胜过无谓的徘徊。“

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/cfe07e84716c471b97ef0abccd595771.png