0
点赞
收藏
分享

微信扫一扫

【CSS盒子模型学习】

戴老师成长记录仪 2022-04-21 阅读 30
css

css盒子模型

一、什么是盒子模型？

在这里插入图片描述       所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
上面的图片说明了盒子模型(Box Model)：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

二、盒子模型详解

1、盒子模型的标签

2、盒子模型的常用属性

(1)第一部分

属性 属性值说明
width ： 宽度；
height： 高度 ；
border-style ： 上边 [右边 下边 左边]; （边框线的样式）
border-width ： 边框宽度,单位是像素;
border-color ： 边框线的颜色; (颜色名/rgb(r,g,b)/rgba(r,g,b,a)/#rrggbb #rgb)
border-bottom-left-radius: 像素值或百分比；（表示的是圆角左下边框）
border-top-left-radius: 像素值或百分比；（表示的是圆角左上边框）
border-bottom-right-radius: 像素值或百分比；（表示的是圆角右下边框）
border-top-right-radius: 像素值或百分比；（表示的是圆角右上边框）
padding-top : 上填充
padding-right : 右填充
padding-bottom : 下填充
padding-left : 左填充
margin-top: 上边界(边距）
margin-right: 右边界(边距）
margin-bottom: 下边界 (边距）
margin-left: 左边界(边距）

示例1：
①代码展示：

<!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>
<style>
    #pt{
    height: 150px;
    width:150px;
    /* background-color: red; */
    /* border-style: solid;
    border-width: 2px;
    border-color: rgb(255,0,0); */
    /* 综合写法： 线型 线宽 线颜色（必须用空格隔开）*/
    border: solid 1px #f00;
    border-radius: 10%;
    /* border-bottom-left-radius: 30%; */

    /* 比较推荐上下左右内边距分开写，不容易乱 */
    padding-left: 20px;
    padding-top: 20px;
    /* 内边距综合写法： */
    /* padding:10px 四边的内边距都为10px; */
    /* padding: 10px 5px;上下为10，左右为5 */
    /* padding:5px 3px 4px;上边距为5px,左右为3px,下边距为4px */
    }
</style>
<body>
    <div id="pt">
        <p>西安邮电大学</p>
        <p>西安工业大学</p>
    </div>
</body>
</html>

②页面展示：
在这里插入图片描述
示例2
①代码展示：

<!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>
<style>
    *{
        padding:0;
        margin:0;
    }
    #header{
        height: 100px;
        /* margin:0 auto; */
        background-color: aqua;
    }
    #main{
        height:800px;
        width: 80%;
        margin: 2px auto;
        background-color: rgb(237, 168, 118);

    }

</style>
<body>
    <div id="header"></div>
    <div id="main"></div>
</body>
</html>

②页面展示：
在这里插入图片描述

(2)第二部分

属性 属性值说明
background-color： 背景颜色
background-image： 背景图像
background-repeat： 背景的平铺属性
background-position： 背景图像的位置
background-attachment: 背景图像定位

注：个别属性详解

示例一
①代码展示：

<!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>
<style>
     #p1{
        width: 300px;
        height: 300px;
        /* background-color: red; */
        background-image: url("../images/1.gif");
        border: solid 1px red;
       /* 背景的平铺属性 */
        background-repeat: no-repeat;   /*不平铺*/
        /* background-repeat: repeat-x; 水平平铺*/
        /*background-repeat: repeat-y; 垂直平铺 */
        background-position: center;    
        /* 背景图像不动，不随页面元素来改变 */
       /* background-attachment: fixed; */
    } 
</style>
<body>
    <div id="p1"></div>  
</body>
</html>

②页面展示：
在这里插入图片描述
综合设置背景图像：background:背景色 url(“图像”)平铺 定位 固定；（之间用空格隔开）

示例二（综合上述示例一写法）
①代码展示：

<!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>
<style>
    #p1{
        width:300px;
        height:300px;
        border: solid 1px red;
        background:white url("../images/1.gif") no-repeat center ;
    }
</style>
<body>
    <div id="p1"></div>  
</body>
</html>

②页面展示：
在这里插入图片描述

(3)第三部分

属性 属性值说明
opacity ： 设置背景和图片的透明度。取值在0~1之间（值越小越透明）
border-radius : 圆角边框
box-shadow： 阴影效果

示例:
①代码展示：

<!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>
<style>
  img{
        /* 设置背景图片的和背景的透明度。取值在0-1之间，越小越透明 */
        /* opacity: 0.5; */
        margin-top: 15px;
        border-radius: 50%;
        /* border:solid 1px #f00; */
        /* inset用来设置对象的阴影是内阴影，默认为外阴影 */
        box-shadow:5px 5px 20px 2px #999 ,-5px -5px 10px 2px #333;
    }
</style>
<body>
    <img src="../images/001.png" alt="" width="300"height="300">
</body>
</html>

②页面展示：
在这里插入图片描述

