理论讲解
边框(Border) 和 轮廓(Outline) 属性
盒子(Box) 属性
颜色(Color) 属性
| 属性 | 描述 | CSS |
| color-profile | 允许使用源的颜色配置文件的默认以外的规范 | 3 |
| opacity | 设置一个元素的透明度级别 | 3 |
| rendering-intent | 允许超过默认颜色配置文件渲染意向的其他规范 | 3 |
内边距(Padding) 属性
| 属性 | 说明 | CSS |
| padding | 在一个声明中设置所有填充属性 | 1 |
| padding-bottom | 设置元素的底填充 | 1 |
| padding-left | 设置元素的左填充 | 1 |
| padding-right | 设置元素的右填充 | 1 |
| padding-top | 设置元素的顶部填充 | 1 |
CSS border 属性 border: 8px solid rgb(248, 0, 54);
属性值
| 值 | 说明 |
| border-width | 指定边框的宽度 |
| border-style | 指定边框的样式 |
| border-color | 指定边框的颜色 |
| inherit | 指定应该从父元素继承border属性值 |
CSS padding 属性
padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。
实例:
padding:10px 5px 15px 20px;
上填充是 10px
右填充是 5px
下填充是 15px
左填充是 20px
padding:10px 5px 15px;
上填充是 10px
右填充和左填充是 5px
下填充是 15px
padding:10px 5px;
上填充和下填充是 10px
右填充和左填充是 5px
padding:10px;
所有四个填充都是 10px
同心圆
<!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>外边距</title> <style> div { margin: auto; width: 800px; height: 800px; border: 10px solid rgb(56, 135, 231); background-color: #e3edcd; border-radius: 50%; } span { display: block; /* margin: auto; 默认居中 */ /* margin-top: 12px; 盒子向下移动 */ margin-top: 42px; /* margin-bottom: 30px; */ /* margin-top: 12px; 盒子向右移动 */ margin-left: 48px; width: 700px; height: 700px; border: 8px solid rgb(248, 0, 54); /* background-color: aquamarine; */ text-align: center; line-height: 600px; border-radius: 50%; } span1 { border-radius: 50%; border: 8px solid rgb(250, 205, 5); display: block; height: 600px; width: 600px; margin-top: 40px; margin-left: 40px; } span2 { border-radius: 50%; border: 8px solid rgb(20, 181, 234); display: block; height: 500px; width: 500px; margin-top: 51px; margin-left: 40px; } /* 整理代码格式 shift+ait+F */ span3 { border-radius: 50%; border: 8px solid rgb(48, 180, 7); display: block; height: 400px; width: 400px; margin-top: 51px; margin-left: 40px; } span4 { border-radius: 50%; border: 8px solid rgb(214, 19, 133); display: block; height: 300px; width: 300px; margin-top: 51px; margin-left: 40px; } span5 { display: block; border-radius: 50%; border: 8px solid rgb(12, 175, 230); height: 200px; width: 200px; margin-top: 51px; margin-left: 40px; } span6 { display: block; border-radius: 50%; border: 8px solid rgb(5, 235, 101); height: 100px; width: 100px; margin-top: 51px; margin-left: 40px; } span7 { line-height: 0; text-align: center; display: block; border-radius: 50%; border: 8px solid rgb(7, 7, 7); height: 0px; width: 0px; margin-top: 51px; margin-left: 40px; } </style> </head> <body> <marquee behavior="" direction="">同心圆</marquee> <div> <!-- 大的盒子 --> <span> <!-- 我是大盒子中的span标签 --> <span1> <span2> <span3> <span4> <span5> <span6> <span7> </span7> </span6> </span5> </span4> </span3> </span2> </span1> </span> </div> </body> </html>
同心圆的制作
Css的内容学习盒子模型
<!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>Css的内容学习盒子模型</title> <style> body{ padding: 0; margin: 0px; } div { background-color: rgba(114, 235, 205, 0.582); color: black; width: 300px; border: 20px solid rgb(15, 216, 15); padding: 25px; margin: 25px; } </style> </head> <body> <marquee behavior="" direction="">Css的内容学习盒子模型</marquee> <hr color="red"> <!-- 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 --> <h2>盒子模型演示</h2> <p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p> <div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div> <div style=" border:2px solid red ; border-style:solid; border-width: 12px; "> 我是第一个盒子 </div> <style> .div2{ height: 200px; width: 300px; border-bottom-color:rgb(130, 9, 31) ; border-top-color:antiquewhite ; border-left-color:rgb(20, 161, 32) ; border-right-color:rgb(145, 88, 14) ; } </style> <div class="div2"> 我是第二个盒子 </div> <style> .div3{ height: 400px; width: 400px; border-left-style: dotted; border-right-style: dashed; /* border-style: inherit; */ border-top-style: double; } </style> <div class="div3"> 我是第三盒子 </div> <style> .div4{ height: 300px; width: 200px; /* 样式 */ border-left-style:solid; /* 宽度 */ border-left-width: 40px; /* 色彩 */ border-color: rgb(234, 27, 82); } </style> <div class="div4"> 我是第四个盒子 </div> <style> .div5{ height: 500px; width: 600px; border: 40px double rgb(150, 20, 20); /* 外扩线 所有CSS 轮廓（outline）属性 */ outline:#2c16ce dotted thick; outline-style: dotted; outline-width: 20px; outline-color: aquamarine; } </style> <div class="div5"> 我是第五个盒子 </div> </body> </html>
盒子模型
