当前位置：网站首页>43 盒子模型

43 盒子模型

2022-07-25 14:41:00 【hello_sunny123】

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

一.边框

在这里插入图片描述

代码

<!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>08-盒子模型之边框.html</title>
    <style> div {
       width: 300px; height: 200px; /* border-width: 边框的粗细 一般情况下都用px; */ border-width: 5px; /* border-style: 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框*/ /* border-style: 边框的样式 solid 实线边框 */ border-style: solid; /* border-style: 边框的样式 dashed 虚线边框 */ /* border-style: dashed; */ /* border-style: 边框的样式 dotted 点线边框 */ /* border-style: dotted; */ /* border-color:边框的颜色 */ border-color: pink; } </style>
</head>

<body>
    <div></div>
</body>

</html>

结果

在这里插入图片描述

二.复合写法

在这里插入图片描述

代码

<!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>08-复合写法.html</title>
    <style> div {
       width: 300px; height: 200px; /* border-width: 5px; */ /* border-style: 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框*/ /* border-style: solid; */ /* border-color: pink; */ /* 边框的复合写法 简写 */ /* border: 5px solid pink; */ /* 上边框 */ border-top: 5px solid pink; /* 下边框 */ border-bottom: 10px dashed purple; /* 左边框 */ border-left: 5px solid #000; /* 右边框 */ border-right: 5px solid red; } </style>
</head>

<body>
    <div></div>
</body>

</html>

结果

在这里插入图片描述
在这里插入图片描述

练习代码

<!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> div {
       /* 给一个200*200的盒子，设置上边框为红色，其他边框都为蓝色 */ width: 200px; height: 200px; /* border 包含了四条边 */ border: 10px solid blue; /* 层叠性 只层叠了上边框*/ border-top: 10px solid red; } </style>
</head>

<body>
    <div></div>
</body>

</html>

结果

在这里插入图片描述

三.表格细线边框

在这里插入图片描述

代码

<!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> table {
       width: 500px; height: 249px; } th {
       height: 35px; } table, td, th {
       border: 1px solid pink; /*border-collapse 合并相邻的边框 */ border-collapse: collapse; font-size: 14px; text-align: center; } </style>
</head>

<body>
    <table align="center" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="images/down.jpg" /></td>
                <td>345</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="images/up.jpg" /></td>
                <td>124</td>
                <td>675432</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="images/down.jpg" /></td>
                <td>212</td>
                <td>7654</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>东游记</td>
                <td><img src="images/down.jpg" /></td>
                <td>23</td>
                <td>75645</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>5</td>
                <td>甄嬛传</td>
                <td><img src="images/up.jpg" /></td>
                <td>121</td>
                <td>7676</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>6</td>
                <td>水浒传</td>
                <td><img src="images/down.jpg" /></td>
                <td>576576</td>
                <td>1231421</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>7</td>
                <td>三国演义</td>
                <td><img src="images/down.jpg" />></td>
                <td>234</td>
                <td>7686</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
        </tbody>
    </table>
</body>

</html>

结果

在这里插入图片描述

四.（1）边框会影响盒子的实际大小

在这里插入图片描述

代码

<!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>12-边框会影响盒子的实际大小</title>
    <style> div {
       width: 180px; height: 180px; background-color: pink; border: 10px solid red; } </style>
</head>

<body>
    <div></div>
</body>

</html>

结果

在这里插入图片描述

四.(2)内边距

在这里插入图片描述

代码

<!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>13-盒子模型之内边距</title>
    <style> div {
       width: 200px; height: 200px; background-color: pink; padding-left: 20px; padding-top: 30px; padding-right: 20px; } </style>
</head>

<body>
    <div>
        盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content
    </div>
</body>

</html>

结果

在这里插入图片描述

四.内边距padding属性：以上4种，开发中都会遇到

在这里插入图片描述

代码

<!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>14-盒子模型的内边距复合写法</title>
    <style> div {
       width: 200px; height: 200px; background-color: pink; /* padding-left: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; */ /* 内边距复合写法 */ /*后面跟一个数：代表上下左右都是5px*/ /* padding: 5px; */ /*后面跟两个数：代表上下是5px 左右是10px*/ /* padding: 5px 10px; */ /*后面跟三个数：代表上是5px 左右是10px 下是20px*/ /* padding: 5px 10px 20px; */ /*后面跟三个数：代表上是5px 右是10px* 下是20px 左是30px 顺时针*/ padding: 5px 10px 20px 30px; } </style>
</head>

<body>
    <div>
        盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content
    </div>
</body>

</html>

结果

在这里插入图片描述

五.内边距会影响盒子实际大小

在这里插入图片描述

代码：

<!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>15-内边距会影响盒子实际大小</title>
    <style> div {
       /* width: 200px; height: 200px; */ /* 为了避免撑大盒子200-20*2=160 */ width: 160px; height: 160px; background-color: pink; padding: 20px; } </style>
</head>

<body>
    <div>padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小</div>
</body>

</html>

结果

在这里插入图片描述

原网站

版权声明
本文为[hello_sunny123]所创，转载请带上原文链接，感谢
https://blog.csdn.net/hello_sunny123/article/details/118674430

边栏推荐

猜你喜欢

随机推荐