盒子模型相关知识集合

最新推荐文章于 2024-09-12 18:02:32 发布
最新推荐文章于 2024-09-12 18:02:32 发布
阅读量662 收藏 23
点赞数 27
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80078038/article/details/137049710
版权

前端讨论班--第二周培训

一）盒子模型

1.盒子模型-组成

  • 内容区域 - width&heigt

  • 内边距 - padding

  • 边线框 - border

  • 外边距 - margin（出现在盒子外面）

image.png

image.png

image.png

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: red;
            height: 100px;
            width: 100px;
            color: white;
            padding: 20px;
            margin: 20px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div>
        内容
    </div>
</body>
</html>
2.盒子模型 - 边线框

1.属性名：border / border - 方位名词

2.属性值：边线框粗细 线条样式 颜色

3.常用线条样式：solid（实线） dotted（点线） dashed（虚线）

image.png

image.png

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 20px;
            padding: 20px;
           /*实线*/
           /*border: 1px solid #000;*/
           /*虚线*/
            /*border: 1px dashed red ;*/
           /*点线*/
           border: 4px dotted green;
        }
    </style>
</head>
<body>
    <div>
        内容
    </div>
</body>
</html>

4.设置单方向边线框

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 20px;
            padding: 20px;
          
           border-top: 4px dotted green;
           border-right: 4px solid #000;
           border-left: 4px solid blue;
           border-bottom: 5px dashed red;
        }
    </style>
</head>
<body>
    <div>
        内容
    </div>
</body>
</html>
3.盒子模型 - 内边距

1.作用：设置 内容 与 盒子边缘 之间的距离

2.属性名：padding / padding - 方位名词

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
           background:pink;
           width: 200px;
           height: 200px;
​
           padding: 50px;
        }
    </style>
</head>
<body>
    <div>
        内容
    </div>
</body>
</html>

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
           background:pink;
           width: 200px;
           height: 200px;
​
           padding-left: 50px;
           padding-right: 60px;
           padding-top: 70px;
           padding-bottom: 80px;
        }
    </style>
</head>
<body>
    <div>
        内容
    </div>
</body>
</html>

3.多值写法

4个值（上右下左）

image-20240326105248672

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
           background:pink;
           width: 200px;
           height: 200px;
​
          padding: 10px 20px 30px 40px ;
        }
    </style>
</head>
<body>
    <div>
        内容
    </div>
</body>
</html>

3个值（上 左右 下）

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
           background:pink;
           width: 200px;
           height: 200px;
​
          padding: 80px  30px 40px ;
        }
    </style>
</head>
<body>
    <div>
        内容
    </div>
</body>
</html>

2个值（上下 左右）

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
           background:pink;
           width: 200px;
           height: 200px;
​
          padding:  50px 40px ;
        }
    </style>
</head>
<body>
    <div>
        内容
    </div>
</body>
</html>
4.盒子模型 - 尺寸计算

1.默认情况：盒子尺寸 = 内容尺寸 + border尺寸 + 内边距（padding）尺寸

2.border/padding会撑大盒子

解决方法：自己计算 内减模式（box-sizing:boder-box）

5.盒子模型 - 外边距

1.作用：拉开两个盒子之间的距离

2.属性名：margin

3.版心居中

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
           background:pink;
           width: 200px;
           height: 200px;
          margin: auto;
        }
    </style>
</head>
<body>
    <div>
        内容
    </div>
</body>
</html>
6.清除默认样式

诸如：

`*{

margin: 0;

padding: 0;

box-sizing: border-box;

}`

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /*去掉列表的样式符号*/
        li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div>
        内容
    </div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

7.盒子模型 - 元素溢出

1.作用：控制溢出元素的内容的显示方式

2.属性名：overflow

3.属性值：hidden（溢出隐藏） scroll（溢出滚动，无论是否溢出，都有滚动条） auto（溢出滚动，内容溢出才显示滚动条）

image.png

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: red;
            width: 100px;
            height: 100px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        内容ashljkdhalsjkdadsasdas
        dasdasdasdasdas
        dasdasdasdasdasdas
        dasdasdasdasdas
        dasdas
    </div>
    
</body>
</html>

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: red;
            width: 100px;
            height: 100px;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div>
        内容ashljkdhalsjkdadsasdas
        dasdasdasdasdas
        dasdasdasdasdasdas
        dasdasdasdasdas
        dasdas
    </div>
    
</body>
</html>

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: red;
            width: 100px;
            height: 100px;
            overflow:auto;
        }
    </style>
</head>
<body>
    <div>
        内容ashljkdhalsjkdadsasdas
        dasdasdasdasdas
        dasdasdasdasdasdas
        dasdasdasdasdas
        dasdas
    </div>
    
