JAVA程序员笔记（第二阶段：前端）第3篇——盒子模型、浮动

最新推荐文章于 2024-05-07 17:09:43 发布

山麓牧云

最新推荐文章于 2024-05-07 17:09:43 发布

阅读量397

点赞数

本文链接：https://blog.csdn.net/Muyun5202/article/details/120537635

版权

前端同时被 3 个专栏收录

10 篇文章 1 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

之前我们提到过，盒子模型的概念
用idea打开一个之前的网页，按下F12
在这里插入图片描述
点击图标，然后移入需要查询的地方，左键点击然后往下拉，会看到如图的盒子模型

其中
蓝色部分为我们设置的宽高
padding为内边距
border为边框
margin为 外边距
各自有其对应的作用

内边距 padding

通过设置内边距，控制盒子内容（蓝色区域）与盒子边界的距离

<style>
    #app{
      width: 500px;
      height: 300px;
      background: deepskyblue;

      padding: 10px;
      padding: 5px 10px;/*上下5  左右10 */

      padding: 2px 4px 6px 8px;  /*顺时针设置*/

      padding: 1px 2px 3px;/*上右左    左=右*/

    }

  </style>

边框 border

<style>
    #app{
      width: 300px;
      height: 200px;
      padding: 10px;
      background: royalblue;

      border-top-color: #000;
      border-top-style: solid;
      border-top-width: 5px;

    /*border-bottom: 5px dashed green; */
      /*border: 10px dotted blue; */
      border : 5px solid red;
      
      border-radius: 5px 10px 50px 100px; /*弧度*/
        
    }

  </style>

外边距 margin

外边距控制着两个盒子模型是否接近，排除重合遮挡和后面的浮动以及绝对定位。
通俗的来说，外边距相当于这个盒子的“气场”让其他盒子保持距离。

外边界——上下排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #app {

            width: 300px;
            height:200px;
            padding: 10px;
            background: red;
            margin: 10px;

        }

        #ttt {
            width: 200px;
            height: 100px;
            background: blue;
            margin: 25px;
        }

    </style>
</head>
<body>


<div id="app"></div>


<div id="ttt"></div>


</body>
</html>

外边界——盒子嵌套

顾名思义，是一个便签中套了另一个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #app {

            width: 300px;
            height:200px;
            /*padding: 10px;*/
            background: red;
            margin: 10px 0;
            /* 解决 margin-top 问题 */
            /*overflow: hidden;*/
            /*border:1px solid red;*/

        }

        #ttt {
            width: 200px;
            height: 100px;
            background: blue;
            margin: 25px;
        }

    </style>
</head>
<body>

<div id="app">
    <div id="ttt"></div>
</div>

</body>
</html>

外边界——行内块

正常情况下，一个div会独自占网页的一整行，不管它外边距多少，想要让两个div在同一行进行操作，需要将后面的div，做成行内块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .test {
            font-size: 0 ;
        }

        #app {
            display: inline-block;
            width: 300px;
            height:200px;
            background: red;
            margin-right: 10px;
        }

        #ttt {
            display: inline-block;
            width: 200px;
            height: 100px;
            background: blue;
            margin-left: -25px;
        }

    </style>
</head>
<body>

<div class="test">
<div id="app"></div>

<div id="ttt"></div>
</div>

</body>
</html>

浮动 float

浮动的定义比较抽象，因为div是独占一行的。除了套盒子，如何在一行显示多个div元素呢？那就是浮动。
我们可以将其理解为，我们把某个元素给解锁了，让他漂浮在水面上，称为浮动：“浮动”
具体文字描述：
转自博主：杨元
传送门

案例，需要大家自己动手调试，方便自己理解：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        * {
            padding:0 ;
            margin: 0 ;
        }

        p {
            height: 30px;
        }

        .p1 {
            background: #000 ;
            /*
                浮动会让元素脱离正常的文档流，浮动会让独占一行的块宽度消失，在使用的时候，必须设置宽度
                如果的浮动的是行内元素、会自动变成 块
            */
            float: left;
            width: 100px;
            margin:0 10px;
        }
        .p2 {
            background: #ce1717;
            width: 100px;
            float: left ;
        }
        .p3 {
            background: #15d73f;
            width: 100px;
            float: right;
        }
        .p4 {
             background: #1a50f5;
             width: 100px;
             float: left ;
         }
        .p5 {
            background: #f5b71d;
            width: 100px;
            float: right;
        }
        .p6 {
            background: #c419e8;
            width: 100px;
            float: right;
        }
        .p7 {
            background: #10dec7;
            width: 100px;
            float: right;
        }

        #app {
            width: 300px;
            height:200px;
            background: red;
            /*margin-top:30px;*/
            clear: both;
        }

    </style>
</head>
<body>

  <p class="p1"></p>
  <p class="p2"></p>
  <p class="p3"></p>
  <p class="p4"></p>
  <p class="p5"></p>
  <p class="p6"></p>
  <p class="p7"></p>

  <div id="app"></div>


</body>
</html>

小案例

利用浮动，制作网页的导航栏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .header {
            height: 40px;
            background-color: #0C0C0C;
            min-width: 1080px; /* 解决缩小产生空白背景问题 */
        }

        .nav {
            width: 1080px;
            height:100%;
            margin: 0 auto ;
        }

        .nav ul {
            list-style: none;
        }

        .nav a {
            text-decoration: none;
            color: #fff;
            font-size: 14px;
        }

        .nav li {
            width: 105px;
            float: left ;
            text-align: center;
            line-height: 40px;
            height:40px;
        }

        .nav .current {
            background-color: #ED145B;
        }

        .nav .lf {
            float: right;
        }

        .nav .lf img {
            width: 30px;
            margin:7px 5px 0px;
            float:left;
        }

        .nav .lf img.last {
            width: 28px;

        }

    </style>
</head>
<body>


<div class="header">

    <div class="nav">
        <ul>
            <li class="current"><a href="">首页</a></li>
            <li><a href="">极速免税店</a></li>
            <li><a href="">母婴特卖</a></li>
            <li><a href="">美妆商城</a></li>
            <li><a href="">国际轻奢</a></li>
            <li><a href="">服装运动</a></li>
            <li><a href="">鞋包配饰</a></li>
        </ul>

        <div class="lf">
            <img src="./images/真.png" alt="">
            <img class="last" src="./images/车.png" alt="">
        </div>
        
    </div>
  </div>
</body>
</html>

山麓牧云

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVA程序员笔记（第二阶段：前端）第3篇——盒子模型、浮动

之前我们提到过，盒子模型的概念用idea打开一个之前的网页，按下F12点击图标，然后移入需要查询的地方，左键点击然后往下拉，会看到如图的盒子模型其中蓝色部分为我们设置的宽高padding为内边距border为边框margin为外边距各自有其对应的作用内边距 padding通过设置内边距，控制盒子内容（蓝色区域）与盒子边界的距离<style> #app{ width: 500px; height: 300px; back
复制链接

扫一扫