CSS盒子

最新推荐文章于 2024-04-17 13:35:42 发布
最新推荐文章于 2024-04-17 13:35:42 发布
阅读量299 收藏 1
点赞数
分类专栏： CSS 讲义 HTML 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45650003/article/details/120694361
版权
讲义 同时被 3 个专栏收录
6 篇文章 0 订阅
订阅专栏
CSS
3 篇文章 0 订阅
订阅专栏
HTML
2 篇文章 0 订阅
订阅专栏

1.网页布局核心原理<搭建架子，布局盒子，填充内容>

(1)搭建框架

就是创建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>Document</title>
</head>
<body>
  
</body>
</html>

(2)布局盒子(不同样式)

定义的盒子：就是嵌套div可以嵌套多个，然后接着设置样式

代码分析：
<!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>Document</title>
  <style type="text/css">
  #one{
    background-color: aquamarine;
  }
  #two{
    background-color: green;
  }
  </style>
</head>
<body>
   <div>
     <div id="one">
    
     </div>
     <div id="two">
   
     </div>
   </div>
</body>
</html>

(3)填充内容

代码分析：
<!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>Document</title>
  <style type="text/css">
  #one{
    background-color: aquamarine;
  }
  #two{
    background-color: green;
  }
  </style>
</head>
<body>
   <div>
     <div id="one">
       one
     </div>
     <div id="two">
       two 
     </div>
   </div>
</body>
</html>

2.盒子模型组成部分

(1)border（代表边框）<里面的属性值可以任意更换>

边框的属性有上下左右四个：

格式：border-上下左右：大小（npx）solid（颜色）；

border-top
​
border-bottom
​
border-left
​
border-right
代码分析：
<!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>Document</title>
  <style type="text/css">
  #one{
    background-color: green;
    height: 100px;
    width: 100px;
    border-top: 20px solid palevioletred;
    border-bottom:20px solid black;
    border-left:20px solid blue;
    border-right:20px solid blanchedalmond;
  }
  </style>
</head>
<body>
  <div id="one">
    one
  </div>
</body>
</html>

一般情况我们用一个border来概括整体

格式：border：大小（npx）solid（颜色）

代码分析：
<!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>Document</title>
  <style type="text/css">
  #one{
    background-color: green;
    height: 100px;
    width: 100px;
    border: 20px solid blue;
  }
  </style>
</head>
<body>
  <div id="one">
    one
  </div>
</body>
</html>

border-collapse: collapse;<复选框合并为一个单选框>

<!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>Document</title>
  <style type="text/css">
  table,th{
    border: 2px solid blue;
    border-collapse: collapse;/*复选框合并为一个单选框*/
  }
  </style>
</head>
<body>
  <table style="width: 600px; height: 150px;" cellspacing="0">
    <tr>
      <th>水果</th>
      <th>进价</th>
      <th>零售</th>
    </tr>
    <tr>
      <td>香蕉</td>
      <th>1.5元</th>
      <th>1.5元</th>
    </tr>
    <tr>
      <td>苹果</td>
      <th>2元</th>
      <th>3元</th>
    </tr>
    <tr>
      <td>橙子</td>
      <th>3.5元</th>
      <th>5元</th>
    </tr>
​
  </table>
</body>
</html>

border大小问题 ：

width10px(相当于左右各10px) hight20px（上下个20px，也就是40px）

(2)margin

(3)padding

3.border