</body>
</html>
8.外边距问题 - 合并现象

1.场景：垂直排列的兄弟元素，上下margin会合并

2.现象：取两个margin中的较大值生效

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            background-color: red;
            width: 100px;
            height: 100px;
            margin-bottom: 50px;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top:10px ;
        }
    </style>
</head>
<body>
    <div class="one">
       
    </div>
    <div class="two">
       
    </div>
</body>
</html>
9.外边距问题 - 塌陷问题

1.场景：父子级的标签，子级的添加上外边距会产生塌陷问题

2.现象：导致父级一起向下移动

3.解决方法：

  • 取消子级margin,父级设置padding

  • 父级设置overflow:hidden

  • 父级设置boder-top

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            background-color: red;
            width: 200px;
            height:200px;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="one">
       
        <div class="two">
       dada
        </div>
        
    </div>
    
</body>
</html>

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            background-color: red;
            width: 140px;
            height:140px;
            padding: 70px;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: blue;
           
        }
    </style>
</head>
<body>
    <div class="one">
       
        <div class="two">
       dada
        </div>
        
    </div>
    
</body>
</html>
10.行内元素 - 内外边距问题

1.场景：行内元素添加margin和padding，无法改变元素垂直位置

2.解决方法：给行内元素添加line-height可以改变垂直位置

image.png

image.png

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       span{
        margin: 50px;
        padding: 20px;
        line-height: 100px;
       }
    </style>
</head>
<body>
    <span>标签</span>
    <span>标签</span>
    
</body>
</html>
11.盒子模型 - 圆角

1.作用：设置元素的外边框为圆角

2.属性名：border-radius

3.属性值：数字+px/百分比（多个值的话，在左上角开始顺时针变化，如果本身没被赋值，那么就与对角一样）

image.png

image.png

image.png

image-20240326154243667

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       div{
        margin: 50px auto;
        height: 200px;
        width: 200px;
        background-color: green;
        border-radius: 20px 40px 60px 80px;
       }
    </style>
</head>
<body>
    <div>
​
    </div>
    
</body>
</html>

4.常见应用 - 正圆形状（给正方形盒子设置圆角属性值为宽高的一半/50%）

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
        margin: 50px auto;
        height: 200px;
        width: 200px;
        background-color: green;
        border-radius: 50%;
       }
    </style>
</head>
<body>
    <div ></div>
    </div>
    
</body>
</html>

image-20240326155426335

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       img{
        height: 200px;
        width: 200px;
        border-radius: 100px;
       }
    </style>
</head>
<body>
    <img src="./images/1.jpg" alt="">
    
</body>
</html>

5.常见应用 - 胶囊形状（给长方形盒子设置圆角属性值为盒子高度的一半）

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
        margin: 50px auto;
        height: 100px;
        width: 200px;
        background-color: green;
        border-radius: 100px;
       }
    </style>
</head>
<body>
    <div ></div>
    </div>
    
</body>
</html>

12.盒子模型 - 阴影

1.作用：给元素设置阴影效果

2.属性名：box-shadow

3：属性值：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意：x轴偏移量 和 y轴偏移量必须书写

默认是外阴影，内阴影需要添加inset

image.png

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       div{
        margin: 50px auto;
        height: 200px;
        width: 200px;
        background-color: blue;
        box-shadow: 2px 5px 1px 3px red inset;
       }
    </style>
</head>
<body>
    <div>
​
    </div>
    
</body>
</html>

