CSS盒子模型

最新推荐文章于 2025-03-26 19:45:04 发布
最新推荐文章于 2025-03-26 19:45:04 发布
阅读量1k 收藏
点赞数 14
分类专栏： HTML5 文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/rch041126/article/details/143240561
版权

文章目录

一 优先级

1.1 优先级介绍

在这里插入图片描述

<!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>
        .box{
            color: aqua;
        }
        div{
            color: green !important;
        }
        body{
            color: red;
        }
        #box{
            color: black;
        }
    </style>
</head>
<body>
    <div class="box" id="box" style="color: pink;">测试优先级</div>
</body>
</html>

1.2 权重叠加计算

在这里插入图片描述

<!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 #one{
            color: orange;
        }
        .father p{
            color: blue;
        }
        .father .son{
            color: aqua;
        }
        div p{
            color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <p class="son" id="one">标签</p>
    </div>
</body>
</html>

1.3 拓展：查错流程

在这里插入图片描述

二 盒子模型

2.1 盒子模型介绍

在这里插入图片描述

<!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{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 边框线 */
            border: 1px solid #000;
            /* 内边距：内容与边框线之间 */
            padding: 20px;
            /* 外边距 */
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        你好
    </div>
    <div>
        你好
    </div>
</body>
</html>

2.2 内容区域的宽度和高度

在这里插入图片描述

<!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{
            width: 60px;
            height: 60px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>pppp</div>
</body>
</html>

2.3 边框（border）

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

<!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{
            width: 100px;
            height: 100px;
            background-color: pink;
            /* soild:实线 */
            /* dashed:虚线 */
            /* dotted:点线 */ 
            border-bottom: 10px red dashed;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div>lll</div>
</body>
</html>

2.4 内边距（padding）

<!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{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* padding属性可以当作复合属性来使用，表示单独设置某个方向的内边距 */
            /* 最多取4个值 */
            /* 上 右 下 左 */
            /* padding: 50px; */
            /* 上 左右 下 */
            /* padding: 10px 10px 66px; */
            /* 上下 左右 */
            padding: 66px 33px;
        }
    </style>
</head>
<body>
    <div>666</div>
</body>
</html>

2.5 盒子大小计算公式

在这里插入图片描述

<!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{
            /* 撑大盒子的因素: border + padding */
            width: 240px;
            height: 240px;
            background-color: pink;
            border: 10px solid  #000;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

2.6 自动內减

在这里插入图片描述

<!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{
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 10px solid black;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>llll</div>
</body>
</html>

2.7 案例：新浪导航

初版代码

<!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>
        .box{
            height: 400px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        /* 后代:box里面的a */
        .box a{
            width: 80px;
            height: 40px;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .box a:hover{
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>
    <!-- 布局从外到内:先宽高背景色，放内容，调节内容的位置：控制文字细节 -->
</head>
<body>
    <div class="box">
        <a href="#">百度</a>
        <a href="#">百度</a>
        <a href="#">百度</a>
        <a href="#">百度</a>
    </div>
</body>
</html>

修改

<!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>
        .box{
            height: 400px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        /* 后代:box里面的a */
        .box a{
            padding: 0 16px;
            height: 40px;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .box a:hover{
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>
    <!-- 布局从外到内:先宽高背景色，放内容，调节内容的位置：控制文字细节 -->
</head>
<body>
    <div class="box">
        <a href="#">百度</a>
        <a href="#">百度666666666</a>
        <a href="#">百度</a>
        <a href="#">百度</a>
        <a href="#">百度</a>
    </div>
</body>
</html>

2.8 外边距（margin）

用法与内边距一样

<!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{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>666</div>
</body>
</html>

2.9 清除默认内外边距

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

<!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>
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
</body>
</html>

2.10 版心居中

<!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{
            width: 1000px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head> 
<body>
    <div>你好</div>
</body>
</html>

2.11 网页新闻列表案例

在这里插入图片描述

<!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;
            /* 所有的标签都可能添加内边距或border，都内减模式 */
            box-sizing: 
            border-box;
        }
        .news{
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 50px auto;
            padding: 42px 30px 0;
        }
        .news h2{
            border-bottom: 1px solid #ccc;
            font-size: 30px;
            /* 行高是1倍，就是字号的大小 */
            line-height: 1;
            padding-bottom: 9px;
        }
        /* 去掉点符号 */
        ul{
            list-style: none;
        }
        .news li{
            height: 50px;
            border-bottom: 1px dashed #ccc;
            padding-left: 28px;
            line-height: 50px;
        }
        .news a{
            text-decoration: 
            none;
            color: #666;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="news">
        <h2>新闻</h2>
        <ul>
            <li><a href="#">新闻1</a></li>
            <li><a href="#">新闻2</a></li>
            <li><a href="#">新闻3</a></li>
            <li><a href="#">新闻4</a></li>
            <li><a href="#">新闻5</a></li>
        </ul>
    </div>
</body>
</html>

2.12 外边距问题

2.12.1 合并现象

在这里插入图片描述

<!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{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .one{
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
    <div class="one">666</div>
    <div class="two">333</div>
</body>
</html>

2.12.2 塌陷问题

在这里插入图片描述

2.13 行内元素的垂直内外边距

<!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：100px */
            /* padding：100px */
            line-height: 100px;
        }
    </style>
</head>
<body>
    <!-- 行内元素 内外边距 margin padding -->

    <!-- 如果想要通过margin或padding改变行内标签的垂直位置，无法生效 -->
     <!-- 行内标签的margin-top和bottom 不生效 -->
      <!-- 行内标签的padding-top和bottom 不生效 -->
    <span>span</span>
    <span>span</span>
</body>
</html>
css盒子模型图解
09-25
### CSS盒子模型详解 #### 一、引言 CSS（层叠样式表）是Web设计中不可或缺的一部分，它用于控制HTML文档的布局和外观。在CSS中，元素的布局通过盒子模型来定义，该模型决定了元素如何占用空间以及与其他元素交互...
CSS 盒子模型
冷月醉雪的博客
05-18 426
   所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。    CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。    盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。    下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距) - 清除边框外的区...
CSS学习笔记4——盒子模型
最新发布
2401_88591507的博客
03-26 1443
在CSS中，每个元素就像这个衣柜。它不仅包含内容，还有围绕内容的空间（内边距）、保护内容的边界（边框）以及与其他元素保持距离的区域（外边距）。这就是所谓的“盒子模型”。
CSS中的盒子模型
小何代码咖啡馆
04-19 3063
在网页布局时，主要关注的就是如何利用CSS摆放盒子先准备好相关的网页元素，网页元素基本都是盒子利用 CSS 设置好盒子样式，然后摆放到相应位置往盒子里面装内容。
CSS盒子模型教程PPT课件.pptx
10-10
CSS 盒子模型教程 CSS 盒子模型是指浏览器对网页中的各个元素（图片、段落、单元格等）进行排列和定位的模式。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本节主要介绍...
css盒子模型
08-22
CSS盒子模型是网页布局的基础，它是CSS（Cascading Style Sheets）中用于描述网页元素在屏幕上占用空间的方式。深入理解盒子模型对于精确控制网页元素的布局至关重要。在本实战中，我们将探讨盒子模型的各个组成部分...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
CSS的盒子模型！
CH040708的博客
10-17 1315
盒子模型的内容包含了宽度（ width）和高度（height）等属性来定义。盒子模型相当于一个相框，相片就是盒子的内容（content），相框之间的距离就是内边距(padding)，相框的宽度就是边框(border)；w就是外边距(margin)。内边距作用于控制内容与编剧之间的距离。padding属性用于定义元素内容与元素边框之间的空白区域。（内边距属性不允许负值）边框的外围即为元素的最外围，围绕元素内容和内边距的一条或多条线。边框的复合写法该属性是复合属性，可以将多个单属性合并一起写。
CSS_弹性盒子模型
qq_55961861的博客
08-09 533
CSS_弹性盒子模型！
【CSS】盒子模型
柠檬树
05-09 3408
一、什么是CSS？     CSS（Cascading Style Sheet）：层叠样式表是将网页的内容与样式进行分离的一种语言，也就是在aspx或html中设计网页的内容，在CSS中设置网页的样式等。 二、什么是CSS盒子模型？     网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性。这些属
CSS之盒子模型
qq_57907966的博客
02-07 2387
作用：根据元素的查找元素。
深入掌握CSS盒子模型：实战应用解析
CSS盒子模型是CSS布局的基础，它定义了元素框处理元素内容（content）、内边距（padding）、边框（border）和外边距（margin）的方式。通过深入理解CSS盒子模型，可以更好地控制页面布局和元素尺寸，实现响应式和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值