3.1案例1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width:100px;
                height: 100px;
                border: 1px solid red;  /**无顺序  
                border-top: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
​

3.2案例2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            table,td{
                border: 1px solid red;
                border-collapse: collapse;
            }
             
        </style>
    </head>
​
    <body>
        <table style="width: 600px;height: 150px;"  cellspacing="0">
            <tr>
                <th>Month</th>
                <th>Savings</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
                <td>$100</td>
            </tr>
        </table>
    </body>
</html>

3.3案例3(border影响盒子大小)

<!DOCTYPE html>
<html>
​
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             div{
                width: 100px;
                height: 100px;
                background-color: red;
                border: 10px solid yellowgreen;
             }
        </style>
    </head>
​
    <body>
         <div></div>
    </body>
</html>

3.3.1解决A

不测量边框宽度

3.3.2解决B

测量的时候width/height出去边框宽度
<style type="text/css">          
             div{
                width: 80px;
                height: 80px;
                background-color: red;
                border: 10px solid yellowgreen;
             }
</style>

4.padding

4.1 定义

设置内边距,即边框与内容之间的距离。

4.2案例1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             div{
                width: 100px;
                height: 100px;
                background-color: red;
                
                /*padding-top: 10px;
                padding-left: 10px;*/
                
                padding: 5px;/**(4种表示方式)
             }
        </style>
    </head>
    <body>
         <div>范德萨发生大师傅的师傅大师傅</div>
    </body>
</html>

4.3案例2(padding影响盒子大小)

<!DOCTYPE html>
<html>
​
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             div{
                width: 100px;
                height: 100px;
                background-color: red; 
                padding: 20px;
             }
        </style>
    </head>
​
    <body>
         <div>
             最近，有消费者在使用顺丰速运寄快递时才能签收快递
         </div>
    </body>
​
</html>

4.3.1解决方案

width/height减去多出来的内边距

4.4案例3(盒子未指定width/height属性，则padding不会撑开盒子大小)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             div{
                /** width: 100%;
                height: 100px;
                background-color: red; 
                 padding: 20px;
             }
        </style>
    </head>
    <body>
         <div>
             最近，有消费者在使用顺丰速运寄快递时才能签收快递
         </div>
    </body>
</html>

5.margin

5.1定义

margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px

5.2案例1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             div{
                width: 200px;
                height: 200px;
                background-color: green;
             }
             .first{
                margin-bottom: 20px;
             }
        </style>
    </head>
    <body>
         <div class="first">aa</div>
         <div>bb</div>
    </body>
</html>

5.3案例2(水平居中)

5.3.1前提：块级元素水平居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             .the{
                width: 200px;
                height: 200px;
                background-color: green;
                margin: 0 auto;
             }
        </style>
    </head>
    <body>
          <div class="the"></div>
    </body>
</html>

5.3.2前提: 行内/行内块元素水平居中

步骤：给其父元素添加text-align:center即可
​
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             .the{
                width: 200px;
                height: 200px;
                background-color: green;
                margin: 0 auto;
                text-align: center;
             }
             /**無效
             /*span{
                margin: 0 auto;
             }*/
        </style>
    </head>
    <body>
          <div class="the">
            <span>呵呵</span>
          </div>
    </body>
</html>

5.4案例3(父元素塌陷-外边距合并)

出现场景：嵌套块元素

如果margin定义块级元素外边距的时候，可能会出现外边距的合二为一，例如对于父子关系的
块元素，父元素和子元素同事具有外边距，父元素会塌陷较大的外边距。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             .father{
                width: 200px;
                height: 200px;
                background-color: red;
                margin-top: 50px;/** 1 **/
                 
             }
             .son{
                width: 100px;
                height: 100px;
                background-color: yellow;
                margin-top: 20px;/** 2**/
             }
             
        </style>
    </head>
    <body>
         <div class="father">
            <div class="son"></div>
         </div>
    </body>
</html>
​
​

解决塌陷

​
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             .father{
                width: 200px;
                height: 200px;
                background-color: red;
                margin-top: 50px;/** 1 **/
                /**3**/
                border: 1px solid green;
                padding: 1px;
                overflow: hidden;
             }
             .son{
                width: 100px;
                height: 100px;
                background-color: yellow;
                margin-top: 20px;/** 2**/
             }
             
        </style>
    </head>
    <body>
         <div class="father">
            <div class="son"></div>
         </div>
    </body>
</html>

5.5案例4（默认内外边距）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
     
    </head>
    <body>
         abcdefghijlmn
    </body>
</html>

企业级解决方案：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
     <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
     </style>
    </head>
    <body>
         abcdefghijlmn
    </body>
</html>

5.6案例6(特殊场景:行内元素建议只设置左右的内外边距)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
     <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        span{
            margin: 20px;
        }
     </style>
    </head>
    <body>
         <span>fdsafddfdaf</span>
    </body>
</html>

解决方案：

