42.CSS之盒子模型和浮动

CSS之盒子模型和浮动

【一】盒子模型

1.概念

  • 是指网页设计中，用于描述和布局元素的一种模型

2.组成部分

  • 内容区域
    • 盒子的实际内容，如文本、图像
  • 内边距
    • 内容区域与边框之间的空间，用于控制内容与边框之间的距离
  • 边框
    • 围绕内容区域与内边距的线条，用于给元素添加外观和样式
  • 外边距
    • 边框与其他元素之间的空间，用于控制元素与周围元素之间的距离

3.格式

/*设置外容距边框距离*/
margin: 5px 10px 15px 20px; 	/*上 右 下 左*/
margin: 5px 10px 15px;			/*上 左右 下*/
margin: 5px 10px; 				/*上下 左右 */
margin: 5px; 					/*上下左右*/
margin: 0 auto; 				/* 居中显示 */
/*设置内容距边框距离*/
padding:  5px 10px 15px 20px;;

4.示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 20px 15px 10px 5px
        }
        #d1 {
            width: 200px;
            height: 200px;
            background-color: springgreen;
            border: 10px dashed firebrick;
            margin: 5px 10px 15px 20px;
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: springgreen;
            border: 10px dashed firebrick;
            /*居中显示*/
            margin: 0 auto;
            /*设置内容距边框距离*/
            padding: 10px 10px 10px 10px;
        }
    </style>
</head>
<body>
<div id="d1">第一个div标签</div>
<div id="d2">第二个div标签</div>
</body>
</html>

【二】浮动

1）作用

  • 是所有网站页面布局必备的，可将块级标签浮动起来脱离正常的文档流
  • 可将多个块级标签在一行显示
  • 脱离页面，浮动字页面之上
  • 只有涉及到页面的布局，一般都是用浮动提前规划好

2）问题演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            border: 10px solid red
        }

        #d2 {
            height: 200px;
            width: 200px;background-color: lime;
            /*向左浮动*/
            float: left;
        }
        #d3{
            height: 200px;
            width: 200px;background-color: deepskyblue;
            /*向左浮动*/
            float: right;
        }
    </style>
</head>
<body>

<div id="d1">第一个div标签
    <div id="d2">内部第一个div标签</div>
    <div id="d3">内部第二个div标签</div>
</div>

</body>
</html>

3）解决方法

1.方式一

  • 在内部在创建一个子标签，通过固定高度撑起外边框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            border: 10px solid red
        }

        #d2 {
            height: 200px;
            width: 200px;
            background-color: lime;
            /*向左浮动*/
            float: left;
        }

        #d3 {
            height: 200px;
            width: 200px;
            background-color: deepskyblue;
            /*向左浮动*/
            float: right;
        }
        #d4{
            /* 固定高度 */
            height: 200px
        }
    </style>
</head>
<body>

<div id="d1">
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
</div>

</body>
</html>

2.方式二

  • 写div，然后添加clear属性，避免去查找长度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            border: 10px solid red
        }
        #d2 {
            height: 200px;
            width: 200px;
            background-color: lime;
            /*向左浮动*/
            float: left;
        }
        #d3 {
            height: 200px;
            width: 200px;
            background-color: deepskyblue;
            /*向左浮动*/
            float: right;
        }
        #d4 {
            /* 该标签的左边(地面和空中)不能有浮动元素 */
            clear: left;
            /* 该标签的左右两边(地面和空中)不能有浮动元素 */
            clear: both;
        }
    </style>
</head>
<body>

<div id="d1">
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
</div>

</body>
</html>

3.方式三（万能公式）

.clearfix:after {
      content: '';
      clear: both;
      display: block;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            border: 10px solid red
        }
        #d2 {
            height: 200px;
            width: 200px;
            background-color: lime;
            /*向左浮动*/
            float: left;
        }
        #d3 {
            height: 200px;
            width: 200px;
            background-color: deepskyblue;
            /*向左浮动*/
            float: right;
        }
        .clearfix:after {
            content: '';
            clear: both;
            display: block;
        }
    </style>
</head>
<body>

<div id="d1" class="clearfix">
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
</div>

</body>
</html>

【三】溢出属性

1）问题演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1 {
            height: 100px;
            width: 100px;
            border: 5px solid red;
        }
    </style>
</head>
<body>
<p id="p1">
    起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。</p>
<p>起笔描绘山水意，</p>
<p>云淡风轻如诗情。</p>
<p>倾情抒写欢乐悲，</p>
<p>文字流露真我心。</p>
</body>
</html>

