WEB01_Day02(下)-CSS控制元素背景（颜色赋值、常用背景样式）、CSS控制元素显示方式（定义、相关属性、常见元素显示方式）、盒子模型（元素宽高、内边距）

一、CSS控制元素背景

1.1 颜色赋值

　　美术中的三原色：红、黄、蓝

　　计算机中的三原色：红(r)、绿(g)、蓝(b)

　　颜色表示的方式：

  • 颜色的英文单词(开发中不常用)

  • 3位10进制表示：rgb(0,255,0) (开发中不常用)

  • 4位10进制表示：rgb(0,255,0,0~1)第四个参数表示透明度，值越小越透明(相比较上面的方案用的会多点)

  • 6位16进制表示：#ffffff(开发中经常使用)

  • 3位16进制表示：#fff(开发中不常用)

颜色推荐网站：https://tool.oschina.net/commons?type=3

1.2 常用背景样式

  • 设置背景图片:background-image:url("路径");

  • 设置背景图片宽高:background-size:200px 300px;

  • 设置重复方式:background-repeat:no-repeat

  • 设置背景图片的位置:background-position: 50% 80%;

 <!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>背景样式设置01</title>
     <style type="text/css">
         /* CSS注释 */
         div {
             /* 
              
             color: azure; 
             */
             background-color:#C6E2FF; 
             color:#FF1493; 
         }
         p {
             background-color:#00F; 
             /* color:rgb(12, 200, 100);  */
             color:rgba(12, 200, 100 ,0.5);
         }
         #img {
             background-color: #FFEFD5;
             /* 设置div块级元素的宽高(所有的块级元素均可设置宽高) */
             width: 1200px;
             height: 700px;
             /* 设置背景图片 */
             background-image: url("../img/1.jpg");
             /* 设置背景图片是否重复 */
             background-repeat: no-repeat;
             /* 设置背景图片填充整个div */
             /* background-size:1200px 700px; */
             /* background-size:100% 100%; */
             
             /* 
             设置div中图片显示的位置 
             left 水平居左，垂直居中
             right 水平居右，垂直居中
             top 水平居中，垂直居上
             bottom 水平居中，垂直居下
             center 水平和垂直居中
             */
             /* background-position: bottom right; */
             background-position:50% 50%;
         }
     </style>
 </head>
 <body>
     <!-- HTML注释 -->
     <div>
         这是一个div块级元素
     </div>
     <p>
         这是一个p段落标签
     </p>
     <div id="img">
         在div中添加背景图片
     </div>
 </body>
 </html>

1.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>背景样式设置02</title>
     <style type="text/css">
         /* 块级元素可以设置宽高，行内元素不可以设置宽高 */
         #d1 {
             width: 700px;
             height: 350px;
             background-color: #aabbcc;
             background-image: url("../img/1.jpg");
             background-repeat: no-repeat;
             background-size: 533px 300px;
             background-position: center;
         }
         #d2 {
             width: 843px;
             height: 336px;
             background-color: #21fbc4;
             background-image: url("../img/2.jpg");
             background-repeat: no-repeat;
             background-size: 70% 70%;
             background-position: 100% 100%;
         }
     </style>
 ​
 </head>
 <body>
     <div id="d1"></div>
     <hr>
     <div id="d2"></div>
 </body>
 </html>

 

二、CSS控制元素显示方式

2.1 定义

　　元素的显示方式通常指是否独占一行或是否以块状占位,或者是否可见等

2.2 设置使用的相关属性

　　可以通过设置display属性来实现

2.3 常见的元素显示方式

  • block:块级元素的默认值

特点:独占一行可以修改宽高 包括:h1-h6、p、div

  • inline:行内元素默认值

特点:共占一行不可以修改宽高 包括:span、b、i、超链接a、small

  • inline-block:行内块元素默认值

特点:既共占一行又可以修改宽高 包括:图片img 

 <!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>元素显示方式01</title>
     <style type="text/css">
         div {
             /* 块级元素允许设置宽和高 */
             width: 300px;
             height: 100px;
             background-color: #4b30e4;
             /* 设置显示方式为行内以后，上面设置的宽高失效 */
             /* display: inline; */
         }
         span {
             width: 120px;
             height: 100px;
             /* 行内块共占一行，可以设置宽和高 */
             background-color: sandybrown;
             /* 设置显示方式为行内块 */
             display: inline-block;
         }
 ​
     </style>
 ​
 </head>
 <body>
     <div>这是第一个块级元素</div>
     <div>这是第二个块级元素</div>
     <div>这是第三个块级元素</div>
     <div>这是第四个块级元素</div>
 ​
     <span>这是第一个行内元素</span>
     <span>这是第二个行内元素</span>
     <span>这是第三个行内元素</span>
     <span>这是第四个行内元素</span>
 </body>
 </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>元素显示方式02</title>
     <style type="text/css">
         div {
             width: 218px;
             height: 218px;
             /* 设置div块级元素显示方式为行内块 */
             display: inline-block;
         }
 ​
         #d1 {
             background-image: url("../img/01.jpg");
         }
         #d2 {
             background-image: url("../img/02.jpg");
             /* 显示方式设置为none */
             display: none;
         }
         #d3 {
             background-image: url("../img/03.jpg");
         }
     </style>
 </head>
 <body>
     <div id="d1"></div>
     <div id="d2"></div>
     <div id="d3"></div>
 </body>
 </html>

 

三、盒子模型

3.1 定义

　　盒子模型是所有标签(HTML元素)都拥有的模型特征。盒子模型中规定所有标签拥有的层级结构，使用盒子模型可以进行对标签元素进行修饰和定位处理。如图所示：

  • 元素的宽和高

  • 元素的内边距

  • 元素的边框

  • 元素的外边距

3.2 盒子模型：元素宽高

　　盒子模型中使用宽和高进行控制元素的大小。如果需要对于元素的大小进行赋值，可以使用像素px进行赋值，也可以使用百分比的方式进行赋值(对上级元素进行百分比设置赋值)

注意：块级元素可以进行设置宽和高，行内元素不可以设置宽和高，行内块可以进行设置宽和高

3.3 盒子模型：内边距

  • 表示方式：padding

  • 作用：用来表示元素内容到边框之间的距离

  • 赋值的方式：

    • padding:5px; 表示上下左右四个方向的内边距值为5像素。

    • padding:10px 5px; 表示上下的像素值为10像素，左右的像素值为5像素。

    • padding:1px 2px 3px 4px; 表示顺时针方位(上右下左)的内边距的值分别为1、2、3、4像素

    • padding-left/right/top/bottom:3px; 表示距离单独的某一个方位的内边距像素值为3像素。

  • 特征：内边距这个范围内是可以显示颜色或者图片。

 

posted @ 2021-08-07 23:10  Coder_Cui  阅读(125)  评论(0)  编辑  收藏  举报