行内元素转换为块级和行内块元素
代码贩子、
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css盒子模型详解加示例
09-25
主要介绍了css盒子模型详解加示例,W3C组织建议把所有的网页上的对象都放在一个盒子中,在定义盒子宽高的时候，要考虑到内填充，边框，边界的存在,这里讲了一个盒子的构成、CSS盒子模型的属性，还有一些示例,需要的朋友可以参考下
css盒子模型图解
09-25
主要介绍了css盒子模型的使用方法,需要的朋友可以参考下
CSS基础：盒子模型详解
最新发布
u013179804的博客
04-17 1347
盒模型时，也叫"框模型"，指的是 CSS 中元素的布局方式和尺寸计算规则。盒模型定义了一个元素在页面布局中所占的空间，包括了元素的内容、内边距、边框和外边距，没错，而这些，正是我们前几篇文所提到的。CSS 基础：border 的 3 个基础属性和简写方法CSS基础：margin属性4种值类型，4个写法规则详解CSS基础：最详细 padding的 4 种用法解析CSS基础：width，height尺寸属性详解。
css盒子模型
08-22
通过这个css盒子模型的实战，更好的理解css盒子模型
7-盒子模型
w_45678910的博客
12-21 780
盒子模型 盒子模型就是在HTML中盛装元素内容的容器。 每个盒子模型都由元素的内容（content）、内边距（padding）、边框（border） 和 外边距（ margin） 组成。 div标记 <div>标记是一个块容器标记。 可以将网页分割为独立的部分，实现网页的规划和布局。 大多数HTML标记都可以嵌套在div标记中，div中还可以嵌套多层div标记。 div可以替代大多数的块级文本标记。 盒子的宽和高 盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左
CSS自学Day5-盒子模型
m0_64005381的博客
09-12 368
css自学盒子模型，该篇知识点全面，列举了很多综合案例，并对在我们处理内外边距问题时遇到的一些问题做出来解释。
html边框不占像素,CSS边框小于1像素
weixin_42496225的博客
06-03 257
像素是渲染某物的最小单位值。但你可以通过修改颜色通过视觉幻觉来欺骗厚度。 (眼睛只能看到一个certain resolution太)。这里是a test证明这一点：div { border-color: blue; border-style: solid; margin: 2px; }div.b1 { border-width: 1px; }div.b2 { border-width: 0.1em...
18.8.15table滚动条
matilian的博客
08-15 204
1.纵向/横向滚动条,首行固定,首列不固定   (纯css) &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt;
CSS基础知识(二）——盒子模型
weixin_54799350的博客
06-21 5077
CSS盒子模型相关属性介绍
CSS盒子模型
热门推荐
微风洋洋的博客
02-08 1万+
CSS盒子模型在CSS中算是比较重要的部分了，他已经开始涉及到网页布局和设计了，对于这一块内容要引起重视，多加练习。
css盒子概述
m0_63029399的博客
05-04 2742
盒子的概念 1.页面中的每一个标签,都可以看作一个盒子，通过盒子的视角更方便的进行布局。是 2.浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的 称之为盒子。 3. 盒子组成 css中规定每一个盒子分别由: 内容区域(content)、内边距区域(padding)、边框区域 (border)、外边距区域(margin)构成,这就是...
CSS盒子模型是什么
09-24
什么是CSS盒子模型？CSS盒子模型是为了让我们充分理解div+css模型的定位功能，盒子模型在学习div+css布局方式中必须要学习的一个模型
21.4 CSS 盒子模型
09-02
配套资源
web前端-CSS盒子模型
qq_53584660的博客
06-08 1893
1.盒子的概念页面中的每一个标签，都可以看做是一个盒子，通过盒子的视角更方便的进行布局浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子2.盒子模型CSS中规定每个盒子分别由 内容区域（content）、 内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型3.记忆：可以联想现实中的包装盒（电脑包装做类比，电脑+填充泡沫+外包装盒） 如果是两个内容： 想让两个内容之间有间距，代码应该加margin：外边距
css：盒模型
YangLu888
10-11 962
css的盒模型
CSS样式——盒子模型
qq_42828394的博客
04-01 1102
盒子模型 一、什么是盒模型 每一个标签都是一个矩形，像一个盒子，所以HTML页面的布局可以理解为多个盒子组合嵌套排列而成 二、组成 三、怪异盒模型
CSS—盒子模型+定位（详细解析，附有案例）
lerrel1的博客
07-22 1867
盒子模型是CSS中较为重要的核心概念之一，它是使用CSS控制页面元素外观和位置的基础。定位是用来控制元素在浏览器中的位置
CSS布局-盒子模型
weixin_48341937的博客
07-11 369
➢ 场景：垂直布局 的 块级元素，上下的margin会合并 ➢ 结果：最终两者距离为margin的最大值 ➢ 解决方法：避免就好 • 只给其中一个盒子设置margin即可。➢ CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（ margin）构成，这就是 盒子模型。• 解决：计算多余大小，手动在内容中减去（手动内减）➢ 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
CSS盒子模型详解
qq_46056318的博客
11-01 2158
盒子可见框的大小，由内容区、内边距、边框共同决定，所以在计算盒子大小时，需要将三个区域加到一起计算。CSS将页面中的所有元素都设置为了一个矩形的盒子，对页面的布局就是将不同的盒子摆放到不同的位置。子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度。总结：兄弟元素之间的外边距的重叠，对于开发是有利的，不需要进行处理。内边距，也叫填充，是内容区和边框之间的空间，背景颜色会延申。
web前端css盒子
11-17
以下是CSS盒子模型的详细介绍： 1. 内容区域：指的是HTML元素的实际内容，例如文本、图片等。 2. 内边距：指的是内容区域与边框之间的距离，可以通过padding属性来设置。 3. 边框：指的是内容区域和外边距之间的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

代码贩子、

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

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

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

打赏作者

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

抵扣说明：

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

余额充值