• CSS的布局模式（更新中）

    前言：

    我们可以看到京东的官网上的一些例子（如下图），在同一排中能够存在多个div，这是通过布局方式（例如浮动）来实现的。

    CSS传统的布局模式：

     <1>普通流（又称之为标准流）

    解释：

    普通流布局又被称之为标准流布局，顾名思义，按照标准的布局规则进行布局

    标准布局规则：

    <1>  块元素，独占一行，按照自上而下的顺序

    <2>  行内元素，先按照自左向右的顺序排列，如果碰到父级元素的边缘则自动换行

    举例：
    1. html>
    2. <html lang="en">
    3. <head>
    4.    <meta charset="UTF-8">
    5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.    <title>Documenttitle>
    7.    <style>
    8.       .div1{
    9.          height: 200px;
    10.          width: 200px;
    11.          background-color: aqua;
    12.       }
    13.       .div2{
    14.          height: 200px;
    15.          width: 200px;
    16.          background-color: brown;
    17.       }
    18.       .div3{
    19.          height: 200px;
    20.          width: 200px;
    21.          background-color: chartreuse;
    22.       }
    23.    style>
    24. head>
    25. <body>
    26.    <div class="div1">div1div>
    27.    <div class="div2">div2div>
    28.    <div class="div3">div3div>
    29. body>
    30. html>

    普通流实现一行多个div：
    举例：
    1. html>
    2. <html lang="en">
    3. <head>
    4.    <meta charset="UTF-8">
    5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.    <title>Documenttitle>
    7.    <style>
    8.       .div1{
    9.          height: 200px;
    10.          width: 200px;
    11.          background-color: aqua;
    12.          display: inline-block;
    13.       }
    14.       .div2{
    15.          height: 200px;
    16.          width: 200px;
    17.          background-color: brown;
    18.          display: inline-block;
    19.       }
    20.       .div3{
    21.          height: 200px;
    22.          width: 200px;
    23.          background-color: chartreuse;
    24.          display: inline-block;
    25.       }
    26.    style>
    27. head>
    28. <body>
    29.    <div class="div1">div1div>
    30.    <div class="div2">div2div>
    31.    <div class="div3">div3div>
    32. body>
    33. html>

    总结：

    虽然我们可以通过普通流来实现一行多个div，但是过于麻烦而且行块内存在缝隙，并且有很多的布局无法通过标准流来实现。

    <2>浮动 float

    基础：

    解释：

    float属性用于创建浮动框，将其移动到一边，直至 左/右边缘 触及包含块或者另一个浮动框的边缘。

    浮动特性：

    所有使用floa属性的元素的display属性都会改变，不论它是一个什么样的元素，都会变成一个块级框，而不论它本生是何种元素

    用法：

    选择器{float：属性值；}

    属性值：
    属性值说明
    none默认值，不进行浮动
    left

    向左移动

    right向右移动

    inline-end

    		在最右侧

    inline-start

    		在最左侧
    举例： 
    1. html>
    2. <html lang="en">
    3. <head>
    4.    <meta charset="UTF-8">
    5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.    <title>Documenttitle>
    7.    <style>
    8.       .div1{
    9.          float: left;
    10.          height: 200px;
    11.          width: 200px;
    12.          background-color: aqua;
    13.       }
    14.       .div2{
    15.          float: right;
    16.          height: 200px;
    17.          width: 200px;
    18.          background-color: brown;
    19.       }
    20.    style>
    21. head>
    22. <body>
    23.    <div class="div1">div1div>
    24.    <div class="div2">div2div>
    25. body>
    26. html>

    浮动的脱标：

    文字解释：

    设置了浮动是元素会漂浮在标准流之上，不占用位置，浮动在上面，也称之为脱标。

    图解：

    举例：
    1. html>
    2. <html lang="en">
    3. <head>
    4.    <meta charset="UTF-8">
    5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.    <title>Documenttitle>
    7.    <style>
    8.       .div1{
    9.          float: left;
    10.          height: 200px;
    11.          width: 200px;
    12.          background-color: aqua;
    13.       }
    14.       .div2{
    15.          height: 800px;
    16.          width: 800px;
    17.          background-color: brown;
    18.       }
    19.    style>
    20. head>
    21. <body>
    22.        <div class="div1">div1div>
    23.        <div class="div2">div2div>
    24.   
    25. body>
    26. html>

    浮动的清除：

    原因：

    父级盒子在很多时候的高度不方便给出，则有可能造成 浮动的盒子影响到下方的标准流盒子。

    清除的方法：
    <1>隔墙法（额外标签）
    方法：

    在浮动标签后添加 空标签（）或者其他标签（如br）

    总结：

    优点：书写简单

    缺点：无意义标签较多导致结构化较差

    举例：
    1. html>
    2. <html lang="en">
    3. <head>
    4.    <meta charset="UTF-8">
    5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.    <title>Documenttitle>
    7.    <style>
    8.       .div1{
    9.          float: left;
    10.          height: 200px;
    11.          width: 200px;
    12.          background-color: aqua;
    13.       }
    14.    style>
    15. head>
    16. <body>
    17.    <div style="background-color: brown;">
    18.       <div class="div1">
    19.          div1
    20.       div>
    21.       <div style="clear: both">div>
    22.       <br>
    23.    div>
    24. body>
    25. html>
    <2>父级添加overflow属性
    方法：

    在父级的style内添加overflow，来解决

    属性值：
    属性值解释
    visible不裁剪溢出的内容。浏览器把溢出来的内容呈现在其内容元素的显示区域以外的地方，全部内容在浏览器的窗口是可见的。
    hidden裁剪溢出的内容。内容只显示在其容器元素区域里面，这意味着只有一部分内容在浏览器窗口里面是可见的。
    scroll类似于hidden，浏览器将对溢出的内容进行裁切，但会显示滚动条以便让用户能够看到内容部分。
    auto类似于scroll，但是浏览器只在真的发生内容溢出的时候才会显示滚动条，如果内容没有溢出则不显示滚动条
    总结：

    优点：简洁，方便

    缺点：溢出的内容无法显示出来

    举例：
    1. html>
    2. <html lang="en">
    3. <head>
    4.    <meta charset="UTF-8">
    5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.    <title>Documenttitle>
    7.    <style>
    8.       .div1{
    9.          float: left;
    10.          height: 200px;
    11.          width: 200px;
    12.          background-color: aqua;
    13.       }
    14.    style>
    15. head>
    16. <body>
    17.    <div style="background-color: brown; overflow: scroll;">
    18.       <div class="div1">
    19.          div1
    20.       div>
    21.    div>
    22. body>
    23. html>
    <3>使用after伪类：
    方法：

    使用after来代替<1>

    总结：

    优点：结构语义化

    缺点：IE6-7不支持，需要使用zoom：1

    举例：
    1. html>
    2. <html lang="en">
    3. <head>
    4.    <meta charset="UTF-8">
    5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.    <title>Documenttitle>
    7.    <style>
    8.       .div1{
    9.          float: left;
    10.          height: 200px;
    11.          width: 200px;
    12.          background-color: aqua;
    13.       }
    14.       .div2:after{
    15.          content: "";
    16.          display: block;
    17.          height: 0;
    18.          clear: both;
    19.          visibility: hidden;
    20.       }
    21.    style>
    22. head>
    23. <body>
    24.    <div class="div2" style="background-color: brown;">
    25.       <div class="div1">
    26.          div1
    27.       div>
    28.    div>
    29. body>
    30. html>
    <4>使用双伪类
    方法：

    使用before和after

    总结：

    优点：结构语义化

    缺点：IE6-7不支持，需要使用zoom：1

    举例：
    1. html>
    2. <html lang="en">
    3. <head>
    4.    <meta charset="UTF-8">
    5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.    <title>Documenttitle>
    7.    <style>
    8.       .div1{
    9.          float: left;
    10.          height: 200px;
    11.          width: 200px;
    12.          background-color: aqua;
    13.       }
    14.       .div2:before,
    15.       .div2:after{
    16.          content: "";
    17.          display: table;
    18.       }
    19.       .div2:after{
    20.          clear: both;
    21.       }
    22.    style>
    23. head>
    24. <body>
    25.    <div class="div2" style="background-color: brown;">
    26.       <div class="div1">
    27.          div1
    28.       div>
    29.    div>
    30. body>
    31. html>

    补充：

    clear的解释：

    clear属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。

    属性值：
    属性值说明

    none

    元素不会向下移动清除之前的浮动。

    left

    元素被向下移动用于清除之前的左浮动。

    right

    元素被向下移动用于清除之前的右浮动。

    both

    元素被向下移动用于清除之前的左右浮动。

    inline-start

    表示该元素向下移动以清除其包含块的起始侧上的浮动。即在某个区域的左侧浮动或右侧浮动。

    inline-end

     表示该元素向下移动以清除其包含块的末端的浮点，即在某个区域的右侧浮动或左侧浮动。

    after和before伪类的补充：

    见此文章：点击查看

    <3>定位 position

    等待更新中。。。。。

  • 相关阅读:
    VS2019 error LNK2001: 无法解析的外部符号 解决方法
    Cenots7 离线安装部署PostgreSQL
    源码漏扫工具 sonarqube 9 工具安装使用教程
    为什么软件公司很少用Python开发Web项目?
    拉格朗日粒子扩散FLEXPART模式
    函数式编程
    第1关：Hive 的 Alter Table 操作
    【算法】计数排序算法的讲解和代码演示
    剑指 Offer II 014. 字符串中的变位词
    软件架构设计(八) 基于架构的软件开发方法
  • 原文地址：https://blog.csdn.net/qq_60624992/article/details/138196636