CSS入门三、盒子模型

已于 2023-04-21 16:38:18 修改
阅读量878 收藏 2
点赞数
分类专栏： 大前端 文章标签： css html 前端
于 2023-01-11 15:19:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyou123456789/article/details/128645397
版权
本文详细介绍了CSS中的盒子模型，包括网页布局本质、边框（边框样式、复合写法、合并）以及内边距和外边距的影响。通过实例展示了如何设置和调整这些属性来实现不同的布局效果，并提到了边距合并的问题及解决方案。此外，还讨论了清除内外边距在网页布局中的重要性。
摘要由CSDN通过智能技术生成

零、文章目录

CSS入门三、盒子模型

1、网页布局的本质

网页布局过程：

  1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。

  2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。

  3. 往盒子里面装内容.

网页布局的核心本质： 就是利用 CSS 摆盒子。

2、盒子模型组成

  • 盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
  • CSS盒子包括：边框、外边距、内边距和实际内容。

image-20221224152733919

3、边框border

（1）边框
  • border属性允许你指定一个元素边框的样式和颜色。
  • 边框有三部分组成：边框宽度(粗细)、边框样式、边框颜色。
border : border-width || border-style || border-color

image-20221224152937378

  • 边框样式 border-style 可以设置如下值：

    • none：没有边框即忽略所有边框的宽度（默认值）
    • solid：边框为单实线(最为常用的)
    • dashed：边框为虚线
    • dotted：边框为点线

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>边框</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            /* border-width 边框的粗细  一般情况下都用 px */
            border-width: 5px;
            /* border-style 边框的样式  solid 实线边框   dashed 虚线边框  dotted 点线边框*/
            border-style: solid;
            /* border-style: dashed; */
            /* border-style: dotted; */
            /* border-color 边框的颜色  */
            border-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

image-20221224190952889

（2）边框复合写法
  • 边框复合写法：没有顺序要求
border: 1px solid red;
  • 边框分开写法：
border-top: 1px solid red; /* 只设定上边框， 其余同理 */

