④HTML+CSS 盒子模型

系统管理员 2023-07-20 12:12 1阅读 0赞

### 盒子模型 ###

*  盒子 ※
 *   *  内容区
     *  内边距
     *  边框
     *  外边距
 *  盒子的水平布局 ※
 *  盒子的垂直布局 ※
 *  外边距的重叠
 *  行内元素的盒模型 ※
 *  默认样式 ※
 *  盒子的尺寸 ※
 *  轮廓和圆角 ※

--------------------

***本人是个新手，写下博客用于自我复习、自我总结。  
如有错误之处，请各位大佬指出。  
学习资料来源于：尚硅谷***

--------------------

# 盒子 ※ #

• CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。  
• 为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。  
• 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

• 一个盒子我们会分成几个部分：  
– 内容区(content)  
– 内边距(padding)  
– 边框(border)  
– 外边距(margin)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]

## 内容区 ##

• 内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。  
• 如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。  
• 通过width和height两个属性可以设置内容区的大小。  
• width和height属性只适用于块元素。

## 内边距 ##

• 顾名思义，内边距指的就是元素内容区与边框以内的空间。  
• 默认情况下width和height不包含padding的大小。  
• 使用padding属性来设置元素的内边距。  
• 例如：  
`padding:10px 20px 30px 40px`  
– 这样会设置元素的上、右、下、左四个方向的内边距  
`padding:10px 20px 30px;`  
– 分别指定上、左右、下四个方向的内边距  
`padding:10px 20px;`  
– 分别指定上下、左右四个方向的内边距  
`padding:10px;`  
– 同时指定上左右下四个方向的内边距

同时在css中还提供了padding-top、padding-right、paddingright、padding-bottom分别用来指定四个方向的内边距。

## 边框 ##

• 可以在元素周围创建边框，边框是元素可见框的最外部。边框里边属于盒子内部，出了边框都是盒子的外部。  
• 使用border属性来设置盒子的边框：  
`border:1px red solid;`  
– 上边的样式分别指定了边框的宽度、颜色和样式。 还可以使用下列方法设置：  
边框的宽度 `border-width`  
边框的颜色 `border-color`  
边框的样式 `border-style`

• 也可以使用`border-top/left/right/bottom`分别指定上右下左四个方向的边框。  
• 和padding一样，默认width和height不包括边框的宽度。  
• 边框的大小会影响到整个盒子的大小。

• 边框可以设置多种样式：  
– none（没有边框）  
– dotted（点线）  
– dashed（虚线）  
– solid（实线）  
– double（双线）  
– groove（槽线）  
– ridge（脊线）  
– inset（凹边）  
– outset（凸边）

## 外边距 ##

• 外边距是元素边框与周围元素相距的空间。  
• 使用margin属性可以设置外边距。  
• 用法和padding类似，同样也提供了四个方向`margin-top/right/bottom/left`  
• 当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，  
所以`margin-right: auto; 和 margin-left: auto;`可以使元素居中。

例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>盒模型</title>
        <style> .box1{ width: 200px; height: 200px; background-color: #bfa; /* border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求 还可以设置 border-top border-right border-bottom border-left */ border: 10px red solid; border-left: 10px solid red; border-top-width: 10px; border-left-width: 10px; /* border-color用来指定边框的颜色，同样可以分别指定四个边的边框 规则和border-width一样 同时，border-color也可以省略不写，如果省略了则自动使用color的颜色值 */ color: red; border-top-color: green; border-left-color: orange; /* border-style 指定边框的样式 border-style的默认值是none 表示没有边框 */ border-style: solid; /* 内边距（padding） - 内容区和边框之间的距离是内边距 - 一共有四个方向的内边距： padding-top padding-right padding-bottom padding-left - 内边距的设置会影响到盒子的大小 - 背景颜色会延伸到内边距上 一共盒子的可见框的大小，由内容区 内边距 和 边框共同决定， 所以在计算盒子大小时，需要将这三个区域加到一起计算 */ padding-top: 100px; padding-left: 100px; padding-right: 100px; padding-bottom: 100px; /* padding 内边距的简写属性 */ padding: 10px 20px 30px 40px; padding: 10px 20px 30px ; padding: 10px 20px ; padding: 10px ; /* 外边距（margin） - 外边距不会影响盒子可见框的大小 - 但是外边距会影响盒子的位置 - 一共有四个方向的外边距： margin-top - 上外边距，设置一个正值，元素会向下移动 margin-right - 默认情况下设置margin-right不会产生任何效果 margin-bottom - 下外边距，设置一个正值，其下边的元素会向下移动 margin-left - 左外边距，设置一个正值，元素会向右移动 - margin也可以设置负值，如果是负值则元素会向相反的方向移动 所以默认情况下如果我们设置的左和上外边距则会移动元素自身 而设置下和右外边距会移动其他元素 - margin的简写属性，用法和padding一样 */ margin-bottom: 100px; margin-top: -100px; margin-left: -100px; margin-right: 0px; margin: 100px; } .inner{ width: 100%; height: 100%; background-color: yellow; } </style>
    </head>
    <body>
         <div class="box1">
         	<div class="inner"></div>
         </div>
    </body>
    </html>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]

--------------------

# 盒子的水平布局 ※ #

元素的水平方向的布局：

元素在其父元素中水平方向的位置由以下几个属性共同决定  
margin-left  
border-left  
padding-left  
width  
padding-right  
border-right  
margin-right

一个元素在其父元素中，水平布局必须要满足以下的等式  
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 （必须满足）

如果相加结果使等式不成立，则称为**过度约束**，则等式会自动调整  
\- 调整的情况：  
如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足

