盒子模型基础知识

最新推荐文章于 2024-07-27 09:56:28 发布

码农中的混子✓☜

最新推荐文章于 2024-07-27 09:56:28 发布

阅读量114

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/m0_52726240/article/details/121190457

版权

笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文深入讲解了网页布局的核心——盒子模型，包括边框、内容、内边距和外边距的应用。通过实例演示了边框样式和颜色设置，以及如何利用padding调整元素间距，同时介绍了边框对盒子尺寸的影响和外边距的使用技巧。

摘要由CSDN通过智能技术生成

页面布局要学习三大核心，盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布局页面。

1、看透网页布局的本质

在这里插入图片描述

2、盒子模型的组成

在这里插入图片描述
**
竹板这么一打呀
别的咱不夸
盒子模型实际开发用处非常大
border是边框
content内容哒
padding内边距
非常重要啦
边框与内容的距离主要就靠它
margin外边距
它是干啥的？
盒子与盒子的距离就靠它说话
盒子模型掌握了
你乐的像朵花
—pink老师
**
在这里插入图片描述

3、边框（border）

在这里插入图片描述

<!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 {
        width: 300px;
        height: 300px;
        /* border-width设置边框的粗细，
            如果没有设置边框的样式，此样式不生效 */
        border-width: 5px;
        /* boder-style:none|solid(实线)|dashed(虚线)|dotted(点线) */
        border-style: dotted;
        /* border-color设置边框的颜色，默认是黑色 */
        border-color: pink;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

在这里插入图片描述

4、表格的细线边框（合并单元边框）

在这里插入图片描述

5、边框会影响盒子实际大小

在这里插入图片描述

6、内边距

在这里插入图片描述

练习padding

在这里插入图片描述

<!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>
      .nav {
        height: 41px;
        border-top: 3px solid #ff8500;
        border-bottom: 1px solid #edeef0;
        background-color: #fcfcfc;
        line-height: 41px;
      }
      .nav a {
        display: inline-block;
        height: 41px;
        padding: 0 20px;
        color: #4c4c4c;
        text-decoration: none;
        font-size: 12px;
      }
      .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>

在这里插入图片描述

7、外边距margin

在这里插入图片描述

8、外边距合并

在这里插入图片描述

9、清除内外边距

在这里插入图片描述

码农中的混子✓☜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型基础知识

页面布局要学习三大核心，盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布局页面。1、看透网页布局的本质2、盒子模型的组成**竹板这么一打呀别的咱不夸盒子模型实际开发用处非常大border是边框content内容哒padding内边距非常重要啦边框与内容的距离主要就靠它margin外边距它是干啥的？盒子与盒子的距离就靠它说话盒子模型掌握了你乐的像朵花—pink老师**3、边框（border）<!DOCTYPE html><html
复制链接

扫一扫