旧梦想吃汤圆
关注
彻底弄懂CSS盒子模式系列教程集合
10-30
本文将深入浅出地介绍CSS盒子模型的相关知识点，帮助读者全面理解其工作原理。 #### 二、CSS盒子模型的基本结构 CSS盒子模型由四个主要部分组成：content（内容区域）、padding（填充）、border（边框）和margin...
Web知识-前端面试题集合
02-27
### Web知识-前端面试题集合 #### 一、前端布局单位的理解 1. **rem、em、vw、vh、vw 与百分比的区别** - **相同点**：`rem`、`em`、`vw`、`vh`、`vw` 都是前端开发中除 `px` 单位外的其他单位。 - **不同点**...
厨房餐具三维模型
01-01
本主题的焦点是“厨房餐具三维模型”，这是一个专为餐具设计所创建的3D模型集合。这样的模型能够帮助设计师、艺术家或者开发者在虚拟环境中精确地重现现实生活中的餐具，从而提供更加真实和互动的体验。 首先，我们...
一起看TV 2.3.1 盒子点播.zip
08-30
用户可以从中学习到软件开发的相关知识，例如Python、C语言编程，以及如何为电视盒子设计应用程序。同时，源代码部分可以作为参考和学习，帮助理解软件的架构和工作原理。对于喜欢探索和实验的开发者，这个压缩包...
贴心Java盒子.zip
11-16
"贴心Java盒子.zip"是一个包含了与Java编程相关的资源包，可能是为了帮助初学者或开发者更好地理解和学习Java语言。从文件名列表来看，我们有两个文件：一个是"使用须知.txt"，这通常会提供如何使用这个资源包的指导...
前端用html写excel文件直接打开
全易
09-10 626
html文件直接用excel打开
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
S筱潇S四维Smile
09-11 374
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
Openlayers 报错记录 Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘:
最新发布
Liszter
09-12 374
原因是引用的图层得配置跨域问题。这是浏览器对canvas 设置的导出安全策略。每个引用的图层添加一个。即可、、、 不用谢、、
《HTML 与 CSS—— 响应式设计》
asd4353012的博客
09-11 1533
HTML 和 CSS 在响应式设计中起着至关重要的作用。通过使用语义化标签、响应式图像、媒体查询、弹性布局和响应式网格系统等技术，可以实现网页在不同设备上的自适应显示，提供最佳的用户体验。在进行响应式设计时，要遵循移动优先设计、内容优先和测试优化等最佳实践，不断提高网页的质量和性能。随着移动设备的普及和技术的不断发展，响应式设计将变得越来越重要，开发者需要不断学习和掌握新的技术和方法，以满足用户的需求。
水平居中的几种方法（总结）
致未来的你。的博客
09-11 764
水平居中的几种方法（总结）
Requests-HTML模块怎样安装和使用？
2301_79698214的博客
09-11 565
上述代码中，首先创建了一个HTMLSession对象，然后使用get()方法发送GET请求，获取网页的HTML内容。最后，使用response.html.text属性获取HTML文本，并将其打印输出。以上就是使用Requests-HTML模块的基本步骤。在Python脚本中导入Requests-HTML模块。使用Requests-HTML模块发送HTTP请求和解析HTML内容。使用pip命令安装Requests-HTML模块。系统会自动下载并安装Requests-HTML模块及其依赖项。
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 4795
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
《实现 HTML 图片轮播效果》
qq_69304031的博客
09-11 690
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
《响应式 Web 设计：纯 HTML 和 CSS 的实现技巧》
asd4353012的博客
09-09 1174
通过使用纯 HTML 和 CSS，可以实现响应式 Web 设计的各种技巧，包括弹性布局、媒体查询、响应式字体和文本等。在进行响应式设计时，应遵循移动优先的原则，使用相对单位和弹性布局来构建网页结构，使用媒体查询来针对不同的屏幕尺寸应用不同的样式。因此，在设计过程中，应优先为移动设备设计简洁、高效的布局和样式，然后再逐步扩展到更大的屏幕尺寸。通过使用媒体查询，可以为不同的设备定制不同的布局和样式，实现响应式设计。属性为不同的屏幕尺寸提供不同的图像源，以确保图像在不同设备上都能呈现出最佳的效果。
requests-html的具体使用方法有哪些？
2301_79698214的博客
09-12 516
requests-html库还支持使用XPath表达式来查找元素，提供了丰富的功能来满足各种网页数据抓取和分析的需求‌。‌：通过pip安装requests-html库，命令为。‌：通过继续跟踪网页中的链接，可以获取到更多相关内容。
Java html生成pdf和图片
weixin_43898271的博客
09-12 681
技术名称优点缺点适用场景Html2Image简单易用，轻量级，Java 原生支持支持 HTML、CSS 和 JS 的能力较弱静态 HTML 到图片的简单场景支持丰富的 HTML 和 CSS，输出多种格式不支持 JS 动态内容，转换步骤稍复杂静态 HTML 生成 PDF 或图片高质量渲染，支持复杂 HTML、CSS 和 JS需要外部工具，性能可能较慢需要高质量渲染的复杂页面完全支持动态页面和 JavaScript需要配置无头浏览器，资源消耗较大动态网页、复杂前端页面的截图。
水平垂直居中的几种方法（总结）
致未来的你。的博客
09-11 1163
水平垂直居中的几种方法（总结）
HTML + CSS - 网页布局之一般布局&浮动布局
qq_51222843的博客
09-11 1128
讲解CSS中的一般布局以及浮动布局
UML建模语言详解：模型元素与关系
本文将深入探讨UML中的模型元素及其相关知识点。 首先，我们来看UML的事物。事物是UML模型的构建块，它们代表了系统中的概念或者实体。根据功能和性质，事物被分为四类：结构事物、动作事物、分组事物和注释事物。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值