如果某个值为auto，则会自动调整为auto的那个值以使等式成立

如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0

如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值

所以我们经常利用这个特点来使一个元素在其父元素中水平居中

例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>盒子的水平布局</title>
        <style> .outer{ width: 800px; height: 200px; border: 10px red solid; } .inner{ /* width: auto; width的值默认就是auto*/ width: 200px; height: 200px; background-color: #bfa; margin-right: auto; margin-left: auto; } </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>
    </html>

--------------------

# 盒子的垂直布局 ※ #

当相关标签里面的内容超出了样式的宽度和高度时，就会发生一些奇怪的事情，浏览器会让内容溢出盒子。这时可以通过`overflow`来控制内容溢出的情况。  
• 可选值：  
– visible：默认值 子元素会从父元素中溢出，在父元素外部的位置显示  
– scroll：添加滚动条，通过滚动条来查看完整的内容  
– auto：根据需要添加滚动条  
– hidden：隐藏超出盒子的内容

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>盒子的垂直布局</title>
        <style> .outer{ background-color: #bfa; height: 400px; } .inner{ width: 100px; background-color: yellow; height: 100px; margin-bottom: 100px; } .box1{ width: 200px; height: 200px; background-color: #bfa; overflow: auto; } </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner"></div>
            <div class="inner"></div>
        </div> 
    
        <div class="box1">
                在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。
        </div>
    </body>
    </html>

--------------------

# 外边距的重叠 #

例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>外边距的折叠</title>
        <style> .box1 , .box2{ width: 200px; height: 200px; font-size: 100px; } /* 垂直外边距的重叠（折叠） - 相邻的垂直方向外边距会发生重叠现象 - 兄弟元素 - 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值） - 特殊情况： 如果相邻的外边距一正一负，则取两者的和 如果相邻的外边距都是负值，则取两者中绝对值较大的 - 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理 - 父子元素 - 父子元素间相邻外边距，子元素的会传递给父元素（上外边距） - 父子外边距的折叠会影响到页面的布局，必须要进行处理 */ .box1{ background-color: black; /* 设置一个下外边距 */ margin-bottom: 100px; } .box2{ background-color: orange; /* 设置一个上外边距 */ margin-top: 100px; } .box3{ width: 200px; height: 200px; background-color: #bfa; border-top: 1px red solid; } .box4{ width: 100px; height: 100px; background-color: orange; margin-top: 50px; } </style>
    </head>
    <body>
    
        <div class="box3">
            <div class="box4"></div>
        </div>
    
        <div class="box1"></div>
        <div class="box2"></div>
        
    </body>
    </html>

--------------------

# 行内元素的盒模型 ※ #

`display`  
• 我们不能为行内元素设置width、height、margin-top和margin-bottom。  
• 我们可以通过修改display来修改元素的性质。  
• 可选值：  
– block：设置元素为块元素  
– inline：设置元素为行内元素  
– inline-block：设置元素为行内块元素  
– none：隐藏元素（元素将在页面中完全消失）

`visibility`  
• visibility属性主要用于元素是否可见。  
• 和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。  
• 可选值：  
– visible：可见的  
– hidden：隐藏的

例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>行内元素的盒模型</title>
        <style> .s1{ background-color: yellow; /* 行内元素的盒模型 - 行内元素不支持设置宽度和高度 - 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局 - 行内元素可以设置border，但是垂直方向的border不会影响页面的布局 - 行内元素可以设置margin，但是垂直方向的margin不会影响页面的布局 */ padding: 10px; border: 1px solid red; margin: 100px; } .box1{ width: 200px; height: 200px; background-color: black; } a{ /* display 用来设置元素显示的类型 可选值： inline 将元素设置为行内元素 block 将元素设置为块元素 inline-block 将元素设置为行内块元素 行内块，既可以设置宽度和高度又不会独占一行 table 将元素设置为一个表格 none 元素不在页面中显示 visibility 用来设置元素的显示状态 可选值： visible 默认值，元素在页面中正常显示 hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置 */ display: block; visibility: hidden; width: 100px; height: 100px; background-color: orange; } </style>
    </head>
    <body>
        <a href="javascript:;">超链接</a>
        <a href="javascript:;">超链接</a>
    
        <span class="s1">我是span</span>
        <span class="s1">我是span</span>
        
        <div class="box1"></div>
    </body>
    </html>

--------------------

# 默认样式 ※ #

例：  
![在这里插入图片描述][20200401212915400.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>默认样式</title>
        <link rel="stylesheet" href="./css/normalize.css">
        
        <style> /* 默认样式： - 通常情况，浏览器都会为元素设置一些默认样式 - 默认样式的存在会影响到页面的布局， 通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面） */ /* body{ margin: 0; } p{ margin: 0; } ul{ margin: 0; padding: 0; /*去除项目符号 * / list-style:none; } */ /* *{ margin: 0; padding: 0; } */ .box1{ width: 100px; height: 100px; border: 1px solid black; } </style>
    </head>
    <body>
        
    	<div class="box1"></div>
    
    	<p>我是一个段落</p>
    	<p>我是一个段落</p>
    	<p>我是一个段落</p>
    
    	<ul>
        	<li>列表项1</li>
        	<li>列表项2</li>
        	<li>列表项3</li>
    	</ul>
    
    </body>
    </html>

--------------------

# 盒子的尺寸 ※ #

--------------------

# 轮廓和圆角 ※ #

例：

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]: /images/20230528/7b7f13726ec34a5c9816da5fad282199.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]: /images/20230528/4bb01a4fada8431db5c72731a2c0a327.png
[20200401212915400.png]: /images/20230528/c85033fa35c5468fbe30ca3cf96f2ef2.png