边框复合写法案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>边框复合写法</title>
    <style>
     div {
            width: 300px;
            height: 200px;
            /* border-width: 5px;
            border-style: solid;
            border-color: pink; */
            /* 边框的复合写法 简写:  */
            /* border: 5px solid pink; */
            /* 上边框 */
            border-top: 5px solid pink;
            /* 下边框 */
            border-bottom: 10px dashed purple;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

image-20221224191814209

边框分开写案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>边框分开写</title>
    <style>
        /* 请给一个 200*200 的盒子，设置上边框为红色，其余边框为蓝色 */
        div {
            width: 200px;
            height: 200px;
            /* border-top: 1px solid red;
            border-bottom: 1px solid blue;
            border-left: 1px solid blue;
            border-right: 1px solid blue; */
            /* border包含四条边 */
            border: 1px solid blue;
            /* 层叠性 只是层叠了 上边框啊 */
            border-top: 1px solid red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

image-20221224192042517

（3）边框合并border-collapse
  • border-collapse 属性控制绘制表格边框的方式。它控制相邻单元格的边框。
  • border-collapse: collapse; 表示相邻边框合并在一起。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>边框合并</title>
    <style>
        table {
            width: 500px;
            height: 249px;
        }
        th {
            height: 35px;
        }
        table,
        td, th {
            border: 1px solid pink;
            /* 合并相邻的边框 */
            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="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>

        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
    </tbody>           
    </table>
</body>
</html>

image-20221225153202962

（4）边框影响盒子大小
  • 因此我们有两种方案解决：

    • 测量盒子大小的时候不量边框。

    • 如果测量的时候包含了边框，则需要 width/height 减去边框宽度。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>边框影响盒子大小</title>
    <style>
        /* 我们需要一个200*200的盒子, 但是这个盒子有10像素的红色边框 */
        div {
            width: 180px;
            height: 180px;
            background-color: pink;
            border: 10px solid red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

image-20230110182044282

4、内边距padding

（1）内边距
  • padding 属性用于设置内边距，即边框与内容之间的距离。

image-20221225155234202

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内边距</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding-left: 20px;
            padding-top: 30px;
        }
    </style>
</head>
<body>
    <div>
        盒子内容是content盒子内容是content盒子内容是content盒子内容是content
    </div>
</body>
</html>

image-20221225155619458

（2）内边距复合写法
  • padding可以有一到四个值。顺序是上右下左顺时针。

image-20221225155320780

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内边距复合写法</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* padding-left: 5px;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-right: 5px; */
            /* 内边距复合写法(简写) */
            /* padding: 5px; */
            /* padding: 5px 10px; */
            /* padding: 5px 10px 20px; */
            padding: 5px 10px 20px 30px;
        }
    </style>
</head>
<body>
    <div>
        盒子内容是content盒子内容是content盒子内容是content盒子内容是content
    </div>
</body>
</html>

image-20221225160718730

（3）内边距影响盒子大小
  • 如果盒子已经有了宽度和高度，此时padding会撑大盒子。**解决方案：**如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。
  • 如何盒子没有指定宽度和高度，此时padding不会撑开盒子大小。父元素指定宽高，子元素不指定，此时padding不会撑开盒子大小。

内边距影响盒子大小案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内边距影响盒子大小</title>
    <style>
        div {
            width: 160px;
            height: 160px;
            background-color: pink;
            padding: 20px;
        }
    </style>
</head>

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

</body>

</html>

image-20221225161554409

内边距不影响盒子大小案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内边距不影响盒子大小</title>
    <style>
        h1 {
            /* width: 100%; */
            height: 200px;
            background-color: pink;
            padding: 30px;
        }
        
        div {
            width: 300px;
            height: 100px;
            background-color: purple;
        }
        
        div p {
            padding: 30px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <h1></h1>
    <div>
        <p></p>
    </div>
</body>

</html>

image-20221225203104904

（4）综合案例–新浪导航
  • padding内边距可以撑开盒子，我们可以做非常巧妙的运用。宽高需要重新进行计算。
  • 因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度了，直接给padding最合适。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新浪导航</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }
        .nav a {
            /* a属于行内元素 此时必须要转换 行内块元素 */
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">三个字</a>
    </div>
</body>
</html>

image-20221225163329131

5、外边距margin

（1）外边距
  • margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
  • margin 简写方式代表的意义跟 padding 完全一致。

image-20221225210004670

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外边距</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* .one {
          margin-bottom: 20px;
      } */
        
        .two {
            /* margin-top: 20px; */
            /* margin: 30px; */
            margin: 30px 50px;
        }
    </style>
</head>

<body>
    <div class="one">1</div>
    <div class="two">2</div>
</body>

</html>

image-20221226091921028

（2）块级盒子水平居中

  • 必须满足两个条件：

    • 盒子必须指定了宽度（width）。

    • 盒子左右的外边距都设置为 auto 。

.header{ width:960px; margin:0 auto;}

  • 常见的写法，以下三种都可以：

    • margin-left: auto; margin-right: auto;

    • margin: auto;

    • margin: 0 auto;

  • 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>块级盒子水平居中</title>
    <style>
      .header {
          width: 900px;
          height: 200px;
          background-color: pink;
          margin: 100px auto;
      }
    </style>
</head>
<body>
    <div class="header"></div>
</body>
</html>

image-20221226093135121

行内元素或者行内块元素水平居中案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行内元素/行内块元素水平居中对齐</title>
    <style>
      .header {
          width: 900px;
          height: 200px;
          background-color: pink;
          margin: 100px auto;
          text-align: center;
      }
      /* 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可 */
    </style>
</head>
<body>
    <div class="header">
        <span>里面的文字</span>
    </div>
    <div class="header">
        <img src="down.jpg" alt="">
    </div>
</body>
</html>

image-20221226093334362

（3）外边距合并

  • 使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

  • 主要有两种情况:

    1. 相邻块元素垂直外边距的合并
    2. 嵌套块元素垂直外边距的塌陷，浮动的盒子不会此问题。

  • 相邻块元素垂直外边距的合并

​ 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。**解决方案：**尽量只给一个盒子添加 margin 值。

image-20221226094729144

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相邻块级元素垂直外边距合并</title>
    <style>
        .damao, .ermao {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .damao {
            margin-bottom: 100px;
        }
        .ermao {
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <div class="damao">大毛</div>
    <div class="ermao">二毛</div>
</body>
</html>

这中间的距离只有200px

image-20221226100407276

  • 嵌套块元素垂直外边距的塌陷

​ 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。**解决方案：**① 可以为父元素定义上边框。② 可以为父元素定义上内边距。③ 可以为父元素添加 overflow:hidden。

image-20221226101841634

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>嵌套块级元素垂直外边距塌陷</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /* border: 1px solid red; */
            /* border: 1px solid transparent; */
            /* padding: 1px; */
            overflow: hidden;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

image-20221226102254264

6、清除内外边距

  • 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
  • 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除内外边距</title>
    <style>
        /* 这句话也是我们css 的第一行代码 */
       * {
           margin: 0;
           padding: 0;
       }
       span {
           background-color: pink;
           margin: 20px;
       }
    </style>
</head>
<body>
   123
   <ul>
       <li>abcd</li>
   </ul>
   <span>行内元素尽量只设置左右的内外边距</span>
</body>
</html>

image-20221226115402777

7、综合案例

（1）产品模块
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>综合案例-产品模块</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #f5f5f5;
        }
        
        a {
            color: #333;
            text-decoration: none;
        }
        
        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            /* 让块级的盒子水平居中对齐 */
            margin: 100px auto;
        }
        
        .box img {
            /* 图片的宽度和父亲一样宽 */
            width: 100%;
        }
        
        .review {
            height: 70px;
            font-size: 14px;
            /* 因为这个段落没有 width属性 所有 padding不会撑开盒子的宽度 */
            padding: 0 28px;
            margin-top: 30px;
        }
        
        .appraise {
            font-size: 12px;
            color: #b0b0b0;
            margin-top: 20px;
            padding: 0 28px;
        }
        
        .info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }
        
        .info h4 {
            display: inline-block;
            font-weight: 400;
        }
        
        .info span {
            color: #ff6700;
        }
        
        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="images/img.jpg" alt="">
        <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
        <div class="appraise">来自于 117384232 的评价</div>
        <div class="info">
            <h4> <a href="#">Redmi AirDots真无线蓝...</a></h4>
            <em>|</em>
            <span> 99.9元</span>
        </div>
    </div>
</body>

</html>

image-20230110192637561

（2）快报模块
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新闻快报模块</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            /* 去掉li前面的小圆点 */
            list-style: none;
        }
        
        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        
        .box h3 {
            height: 32px;
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            padding-left: 15px;
        }
        
        .box ul li a {
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }
        
        .box ul li a:hover {
            text-decoration: underline;
        }
        
        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
        }
        
        .box ul {
            margin-top: 7px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>
</body>

</html>

image-20221228111631655

李宥小哥
关注
专栏目录
CSS 盒子模型
12-14
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际...
CSS从入门到精通——盒模型
SOLDIER_ON的博客
11-11 2393
盒模型(Box Model)，是CSS中重要的基础之一。浏览器在对文档进行布局时，会根据CSS盒模型将所有元素，表示为一个矩形。换句话说，每个元素都是一个盒子。盒模型描述了元素所占空间的内容。每个盒子有四个边：外边距(Margin)、边框(Border)、内边距(Padding)和内容(Content)。图片表示盒模型，如下：基础实例内容区域包含盒子的内容，显示文本和图像。一般使用width和height指定大小。内边距(Padding) 是指内容周围的区域，内边距默认是透明的。
三、CSS基础语法（盒子模型）
baipenggui_bo
09-05 373
1. 盒子模型（Box Model） 1.1 什么是盒子模型？ 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 介绍： ○ 盒子模型有元素的内容、边框（boder）、内边距（padding）、和外边距（margin）组成。 ○ 盒子里面的文字和图片等元素是 内容区域。 ○ 盒子的厚度，我们称为盒子的边距。 ○ 盒子内容与边框的距离是内边距（类似单元格的cellpaddin...
CSS(七)(弹性盒子)
最新发布
2401_87196044的博客
09-18 318
一、flex布局原理flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
CSS从入门到精通——背景样式（续）
qq_42212132的博客
07-31 1547
显示效果如图： 本例中，设置right top代表放置在元素内边距区的右上角。 对于具体位置，大家可以使用如下关键字的组合： 属性值 top left top center top right center left center center center right bottom left bottom center bottom right ...
CSS入门到精通——表格样式
热门推荐
weixin_54327001的博客
12-15 1万+
第1关：表格边框 任务描述 本关任务：在本关中，我们将学习如何使用CSS设置表格样式，使表格更好看。本关任务完成之后的效果图(index.html)如下： 相关知识 为了完成本关任务，请大家认真阅读以下内容。 在之前的HTML教程中，我们学习了各类基本表格。 例如，下面网页代码的表格： HTML 页面： <body> <table width="400"> <!-- 表标题 --> <caption>通讯录</capti
CSS学习笔记
YuKing_HONG的博客
10-17 1487
个人学习PINK老师课程的笔记。个人笔记写得不好，敬请见谅，如果有问题没关系，那是正常的。记错了欢迎指出了。
前端学习2——CSS3
gyfghh的博客
08-22 591
div {}描述符值描述name必需。定义字体名称。srcURL必需。定义字体文件的 URL。可选。定义应如何拉伸字体。默认值是 “normal”。font-style可选。定义字体的样式。默认值是 “normal”。可选。定义字体的粗细。默认值是 “normal”。可选。定义字体支持的 UNICODE 字符范围。默认值是 “U+0-10FFFF”。animation-name属性指定动画的名称animation-duration属性指定动画运行时间div {.........
Css盒子模型入门指导
12-17
CSS 盒子模型是网页设计中的核心概念，尤其对于使用CSS进行布局的初学者而言，理解和掌握盒子模型至关重要。在传统的HTML布局中，表格被广泛用于网页内容的排版，但随着网页技术的发展，CSS（层叠样式表）的引入带来...
html+css入门到实战源码
12-09
... CSS的引入通常有三种方式：行内样式...通过这个"html+css入门到实战源码"的学习资源，你将能够逐步掌握前端开发的基础，为未来的网页设计和开发工作打下坚实的基础。不断实践，勇于探索，你将在前端领域走得更远。
CSS3弹性盒模型flex box快速入门心得(必看篇)
01-19
在css上使用flex的语法 display: flex; /*按照需求加入各浏览器需求前缀*/ flex-direction(适用于父类容器元素) flex-direction:row; a b c flex-direction:row-reverse; a b c flex-direction:column; a ...
CSS入门教程:计算CSS盒模型宽和高
09-27
出处：当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。#test{margin:10px;padding:10px;width:100px;height:100...
【重学前端】CSS 盒子模型
qq_36194388的博客
07-20 309
“盒子”与“模型”的概念 网页设计中常听的属性名： 内容(content)、填充(padding)、边框(border)、边界(margin)， 这些都是CSS盒子具备属性。 这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 特点：每个盒子都有：边界、边框、填充、内容四个属性；并且每个盒子都有尺寸。 每...
CSS3 基础
疯狂假前端的博客
09-17 691
CSS3（Cascading Style Sheets Level 3）是CSS的第三个版本，提供了许多新的功能和改进，使得网页设计更加灵活和丰富。CSS3 的引入主要是为了增加对网页布局、动画和视觉效果的支持。
第1关：背景定位与背景关联
weixin_67272154的博客
05-04 1194
当页面较长时，滚动页面，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。从上面的实例中，大家学习了多种背景属性的设置，为了简化这些属性的书写，我们可以将这些属性合并在同一个属性中。当图像作为背景和文本显示在同一个位置时，为了页面排版更优美、更易于文本的阅读，我们可以使用。对于具体位置，大家可以使用如下关键字的组合： | 属性值| | --- | |元素的背景定位和背景关联属性。以上属性无需全部使用，大家可以按照页面设置使用。本关任务：在本关中，我们将学习如何使用。
CSS之有点绕的盒子模型
Mr_zhang的博客
03-20 336
CSS盒子模型盒子模型解释 元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。设置边框 设置一边的边框，比如顶部边框，可以按如下设置：border-top-color...
css学习_css盒模型及应用
weixin_33700350的博客
03-10 336
1、看透网页布局的本质 2、盒模型 margin、border、padding、width、height a、 border： 1px solid red (solid/dashed/dotted/double) 案例：table表格中 合并边框的写法 table {border-collapse：collaps...
CSS入门——背景样式
qq_45823118的博客
03-31 2184
背景样式1.背景颜色任务描述相关知识代码文件2.背景图片任务描述相关知识代码文件3.背景颜色任务描述相关知识代码文件 1.背景颜色 任务描述 本关任务：在本关中，我们将学习如何使用CSS去更改HTML元素的背景属性。 本关任务完成之后的效果图如下： 完成如下要求： 设置body的背景颜色(background)为象牙色(ivory)； 设置段落p的背景颜色(background)为浅蓝色(lightblue)。 相关知识 背景色 我们可以使用background-color为元素设置背景色，通常属
理解盒子模型：DIV+CSS布局与应用
"盒子模型-DIV+CSS入门课件" 在网页设计领域，"盒子模型"是理解HTML元素布局的关键概念。每个HTML元素都可以被形象地比喻为一个装有内容的盒子，这个盒子由四个主要部分构成：内容区（Content）、内边距（Padding）...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李宥小哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值