css盒子

最新推荐文章于 2024-04-19 22:40:29 发布
最新推荐文章于 2024-04-19 22:40:29 发布
阅读量88 收藏
点赞数 1
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64374353/article/details/121501142
版权

## 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

![1631586745672](0914盒子.assets/1631586745672.png)

## 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>

```

解决方案：

```

行内元素转换为块级和行内块元素

```

使用的是display：行内元素转换为块级和行内块元素

display：none元素不会被显示  bock元素会被显示为块元素   inline元素会被显示为行内元素

inline-bock行内块元素

ul ；li：nth-child（数字）这个数字代表的ul里面的第几个li的属性加以改变的

组合选择器：

第一种：后代选择器，空格分开 比如ul li 说的是ul里面的li都是同一个属性值

第二种：子代选择器>分开，div>p  只是对其中一个p的属性值加以改变，其他p不会变

m0_64374353
关注
css盒子模型图解
09-25
### CSS盒子模型详解 #### 一、引言 CSS（层叠样式表）是Web设计中不可或缺的一部分，它用于控制HTML文档的布局和外观。在CSS中，元素的布局通过盒子模型来定义，该模型决定了元素如何占用空间以及与其他元素交互...
css盒子模型 css margin 外边框合并
09-25
CSS盒子模型是Web开发中非常基础且核心的概念之一，它定义了元素框处理内容、内边距、边框和外边距的方式。了解和掌握CSS盒子模型，对于进行前端开发和网页布局至关重要。 首先，CSS盒子模型由四个部分组成：内容...
CSS盒子
代码贩子、的博客
10-10 325
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="wi
【CSS】盒子模型
柠檬树
05-09 3355
一、什么是CSS？     CSS（Cascading Style Sheet）：层叠样式表是将网页的内容与样式进行分离的一种语言，也就是在aspx或html中设计网页的内容，在CSS中设置网页的样式等。 二、什么是CSS盒子模型？     网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性。这些属
CSS中的盒子模型
最新发布
小何代码咖啡馆
04-19 1767
在网页布局时，主要关注的就是如何利用CSS摆放盒子先准备好相关的网页元素，网页元素基本都是盒子利用 CSS 设置好盒子样式，然后摆放到相应位置往盒子里面装内容。
CSS盒子模型
热门推荐
微风洋洋的博客
02-08 1万+
CSS盒子模型在CSS中算是比较重要的部分了，他已经开始涉及到网页布局和设计了，对于这一块内容要引起重视，多加练习。
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
CSS盒子模型教程PPT课件.pptx
10-10
CSS 盒子模型教程 CSS 盒子模型是指浏览器对网页中的各个元素（图片、段落、单元格等）进行排列和定位的模式。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本节主要介绍...
CSS 盒子
William Lin 的专栏
12-10 627
  这篇文章是转载的，对于理解css中的margin/padding/border这些概念很有帮助CSS 中有个重要的概念，就是盒子模式 (Box model)。胡戈的"一个馒头引发的血案"中有个圆圈套圆圈娱乐城，而这个盒子模式套用这句话来说，就是方块套方块。先看看下面这个图，黑框包围的一个方块，就是一个盒子 (Box)。 盒子里由外至里依次是：·       marg
CSS盒子模型、浮动、定位
qq_42227428的博客
06-01 3761
一、盒子模型1、css背景（background）：css可以添加背景颜色和背景图片来进行图片的设置，比如给一个div盒子，那么div盒子相关背景的属性可以设置以下：背景颜色：div {background-color: red;}，给div盒子设置一个红色背景颜色。背景图片：div {background-image: url(图片路径);}，给div盒子设置一个背景图片，背景图片我们一般给小背...
CSS中的盒子
秋叶夏风的博客
07-17 1740
盒子 盒子模型解释元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下： 把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。 盒子模型的尺寸 按照下面代码制作页面： <!DOCTYPE html> <...
CSS 盒子模型（box model）
小楼一夜听春雨，深巷明朝卖杏花
03-01 2703
盒子虽然变大了但是内容在往中间挤，中间的内容还是在盒子的左上角，剩下的是内边距帮你填充的。如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离。上下是一个值，左右是一个值。，它包括：外边距(margin)，边框(border)，内边距(padding)，和实际内容(content)。蓝色的是一个盒子，这是一个元素，这个元素包含内边距padding，边框和外边距。内容文字图片是实物，然后内边距，边框，外边距。
CSS网页盒子
Arcofcosmos的博客
01-20 988
网页盒子的组成部分 css中元素基本都可看做一个盒子，如div,p等标签都是盒子 一个盒子由以下几部分组成： border边框 content内容 padding内边距 //即边框与内容之间的距离 margin外边距 //边框与其它盒子边框之间的距离 border边框属性 border-width: 5px; //边框宽度 border-style: dotted;
CSS 盒子模型
m0_73403871的博客
07-01 138
注意：元素早期只分为：行内元素、块级元素，区分条件只有一条：“是否独占一行”，如果按照这种分类方式，行内块元素应该算是行内元素。内容区的宽度 = 父的 content - 自身的左右margin - 自身的左右border - 自身的左右padding。上面的兄弟元素的下外边距和下边的兄弟元素的上外边距会合并，取一个最大的值，而不是相加。优先级：元素默认样式 > 继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择到该元素。行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
css盒子模型
ChyiLongW的博客
02-23 95
1、盒子模型的定义 盒子模型是网页布局的基石。 从盒子的内部到盒子的外围分别是： 1、内容（图片、文本、视频、小盒子等…） 2、内填充（补白） 【相当于盒子里面的泡沫】 3、盒子本身（border） 4、外边距 盒子在页面中所占据位置部分：      内容+padding+border+margin的宽高 2、盒模型具体的css属性 内填充：pad...
理解CSS盒子模型：网页排版的核心
"CSS盒子模型是网页布局的基础，用于理解元素在网页中的空间占用和排列方式。在CSS中，每个HTML元素都可以被看作一个独立的盒子，包含内容区域（content）、内填充（padding）、边框（border）和外边距（margin）。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值