• CSS---div盒子模型、相对绝对位置、float浮动、清除浮动

    目录

    一、初识盒子模型

     二、div页面布局

       1.绝对定位 position：absolute

       2.相对定位position：relative

    三、浮动（重点）

       3.1标准流

       3.2浮动

       3.3浮动的特性：

       3.4 浮动元素经常和标准流父级搭配使用

       3.5 浮动布局注意点

       3.6定位

      四、清除浮动

     1.清除浮动

      2.清除浮动语法

      3.清除浮动的方法

       ①额外标签法：也称隔墙法，是W3C推荐的做法

       ②父级添加overflow属性

       ③父级添加：after伪元素

       ④父级添加双伪元素

    一、初识盒子模型

       我们的网页布局就是用CSS来摆放盒子，把盒子放到相应的位置

       IE浏览器：实际尺寸=width

       谷歌和火狐浏览器：实际尺寸=width+左右borderwidth+padding

       上面就是存在浏览器兼容问题

       border：边框

       margin：间距

       padding：填充

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>盒子模型title>
    6.     <style type="text/css">
    7.  
    8.         body{
    9.             /*让div紧挨页面边框*/
    10.             margin: 0;
    11.             padding: 0;
    12.         }
    13.         #div1{
    14.             width: 400px;
    15.             height: 400px;
    16.             background-color: greenyellow;
    17.         /*下面是边框样式    */
    18.             border-width: 4px;
    19.             border-style: solid;
    20.             border-color: blue ;
    21.         }
    22.         #div2{
    23.             width: 150px;
    24.             height: 150px;
    25.             background-color: orange;
    26.             /*居中*/
    27.             /*margin-top: 100px;*/
    28.             /*margin-left: 100px;*/
    29.             margin: 100px 100px 100px 100px;  /*顺序：上右下左*/
    30.  
    31.  
    32.             /*    padding: 填充,类似鞋盒里面的泡沫*/
    33.             padding-top: 50px;
    34.             padding-left: 50px;
    35.         }
    36.  
    37.         #div3{
    38.             width: 100px;
    39.             height: 100px;
    40.             background-color: red;
    41.             /*居中*/
    42.             /*margin-top: 50px;*/
    43.             /*margin-left: 50px;*/
    44.             /*margin: 50px 50px 50px 50px;  !*顺序：上右下左*!*/
    45.  
    46.         }
    47.     style>
    48. head>
    49. <body>
    50.       <div id="div1">
    51.  
    52.           <div id="div2">
    53.               <div id="div3"> div>
    54.           div>
    55.       div>
    56. body>
    57. html>

     二、div页面布局

       1.绝对定位 position：absolute

         把我们的页面看做是xy轴，往右是x轴，往下是y轴 

          left：100px    表示向右移动100像素

          top：100px     表示向下移动100像素

    1.         #div1{
    2.             width: 200px;
    3.             height: 50px;
    4.             background-color: #96E555;
    5.  
    6.         /*    绝对定位*/
    7.             position: absolute;
    8.             left: 100px;
    9.             top: 100px;
    10.         }

       2.相对定位position：relative

            会和 float、margin、padding等配合使用

    1.        #div2{
    2.             width: 200px;
    3.             height: 50px;
    4.             background-color: lightblue;
    5.  
    6.             /*    相对定位(相对父容器,这里相对的就说body)*/
    7.             position: relative;
    8.             /*向右浮动*/
    9.             /*float: right ;*/
    10.         /*    向左浮动*/
    11.             float: left;
    12.             /*左侧留下20px*/
    13.             margin-left: 20px;
    14.         }

    三、浮动（重点）

       3.1标准流

        标准流是最基本的布局方式

         块级元素会独占一行，从上向下顺序排列

              常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

         行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

              常用元素：span、a、i、em等

       3.2浮动

           可以让多个块级元素一行内排列显示

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

        

      3.3浮动的特性：

             1.脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标

             2.浮动的盒子不再保留原先的位置

             类似下面这种叠加的效果

          3.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

           浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

      

     

          4.浮动元素会具有行内块元素特性。

           任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性

           如果行内元素有了浮动，则不需要转换块级行内块元素就可以直接给高度和宽度

           如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，他的大小根据内容来确定

    CSS清除浮动float的三种方法小结
    pdf 0星 超过10%的资源 87KB
    下载

            浮动的盒子中间是没有缝隙的，是紧挨在一起的

            行内元素同理

      如果不加float：left; 的时候，这个粉色区域不会显示出来

     

     

    3.4 浮动元素经常和标准流父级搭配使用

        先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

     

       调整浮动盒子的时候，注意CSS权重问题！！！！！！！！

       网页制作第二准则：先设计盒子大小，再设计盒子的位置

     3.5 浮动布局注意点

    一般不给父盒子高度

          3.5.1浮动和标准流的父盒子搭配：

                   先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

         3.5.2 一个元素浮动了，理论上其余的兄弟元素也要浮动：

                 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

      3.6定位

      四、清除浮动

     1.清除浮动

         清除浮动的本质：清除浮动元素造成的影响

          如果父盒子本身有高度，则不需要清除浮动

          父盒子不一定都有高度：比如新闻报刊，每个文章的长度不一样，导致主体的高度都不一样，这样我们就没法统一高度

          一般不给父盒子高度，让子盒子撑开父盒子

       为什么需要清除浮动？

            由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流的盒子。

           类似下图现象，四个浮动的图不再占用最上面的那个div 

             由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

    CSS 实例实现清除浮动
    pdf 0星 超过10%的资源 66KB
    下载

      2.清除浮动语法

     

     

    3.清除浮动的方法

       ①额外标签法：也称隔墙法，是W3C推荐的做法

       额外标签法会在浮动元素末尾添加一个空标签，例如

    或其他标签（如
    ,将这个标签当做一个墙）

     优点：父亲会检测儿子的高度，我们不必给父亲的高度赋值；通俗易懂，书写方便

     缺点：添加许多无意义的标签，结构化较差

    要求：这个新的空标签必须是块级元素，不能是行级元素

     

       ②父级添加overflow属性

         可以给父级添加overflow属性，将其属性设置为hidden、auto、scroll

         优点：代码简洁

         缺点：无法显示益处的部分

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style type="text/css">
    7.       .box{
    8.       /*    清除浮动*/
    9.           overflow: hidden;
    10.  
    11.           width: 800px;
    12.           border: 1px solid blue;
    13.           margin: 0 auto;
    14.       }
    15.  
    16.       .damao{
    17.           float: left;
    18.           width: 300px;
    19.           height: 200px;
    20.           background-color: purple;
    21.       }
    22.       .ermao{
    23.           float: left;
    24.           width: 300px;
    25.           height: 200px;
    26.           background-color: purple;
    27.       }
    28.       .footer{
    29.           height: 200px;
    30.           background-color: black;
    31.       }
    32.     style>
    33. head>
    34. <body>
    35.     <div class="box">
    36.         <div class="damao">大毛div>
    37.         <div class="ermao">二毛div>
    38.     div>
    39.     <div class="footer">div>
    40. body>
    41. html>

     

       ③父级添加：after伪元素

          优点：没有增加标签，结构更简单

          缺点：照顾低版本的浏览器

    1.         .clearfix:after{
    2.             content:"";
    3.             /*必须转化成块状元素*/
    4.             display: block;
    5.             height: 0;
    6.             clear: both;
    7.             visibility: hidden;
    8.         }
    9.         .clearfix{
    10.             /*IE6、7 专有*/
    11.             *zoom:1;
    12.         }
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style type="text/css">
    7.         .clearfix:after{
    8.             content:"";
    9.             /*必须转化成块状元素*/
    10.             display: block;
    11.             height: 0;
    12.             clear: both;
    13.             visibility: hidden;
    14.         }
    15.         .clearfix{
    16.             /*IE6、7 专有*/
    17.             *zoom:1;
    18.         }
    19.  
    20.  
    21.       .box{
    22.  
    23.           width: 800px;
    24.           border: 1px solid blue;
    25.           margin: 0 auto;
    26.       }
    27.  
    28.       .damao{
    29.           float: left;
    30.           width: 300px;
    31.           height: 200px;
    32.           background-color: purple;
    33.       }
    34.       .ermao{
    35.           float: left;
    36.           width: 300px;
    37.           height: 200px;
    38.           background-color: purple;
    39.       }
    40.       .footer{
    41.           height: 200px;
    42.           background-color: black;
    43.       }
    44.     style>
    45. head>
    46. <body>
    47.     <div class="box clearfix">
    48.         <div class="damao">大毛div>
    49.         <div class="ermao">二毛div>
    50.     div>
    51.     <div class="footer">div>
    52. body>
    53. html>

       ④父级添加双伪元素

       

    1.         .clearfix:before,.clearfix:after{
    2.             content:"";
    3.             display: table;
    4.         }
    5.         .clearfix:after{
    6.             clear: both;
    7.         }
    8.         .clearfix{
    9.             /*IE6、7 专有*/
    10.             *zoom:1;
    11.        }
    1.     <div class="box clearfix">
    2.         <div class="damao">大毛div>
    3.         <div class="ermao">二毛div>
    4.     div>
    5.     <div class="footer">div>

  • 相关阅读:
    Using LDAP to authenticate users
    正则表达式之联系方式校验（手机号+固号）
    昆仑芯 AI 加速卡 R200 与龙蜥操作系统完成产品兼容认证
    四轴飞行器的电池研究（Matlab&Simulink仿真）
    除了OpenAI ChatGPT ！还有这9个不可错过的中文AI工具，甚至能平替
    阿里P8架构师进阶心得：分布式数据库架构MyCat学习笔记送给你
    vue3.2新功能
    尚医通（一）
    项目进展（七）-焊接ADS1285及其外围电路，学习芯片的SPI部分
    SQL语句大全--SQL
  • 原文地址：https://blog.csdn.net/weixin_51351637/article/details/126079106