定位布局、浮动布局、flex布局

最新推荐文章于 2024-09-11 08:17:43 发布

挽风莬

最新推荐文章于 2024-09-11 08:17:43 发布

阅读量929

点赞数 2

文章标签： html5 css html

本文链接：https://blog.csdn.net/m0_60499747/article/details/120308961

版权

本文介绍了网页布局的三种主要技术：默认文档流、浮动布局、定位布局和flex布局。浮动布局用于改变元素默认排列，定位布局通过position属性实现元素相对定位。flex布局简化了复杂布局的实现，但对旧版浏览器支持有限。文章详细阐述了各种布局的特点、用法及主要属性。

摘要由CSDN通过智能技术生成

布局

1.默认文档流：默认文档流就是对页面布局不加任何修饰，元素自动的布局方式

特点：1）元素在页面中的显示顺序与元素在代码中出现的顺序是一致的。

2）块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度所决定。

3）行内元素与其他元素共享一行空间，宽高由其内容所决定。

2.浮动布局

因为元素有默认的排列方式，想要改变这种布局，使用浮动布局

1)float属性取值(如果一个元素添加folat属性，那么这个元素就会成为一个浮动元素)

left 向左浮动元素

right 向右浮动元素

none 【默认值】，不浮动

inherit 浮动方式继承父元素

2）特点： 1）当一个元素是浮动元素的时候，它会失去对父元素的支撑。脱离了文档流

清除浮动

1.给父元素添加overflow：hidden；

2.给使用浮动的元素使用伪元素: ：：after 设置一个空元素，然后使用clear:both

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动布局</title>
    <style>
  .one,.two,.three{
      width:300px;
      height: 100px;
      float: left;
   }
  .one{
      background-color: aqua;
  }

  .two{
      background-color: blanchedalmond;
  }
  .three{
      background-color: blueviolet;
  }
  body{
      margin: 0;
  }

  /*.main{
      overflow: hidden;
  }*/

  .main::after{
      display: block;
      content: '';
      clear: both;
  }
    </style>
</head>
<body>
    <div class="main">
    <div  class="one"></div>
    <div  class="two"></div>