CSS：盒子模子

盒子的概念

我的的HTML的网页结构是利用一种矩形的方式来作为根本，先设立一段矩形，然后往这个矩形中添加我们所需的内容，从而到达我们对网页的结构。
边框的构成

在后面的内容中，我们会对边框的巨细，内边距，外边距巨细的控制举行讲授 
我们来用<div></div>来查察一下

我们可以发现<div></div>所占用的边框和<html></html>占有的边框差别，<html></html>包罗了<div></div>的边框，这种边框在CSS内里称为盒子
盒子的控制

我们可以通过<style></style>来控制盒子的巨细，位置，风格
一样平常我们的盒子我们是看不到的，但是我们可以通过修改参数来使盒子更加直观
边框巨细的控制

border-style

border-style用于界说盒子的边框，一样平常默认是不会表现的。
利用格式

2. border-style:solid;

复制代码

border-style常用参数有以下几种

模式	作用
soild	边框实线
dotted	边框点线
dashed	边框虚线
groose	边框细线

这里的border-style另有别的的参数，我们就不一 一演示了
 border-color

border-color用于界说边框的颜色，一样平常默认是玄色。
利用格式

2. border-color: red;

复制代码

border-color参数没有什么特殊的，就是颜色，会懂得每个颜色的英文名是什么就可以直接用了
border-width

border-width用于界说边框的粗细。单位是px，一样平常默认单位是2px
利用格式

2. border-width: 2px;

复制代码

border 

border用于对边框设置的简写，有三个参数，誊写必须有序
利用格式

2. border: 2px black solid;

复制代码

这里我们收缩篇幅只演示一下border的用法代码
演示代码

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>        .One{            
2. border: 2px black solid;        }    </style></head><body>    <div class="One">        !!!Hello,World!!!        !!!Hello,World!!!    </div></body></html>

复制代码

演示结果

 内边距巨细的控制

内边距就是文本内容和边框在边框内部隔断的隔断
利用格式

2. padding: 2px;
3. padding-left: 2px;
4. padding-top: 2px;
5. padding-right: 2px;
6. padding-bottom: 2px;

复制代码

此中下面四个格式是用来修改某个方向的内边框距，padding是修改全部方向的内边框隔断 
欣赏器提供了用于我们观察盒子数据的调试
 

在这张图中，我们可以看到内边距全都为'-'也就是零 ，而这里的本文和边框的隔断是零
当我们将全部内边框隔断修改为10px时，演示结果如下

 

 这里的内边距被修改成了10，但是修改的代价时边框变大了，文本是不会变小的 
 CSS盒子范例content-box和border-box

改变盒子范例格式

2. box-sizing: border-box;

复制代码

content-box：保持文本部门的盒子巨细稳定，更改内边距的巨细时，通过改变团体边框的巨细来给改变内边距提供空间
border-box：保持团体边框巨细稳定，通过改变本文边框的巨细来给改变内边框巨细提供条件
注意，利用border-box模式时，必须设置好边框的巨细，否则照旧content-box模式
 外边距巨细控制

外边距巨细控制利用到的是margin，控制单位为px
利用格式

2. margin:2px

复制代码

 这里我们就来展示一下margin的利用示例就可以了吧

这里当我们将margin的参数调大时，文本边框的间距也会跟着调大，而且它们相互之前还会发生嵌套
嵌套块元素垂直外边距塌陷
当我们界说全局外边距时，黑白常容易有这种嵌套发生的，通常这种情况容易出现错误
演示代码

2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>Document</title>
8.     <style>
9.         .One{
10.             height: 200px;
11.             width: 200px;
12.             background-color: aqua;
13.             margin: 40px;
14.         }
15.         .two{
16.             height: 50px;
17.             width: 50px;
18.             background-color: black;
19.             margin: 20px;
20.         }
21.     </style>
22. </head>
23. <body>
24.     <div class="One"><div class="two"></div>
25.     </div>
26. </body>
27. </html>

复制代码

演示结果

这内里的玄色地区并没有和外面的蓝色地区保持外边距为20px 这就是塌陷的情况
对于两个嵌套的父子块元素，当他们都有上外边距时，父块元素会选择它们两此中一个最大的值作为它的上外边距，而子块元素的上外边距为0
 碰到这种问题有两种办理方式
1.删除字块元素的上外边距，父块元素设置边框巨细
2.删除子块元素的上外边距，父块元素设置内边距巨细
演示代码

2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>Document</title>
8.     <style>
9.         .One{
10.             height: 180px;
11.             width: 180px;
12.             background-color: aqua;
13.             border: 20px aqua solid;
14.         }
15.         .two{
16.             height: 50px;
17.             width: 50px;
18.             background-color: black;
19.         }
20.     </style>
21. </head>
22. <body>
23.     <div class="One"><div class="two"></div>
24.     </div>
25. </body>
26. </html>

复制代码

演示结果

演示代码

2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>Document</title>
8.     <style>
9.         .One{
10.             height: 200px;
11.             width: 200px;
12.             background-color: aqua;
13.             padding: 20px;
14.         }
15.         .two{
16.             height: 50px;
17.             width: 50px;
18.             background-color: black;
19.         }
20.     </style>
21. </head>
22. <body>
23.     <div class="One"><div class="two"></div>
24.     </div>
25. </body>
26. </html>

复制代码

演示结果

盒子相干属性 

border-radius 

border-radius可以修改盒子的弧度，
利用格式

2. border-radius: 10%;

复制代码

有两种参数，分别是数值型和百分数型
百分数型范围0%~50%
数值型范围为0~120
演示代码

2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>Document</title>
8.     <style>
9.         .One{
10.             height: 200px;
11.             width: 200px;
12.             border-radius: 50%;
13.             background-color: aqua;
14.             padding: 20px;
15.             display: inline-block;
16.         }
17.     </style>
18. </head>
19. <body>
20.     <div class="One"></div>
21. </body>
22. </html>

复制代码

演示结果

 border-shadow

border-shadow可以用来给盒子添加阴影，而且修改阴影的属性
利用格式

2. box-shadow:h-shadow v-shadow blur spread color/insert

复制代码

• h-shadow：阴影的横向位置
  
• v-shadow：阴影的纵向位置
  
• blur：阴影的含糊水平
  
• spread：阴影的扩散范围
  
• color：阴影的颜色
  
• inset：向内阴影 
  

演示代码

2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>Document</title>
8.     <style>
9.         .One{
10.             height: 200px;
11.             width: 200px;
12.             border-radius: 50%;
13.             background-color: aqua;
14.             padding: 20px;
15.             display: inline-block;
16.             box-shadow: 20px 10px 3px -1px red;
17.         }
18.     </style>
19. </head>
20. <body>
21.     <div class="One"></div>
22. </body>
23. </html>

复制代码

 演示结果

内部阴影演示代码

2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>Document</title>
8.     <style>
9.         .One{
10.             height: 200px;
11.             width: 200px;
12.             border-radius: 50%;
13.             background-color: aqua;
14.             padding: 20px;
15.             display: inline-block;
16.             box-shadow: 20px 10px 10px -10px red inset;
17.         }
18.     </style>
19. </head>
20. <body>
21.     <div class="One"></div>
22. </body>
23. </html>

复制代码

演示结果