常规布局 浮动布局 定位布局

简单前置 

        浏览器在渲染元素时会按照其自身的外部属性对其进行排列,排列的方式就称为布局也称为文档流

        一个常规元素在常规流布局中的实际大小 = width(宽) + height(高) + padding(内边距) + border(边框) + margin(外边距) 

        元素的外部属性常用的有三种 

                block(块元素)

                inline(行内元素) 

                inline-block(行内块元素)

        block(块元素) 特点: 独占一行 宽高/内外边距/边框可以自由设置

        块元素排列规则为: 每一个块级元素独占一行 垂直进行排列

  .box1{
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 2px solid black;
    margin: 5px;
    background-color: red;
  }
  .box2{
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 2px solid black;
    margin: 5px;
    background-color: green;
  }
  .box3{
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 2px solid black;
    margin: 5px;
    background-color: blue;
  }


<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

        inline(行内元素) 特点:  不独占一行 不能为其设置宽高边框 设置内外边距结果会很奇怪(左右内外边距会生效)

        行内元素的排列规则为: 每一个行内元素都会首尾相接 如果父元素的宽度不足以放下所有子行内块元素 则进行换行

.box1{
    width: 200px;
    height: 100px;
    background-color: red;
}

<div class="box1">
  <span>我是奥特曼</span>
  <span>我是奥特曼</span>
  <span>我是奥特曼</span>
  <span>我是奥特曼</span>
  <span>我是奥特曼</span>
  <span>我是奥特曼</span>
</div>

         inline-block(行内块元素)特点: 不独占一行 宽高/内外边距/边框可以自由设置

input[type="text"]{
  width: 100px;
  height: 50px;
  padding: 5px;
  border: 5px solid black;
  margin: 5px;
}

<input type="text" placeholder="输入框1">
<input type="text" placeholder="输入框2">
<input type="text" placeholder="输入框3">
<input type="text" placeholder="输入框4">

常规流布局

        按照元素默认的外部属的效果进行布局就是常规流布局

div{
  width: 100px;
  height: 100px;
  background-color: red;
}
span{
  font-size: 20px;
  background-color: green;
}
img{
  width: 100px;
  height: 100px;
  background-color: blue;
}

<div></div>
<span>我是奥特曼</span>
<img src="./6546546.jpg" alt="">

 

浮动流

        浮动一开始是为了实现文字包裹图片效果而设计的,随着css的发展设计人员使浮动不仅仅局限于此

        元素发生浮动时会离开原本的常规流布局 重新创建一个新的布局方式 使元素可以在横向进行排列 新布局方式与常规流布局类似

        未发生浮动时 元素的排列方式

.box1{
  width: 100px;
  height: 100px;
  background-color: red;
}
.box2{
  width: 100px;
  height: 100px;
  background-color: green;
}
.box3{
  width: 100px;
  height: 100px;
  background-color: blue;
}

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

        设置浮动后各个元素的排列方式

.box1{
  width: 100px;
  height: 100px;
  background-color: red;
}
.box2{
  float: left;
  width: 100px;
  height: 100px;
  background-color: green;
}
.box3{
  float: left;
  width: 100px;
  height: 100px;
  background-color: blue;
}

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

 

        浮动后原本元素位置被其后元素位置填充

         

定位布局

        定位可以使一个元素对另一个元素进行覆盖 这就会让页面的变化更加丰富 通过position属性让元素改变位置

        尚未进行定位的元素排列关系

.box1{
  width: 100px;
  height: 100px;
  background-color: red;
}
.box2{
  width: 100px;
  height: 100px;
  background-color: green;
}
.box3{
  width: 100px;
  height: 100px;
  background-color: blue;
}

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

        进行定位后元素之间的排列关系

        列举几种常见的定位方式 

        position: static: 静态定位 ==> 元素默认的定位方式 元素设置在哪里 静态定位就在哪里

        position: sticky: 粘性定位 ==> 根据具有滚动效果的块级父元素进行定位偏移并且必须设置 top bottom left right 四属性之一 如若不进行设置则会被成相对定位

.container {
    background: #eee;
    width: 600px;
    height: 200px;
    margin: 0 auto;
    overflow-y: scroll;
}

nav {
    position: sticky;
    top: 0;
    height: 50px;
    background: #999;
    color: #fff;
    font-size: 30px;
    line-height: 50px;
}

p {
    line-height: 80px;
    font-size: 20px;
    background-color: lightgreen;
}

<div class="container">
  <nav>我是导航栏</nav>
  <p>我是内容栏1</p>
  <p>我是内容栏2</p>
  <p>我是内容栏3</p>
  <p>我是内容栏4</p>
  <p>我是内容栏5</p>
  <p>我是内容栏6</p>
  <p>我是内容栏7</p>
  <p>我是内容栏8</p>
</div>

 

        position: absolute 绝对定位 ==> 元素会脱离当前常规布局 位置会被气候的元素填充 其会根据寻找用于非静态定位的父元素进行定位偏移

.box1{
  width: 100px;
  height: 100px;
  background-color: red;
}
.box2{
  position: relative;
  width: 100px;
  height: 100px;
  background-color: green;
}
.box3{
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: blue;
}


<div class="box1"></div>
<div class="box2">
  <div class="box3"></div>
</div>

        position: relative 相对定位 ==> 元素不会脱离当前常规布局 位置不会被气候的元素填充 其会根据元素定义的起始位置 进行定位偏移

.box1{
  width: 100px;
  height: 100px;
  background-color: red;
}
.box2{
  position: relative;
  top: 50px;
  right: 50px;
  width: 100px;
  height: 100px;
  background-color: green;
}
.box3{
  width: 100px;
  height: 100px;
  background-color: blue;
}

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

 

        position: fixed: 根据可视窗口进行定位==>定位后元素仅会根据可视窗口的变化发生改变

        设置定位的元素会脱离原本的常规布局 位置会被其后的元素填充

.box1{
  width: 100px;
  height: 100px;
  background-color: red;
}
.box2{
  position: fixed;
  top: 50px;
  right: 50px;
  width: 100px;
  height: 100px;
  background-color: green;
}
.box3{
  width: 100px;
  height: 100px;
  background-color: blue;
}

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

注

        该文章仅仅是学习过程的中理解,如果存在问题,欢迎提出与讨论

参考书籍

        MDN