html css布局定位相关总结_布局定位html-CSDN博客

本文链接：https://blog.csdn.net/aPigCanCRUD/article/details/106697287

前置知识:
学习页面布局和定位之前。最好先已经掌握以下两个前置内容
1 盒子模型和2 元素分类

一 CSS盒子模型

在这里插入图片描述

示例:
比如下面一段css样式

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

在这里插入图片描述

二元素分类

html元素分为3大类

1. 1 块元素

块元素会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
每个块元素都会换行
width 和 height 属性可以发挥作用
内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开”

1.2 内联元素

内联元素不会产生换行。
width 和 height 属性将不起作用。
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
水平方向的内边距、外边距以及边框会被应用而且也会把其他处于 inline 状态的盒子推开。
<a> <span>
元素转化
display:block//设置为块元素
display:inline//设置为内联元素

1.3 内联块元素

设置width 和height 属性会生效。
padding, margin, 以及border 会推开其他元素。
不会独占一行

三内容溢出

<div class="box">This box has a
   height and a width. This means that if there is too much content to be displayed within the assigned height, there
   will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>

<p>This content is outside of the box.</p>

在这里插入图片描述
如图所示。div中的元素超过了div的高度。这样就会与下面的p元素发生重合。处理溢出的方式如下：

3.1溢出的部分隐藏

如果想让溢出的内容不显示。在css中加入overflow: hidden;

.box {
  border: 1px solid #e01111;
  width: 200px;
  height: 100px;
  overflow: hidden;//溢出的处理方式
}

3.2 加滚动条

.box {
  border: 1px solid #e01111;
  width: 200px;
  height: 100px;
  overflow: scroll;//加滚动条
}

效果如下
在这里插入图片描述
或者只在x轴上加滚动条

.box {
  border: 1px solid #e01111;
  width: 100px;
  height: 100px;
  overflow-x: scroll;//在x轴上加滚动条
}

四布局

4.1 display

默认情况下，一个块级元素的内容宽度是其父元素的100%，其高度与其内容高度一致。行内元素的height width与内容一致。你无法设置行内元素的height width — 它们就那样置于块级元素的内容里。如果想控制行内元素的尺寸，为元素设置display: block; （或者，display: inline-block; inline-block 混合了inline 和 block的特性。)

4.2 float

写法如下：

在这里插入图片描述

<div class="body">
  <h1>example</h1>

  <div class="fisrt_div">
    <h2>First div</h2>
  </div>

  <div class="sceond_div">
    <h2>Second div</h2>
  </div>

  <div class="third_div">
    <h2>Third div</h2>
  </div>
  
</div>

如果想让第二个div在第一个div右边。第三个div在第二个右边。就将div元素设置成浮动。如下

float: left;

.body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}
.fisrt_div {
  width: 36%;
  height: 50px;
  background-color: rosybrown;
  float: left;//设置成float
}

.sceond_div {
  width: 30%;
  background-color: rosybrown;
  height: 50px;
   float: left;//设置成float
}

.third_div {
  width: 26%;
  height: 50px;
  background-color: rosybrown;
  float: right;//设置成float
}

浮动元素 (这个例子中的

元素)会脱离正常的文档布局流，并吸附到其父容器的左边。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。
在这里插入图片描述

如果想要位于清除被浮动元素影响的效果。加上clear:both。

/* clear: both;停止任何活动的左右浮动 */
  /* clear: left：停止任何活动的左浮动
  clear: right：停止任何活动的右浮动 */

4.3 position

4.3.1 static :默认情况下

4.3.2 relatve:相对定位

相对于该元素在正常的文档流中的位置移动它。

<div class="body">
  <h1>Positioning</h1>
  <p>I am a basic block level element.</p>
  <p class="positioned">I am a basic block level element.</p>
  <p>I am a basic block level element.</p>
</div>



.body {
  width: 500px;
  margin: 0 auto;
  border: 2px solid black;
}
p {
    background-color: rgb(207,232,220);
    border: 2px solid rgb(79,185,227);
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
   
}
positioned {
  position: relative;//设置定位属性
  background: rgba(255,84,104,.3);
  border: 2px solid rgb(255,84,104);
  top: 30px;//偏离原始位置的顶部30px;
  left: 30px;//偏离原始位置的左边30px;
}

设置后的效果如下

在这里插入图片描述

4.3.3 absolute:绝对定位

.positioned {
    position: absolute;//绝对定位属性
    background: rgba(255,84,104,.3);
    border: 2px solid rgb(255,84,104);
    top: 30px;
    left: 30px;
}

与上述的相对定位相比。就只是将positon属性改成absolute。
页面上的第三个元素浮动上来，占用了原来的元素。
绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这意味着可以创建不干扰页面上其他元素的位置的隔离的UI功能。例弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能。

在这里插入图片描述

相对定位元素时相对于它本来的位置。那绝对定位元素是想对于什么？
绝对定位元素是相对于有声明过定位属性的父元素。如果决定定位的元素的父元素没有申明过positong属性。那么参照的元素会追溯到父元素的父元素。如果最大的父元素也没有posiiton属性。那么绝对定位元素的参照依据就是浏览器窗口。像上面显示的那样。
假设我们把刚刚的.positon 元素的父元素设置position:relative。可以看到位置不一样。因为参照标准的元素变成直接的父元素。而不是浏览器窗口了。

4.3.4 fixed:固定定位

与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。

<h1>Positioning</h1>
<p>I am a basic block level element.</p>
<p class="positioned">I am a basic block level element.</p>
<p>I am a basic block level element.</p>

--------------------css样式↓

h{
  width: 500px;
}
p {
    background-color: rgb(207,232,220);
    border: 2px solid rgb(79,185,227);
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
    width: 500px;
}