2）解决代码的格式

/*默认溢出可见*/
overflow: visible;
/*溢出不可见*/
overflow: hidden;
/*隐藏且可滚动查看*/
overflow: scroll;
/*自动调整*/
overflow: auto;

3）解决演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1 {
            height: 200px;
            width: 200px;
            border: 5px solid red;
            /*默认溢出可见*/
            /*overflow: visible;*/
            /*溢出不可见*/
            /*overflow: hidden;*/
            /*隐藏且可滚动查看*/
            /*overflow: scroll;*/
            /*自动调整*/
            overflow: auto;
        }
    </style>
</head>
<body>
<p id="p1">
    起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。</p>
<p>起笔描绘山水意，</p>
<p>云淡风轻如诗情。</p>
<p>倾情抒写欢乐悲，</p>
<p>文字流露真我心。</p>
</body>
</html>

4）头像示例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0
        }
        #d1 {
            height: 150px;
            width: 150px;
            border: 2px solid deeppink;
            background-image: url("preview.gif");
            background-size: contain;
            border-radius: 50%;
            overflow: auto;
        }
    </style>
</head>
<body>

<div id="d1"></div>

</body>
</html>

【四】定位

1）介绍

  • 相对定位（Relative Positioning）

    • 相对于在正常文档流中的位置进行定位（相对于标签原来的位置做定位）
    • 相对位置会影响元素原本在文档流中的位置，但不影响其他元素的布局

  • 绝对位置（Absolute Positioning）

    • 相对于最近的非静态定位的父元素进行定位（相对于已经定位过的父标签做定位）
    • 绝对位置会脱离文档流，不会占据原本的空间，且不影响其他元素的布局，常用于创建浮动效果或覆盖其他元素

  • 固定位置（Fixed Positioning）

    • 会相对于浏览器窗口进行定位
    • 固定位置的元素会一直保持在屏幕上的固定位置，不会受到页面滚动的影响

  • 静态定位

    • 所有标签默认都是静态的static，无法改变

2）演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1-1 {
            height: 100px;
            width: 100px;
            background-color: red;
            /* 相较于原来的位置从左向右移动50px 如果是负数，方向则相反*/
            left: 200px;
            /* 相较于原来的位置从上向下移动50px 如果是负数 方向则相反 */
            top: 200px;
            /*相对位置*/
            position: relative;
        }
        #d2-1 {
            height: 100px;
            width: 100px;
            background-color: darkorange ;
            /* 相较于原来的位置从左向右移动50px 如果是负数，方向则相反*/
            left: 200px;
            /* 相较于原来的位置从上向下移动50px 如果是负数 方向则相反 */
            top: 200px;
            /*绝对位置*/
            position: absolute;
        }
        #d3-1 {
            height: 100px;
            width: 100px;
            background-color: lime;
            border: 5px solid red;
            bottom: 50px;
            right: 50px;
            /*固定位置*/
            position: fixed;
        }
    </style>
</head>
<body>

<div id="d1-1"></div>
<div id="d2-1"></div>
<div id="d3-1"></div>

</body>
</html>

【五】z-index模态框

1）引入

  • 动态弹出的分成界面，就是模态框

2）演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{margin: 0}
        .middle{
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(44,150,99,0.5);
            z-index: 99;
        }
        .outer{
            position: fixed;
            height: 400px;
            width: 600px;
            left: 50%;
            top: 50%;
            background-color: white;
            z-index: 100;
            margin-left: -200px;
            margin-top: -250px;

        }
    </style>
</head>
<body>

<div>底层</div>
<div class="middle">中层</div>
<div class="outer">外层
    <table>
        <thead>
        <tr>
            <th colspan="2" align="center">注册登录页面</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td><input type="submit"></td>
        </tr>
        </tbody>
    </table>
</div>

</body>
</html>

【六】透明度

1）引入

  • 不单单可以修改颜色的透明度还可以修改字体的透明度
  • rgba 只能修改颜色的透明度
  • opacity 不只是能修改颜色还能修改字体的透明度

2）示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1 {
            background-color: rgba(150, 200, 100, 0.4);
        }

        #p2 {
            background-color: rgb(150, 200, 100);
            opacity: 0.4;
        }

    </style>
</head>
<body>
<p id="p1">001</p>
<p id="p2">002</p>
</body>
</html>
posted on 2024-06-12 19:59  晓雾-Mist  阅读(37)  评论(0)    收藏  举报

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3