(4)第四部分

线性渐变：linear-gradient()

示例1（线性渐变）：
①代码展示：

<!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>
<style>
  #p2{
        width: 300px;
        height:250px;
        margin-top: 15px;
        /* 线性渐变 to top（从下网上）*/
        background:linear-gradient(to top, rgb(235, 228, 229) ,rgb(113, 212, 212));
        }
</style>
<body>
    <div id="p2"></div>
</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>Document</title>
</head>
<style>
  #p2{
        width: 300px;
        height:250px;
        margin-top: 15px;
        /* 渐变方向：从左往右
            起始颜色：Blue
            green 20%：当过渡到20%，颜色为绿色
             yellow 50%：当过渡到50%，颜色为黄色
              purple 80%：当过渡到80%，颜色为紫色
        */
        background: linear-gradient(to right,blue,green 20%,yellow 50%,purple 80%,red);
        }
</style>
<body>
    <div id="p2"></div>
</body>
</html>

②页面展示：
在这里插入图片描述径向渐变：radial-gradient()

示例1：
①代码展示：

<!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>
<style>
     #p3{
        width: 300px;
        height: 300px;
        margin-top: 15px;
        /* 径向渐变 */
        /* background: radial-gradient(circle,#f00,#ff0,#080); */
        /* 60px:表示渐变的大小。(宽度和高度都为60px)当圆心位置,渐变大小、渐变大小的值相同时，表示渐变形状是圆形的渐变。
           #f00 0:表示起始渐变色为#f00
           #ff0 100%:结束渐变色为#ff0
        */
        background: radial-gradient(60px,#f00 0,#ff0 100%);
    }
</style>
<body>
    <div id="p3"></div>
</body>
</html>

②页面展示：
在这里插入图片描述示例2：
①代码展示：

<!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>
<style>
   #p4{
        /* 100px 60px:表示传入两个不同的size值宽度 高度，渐变形状是椭圆。 */
        width: 300px;
        height: 300px;
        margin-top: 15px;
        background: radial-gradient(100px 60px,#f00 0,#ff0 100%);

    }
</style>
<body>
    <div id="p4"></div>
</body>
</html>

②页面展示：

在这里插入图片描述
重复的线性渐变：repeating-linear-gradient()
示例：
①代码展示：

<!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>
<style>
   #p5{
        width: 300px;
        height: 300px;
        margin-top: 15px;
        /* 渐变方向：默认值（180deg,即从上到下）
        #f00 0,#ff0:表示0~10%为#f00
        #ff0 10%,#ff0 20%:表示10%~20%为#ff0然后一直重复，直至充满整个div
         */
        background: repeating-linear-gradient(45deg, #f00 0,#f00 10%,#ff0 10%,#ff0 20%);

    }
</style>
<body>
    <div id="p5"></div>
</body>
</html>

②页面展示：
在这里插入图片描述重复的径向渐变：repeating-radial-gradient()

示例：
①代码展示：

<!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>
<style>
   #p6{
        width: 300px;
        height: 300px;
        margin-top: 15px;
        /* circle at center:表示圆心在中间
          #f00 0,#ff0:表示0~10%为#f00
        #ff0 10%,#ff0 20%:表示10%~20%为#ff0然后一直重复，直至充满整个div */
        background: repeating-radial-gradient(circle at center,#f00 0,#f00 10%,#ff0 10%,#ff0 20%);

    }
</style>
<body>
    <div id="p6"></div>
</body>
</html>

②页面展示：
在这里插入图片描述

(5)第五部分

图像属性

示例：
①代码展示：

<!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>
<style>
     #p1{
        width: 200px;
        height: 200px;
        padding: 20px;
        border: solid 5px red;
        background-image: url(../images/001.png);
        background-repeat: no-repeat;
        /* background-size: contain; */
        /* 背景图像在容器中的相对位置 */
        /* background-origin: border-box; 背景图像会延伸到边框线的下面 */
        /* background-origin: content-box; 背景图像在内容框里出现，距离边框线还有20px. */
        /* background-origin: padding-box;背景图像延伸到padding区域 */
        /* 设置背景图像的裁剪区域 */
        background-clip: content-box;
        /* background-clip:border-box; */
        /* background-clip: padding-box; */

    }
</style>
<body>
    <div id="p1"></div>   
</body>
</html>

②页面展示：
在这里插入图片描述

举报

相关推荐

CSS学习34：盒子模型

前端学习css3css

【CSS】——盒子模型

盒子模型div+csscss编程语言

【css盒子模型】

csscss3html

css盒子模型

html前端android studio

CSS - 盒子模型

CSS前端盒子模型扩展知识css虚拟化云计算

CSS盒子模型

csscss3html

盒子模型——CSS

css3

CSS学习笔记----盒子模型

css学习css3

Css盒子模型

css前端

CSS 盒子模型

htmlcssHTML
0 条评论