第二次作业

听风说她会来

于 2024-07-12 23:06:22 发布

阅读量145

点赞数 6

文章标签： html css

本文链接：https://blog.csdn.net/2302_81701990/article/details/140389566

版权

<!DOCTYPE html> <html lang="en"> <head>
    <meta charset="UTF-8">	
    <title>zy2</title>	
 <style>
    div{
        width: 800px; height: 40px;
        border: 1px solid	■black ;	
        border-radius: 10px 10px 10px 10px ;
        box-shadow: 0px 0px 10px 0px rgb(188, 174, 174);
        background-color:rgb(45, 40, 40);}
       

  	
    li{	
    display: inline-block;	
    font-size: 20px;	
    color: aliceblue;	

}
    li:hover{	
    color:	brown;	
	}	
    </style>
</head>
<body>	
    <div align="center"	>	
    <li>游戏1</li>	
    <li>游戏2</li>	
    <li>游戏3</li>	
    <li>游戏4</li>	
    <li>游戏5</li>	
    <li>游戏6</li>	
    <li>游戏7</li>	
 	<li>游戏8</li>	
 	<li>游戏9</1i>	
 	</div>	
 
 	</body>	
 	</html>

1.盒子模型

盒子模型的主要组成部分包括以下几个方面：

内容区域（Content）：指的是元素内部的实际内容，比如文字、图片或其他嵌套的元素。内容区域的大小由元素的 width 和 height 属性决定。

内边距（Padding）：内边距是内容区域与边框之间的空间，用于控制元素内部内容与边框之间的距离。可以使用 padding 属性来设置内边距的大小，是透明的。

边框（Border）：边框是围绕在内容区域和内边距外部的线条，用于界定元素的边界。可以使用 border 属性来设置边框的样式、宽度和颜色。

外边距（Margin）：外边距是边框外部的空白区域，用于控制元素与其他元素之间的距离。可以使用 margin 属性来设置外边距的大小，是透明的。

2.内容区域

作用:利用width和height属性设置内容区域的大小,默认是盒子内容区域的大小
属性值:width和height
取值:数字+px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .div {
          width: 200px;
           height: 200px;
      }
    </style>
</head>
<body>
    <div class="div">这是一个div</div>
</body>
</html>

如图

3.内边距

属性名:padding

取值:数字+px

padding可以当作复合属性来使用,可以给单独的方向设置内边距,最多取4个值(上下左右)

取值个数	效果
1个	给上下左右同时设置相同的内边距
4个	分别对应盒子的上右下左 (顺时针的顺序)
3个	对应盒子的上左右下
2个	对应盒子的上下左右

4.边框

属性名:border (这是一个复合属性)

属性值:数字+px 线条的种类颜色(不分先后顺序) 

线条的种类有两个最常用的: solid(实线) dashed(虚线)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div {
          width: 200px;
          height: 120px;
          border: 10px solid red;
      }
    </style>
</head>
<body>
    <div>这是一个div</div>
</body>
</html>

border也可以给指定的方向设置边框

写法:border-方位名词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div {
          width: 200px;
          height: 120px;
          border-left: 3px solid red;
      }
    </style>
</head>
<body>
    <div>这是一个div</div>
</body>
</html>

4.外边距

外边距和内边距的写法一样,可以给四个方向都设置外边距,也可以给单独的方向设置外间距
取值的个数效果都是一样的.掌握内边距的写法,外边距就很容易了

听风说她会来

关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
第二次作业

内边距（Padding）：内边距是内容区域与边框之间的空间，用于控制元素内部内容与边框之间的距离。内容区域（Content）：指的是元素内部的实际内容，比如文字、图片或其他嵌套的元素。外边距（Margin）：外边距是边框外部的空白区域，用于控制元素与其他元素之间的距离。作用:利用width和height属性设置内容区域的大小,默认是盒子内容区域的大小。外边距和内边距的写法一样,可以给四个方向都设置外边距,也可以给单独的方向设置外间距。取值的个数效果都是一样的.掌握内边距的写法,外边距就很容易了。
复制链接

扫一扫