CSS基础操作（五）-盒子模型（设置元素宽高、内边距、边框、外边距）

2022-06-04 03:56:00

4.4 盒子模型

4.4.1 什么是盒子模型？

　　盒子模型是所有HTML元素都有的一个模型特征，它规定了所有HTML元素都拥有的层级结构，以便修饰和定位HTML元素或相关的内容。

　　盒子模型定义如下几个内容：

元素宽高：width、height
内边距：padding
边框：border
外边距：margin

CSS基础操作（五）-盒子模型（设置元素宽高、内边距、边框、外边距）

4.4.2 设置盒子模型中元素宽高

　　元素宽高（width、height）作用：控制元素的大小

　　注意：块级元素可以修改宽高，行内元素不能修改宽高。

　　赋值两种方式：1、像素；2、上级元素百分比

4.4.3 设置盒子模型内边距/内填充

　　内边距（padding）作用：设置元素内容到边框的距离，这个距离会显示背景颜色或图片。

　　赋值方式：

padding-left/right/top/bottom：10px；单独某个方向
padding：10px； 4个方向
padding：10px 20px；上下10 左右20
padding：10px 20px 30px 40px；上右下左顺时针

测试代码：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>盒子模型：设置内边距</title>
 <style type="text/css">
 div{
   background-color:pink;
   /*图片大小为160px*160px*/
   width:160px;
   height:160px;
   /*
     设置左内边距
     padding-left:10px;
     
     设置右内边距
     padding-right:20px;
     
     设置上内边距
     padding-top:30px;
     
     设置下内边距
     padding-bottom:40px;
   */
   
   /*同时设置上下左右内边距*/
   /*padding:50px;*/
   
   /*赋两个值：第一个值是上下，第二个值是左右*/
   /*padding:30px 50px;*/
   
   /*赋四个值：依次是上上右下左，沿顺时针方向*/
   padding:10px 20px 30px 40px;
 }
 </style>
 </head>
 <body>
   <div>
     <img src="../image/003.jpg">
   </div>
 </body>
 </html>

显示效果：

CSS基础操作（五）-盒子模型（设置元素宽高、内边距、边框、外边距）

4.4.4 设置盒子模型边框

　　边框（border）作用：可以设置元素的边框，包括边框粗细、颜色样式等，让元素更美观。

　　赋值方式：

border：边框粗细、边框样式、颜色；---四个方向添加边框
- 边框样式：solid、dash、double、dotted
border-left/right/top/bottom：边框粗细、边框样式、颜色；---单独某个方向添加边框
border-radius：圆角；值越大越圆，当值大于宽高（包括边框）一半时为整圆

测试代码：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>盒子模型：设置边框</title>
 <style type="text/css">
 div{
   /*图片大小*/
   width:160px;
   height:160px;
   
   /*背景色*/
   background-color:red;
   
   /*内边距：始终被背景色覆盖*/
   padding:20px;
   
   /*边框：依次对应粗细、样式、颜色，四个方向都添加边框*/
   border:10px dotted blue;
   
   /*边框：可以单独设置某个方向添加边框*/
   /*border-right:5px solid green;*/
   
   /*设置边框圆角*/
   border-radius:8px;
 }
 </style>
 </head>
 <body>
   <div>
     <img alt="" src="../image/001.jpg">
   </div>
 </body>
 </html>

显示效果：

CSS基础操作（五）-盒子模型（设置元素宽高、内边距、边框、外边距）

4.4.5 设置盒子模型外边距

　　外边距（margin）作用：设置元素边框到上级元素或其它同级元素的距离，这个距离不会出现当前元素的背景，但是也计算在当前元素总的宽和高中。

　　赋值方式：

margin-left/top/right/bottom：单独给某一个方向添加外边距
margin：10px；给四个方向添加10个像素外边距
margin：10px 20px 30px 40px；上右下左，顺时针
margin：10px 20px；上下、左右
margin：0 auto；居中，无论如何缩放页面，该元素始终居中

（1）同级元素与同级元素之间

测试代码：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>盒子模型：同级元素设置外边距</title>
 <style type="text/css">
 /*body去除左侧、上侧空白*/
 body{
   padding:0;
   margin:0;
 }
 #d1{
   width:160px;
   height:160px;
   background-color:red;
   padding:10px;
   display:inline-block;
   
   /*四个方向都设置外边距*/
   margin:50px;
   /*margin:10px 20px 30px 40px;上右下左*/
   
   /*第一个值表示上下，第二个值表示左右*/
   /*margin:25px 45px;*/
   
   /*
     单独某个方向设置外边距
     margin-left:10px;
     margin-top:20px;
     margin-right:30px;
     margin-bottom:40px;
   */
 }
 #d2{
   width:160px;
   height:160px;
   background-color:blue;
   padding:10px;
   display:inline-block;
 }
 #d3{
   width:160px;
   height:160px;
   background-color:pink;
   padding:10px;
   margin:0 auto;
 }
 </style>
 </head>
 <body>
   <div id="d1">
     <img src="../image/001.jpg">
   </div>
   <div id="d2">
     <img src="../image/002.jpg">
   </div>
   <div id="d3">
     <img src="../image/003.jpg">
   </div>
 </body>
 </html>

注意：

 /*body去除左侧、上侧空白*/
 body{
   padding:0;
   margin:0;
 }

显示效果：

CSS基础操作（五）-盒子模型（设置元素宽高、内边距、边框、外边距）

（2）上级元素与下级元素之间（父子级）

测试代码：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>盒子模型：上级元素设置外边距</title>
 <style type="text/css">
 #parent{
   width:200px;
   height:200px;
   background-color:red;
   /*在父div和子div上边框重叠时，编写这个代码，解决粘连问题*/
   overflow:hidden;
 }
 #child{
   width:100px;
   height:100px;
   background-color:blue;
   /*margin-top:30px;*/
   /*
     子div在设置外边距时，会对他所在的父div产生影响，这种现象叫做外边距粘连
     （元素的上边缘和上级元素的上边缘重叠时，给元素加上外边距）
     解决方案：在父div的样式中添加：overflow:hidden;
   */
   margin:50px;
 }
 </style>
 </head>
 <body>
   <div id="parent">
     <div id="child"></div>
   </div>
 </body>
 </html>

显示效果：

a.出现粘连问题

CSS基础操作（五）-盒子模型（设置元素宽高、内边距、边框、外边距）

b.解决粘连问题

CSS基础操作（五）-盒子模型（设置元素宽高、内边距、边框、外边距）

c.测试案例

CSS基础操作（五）-盒子模型（设置元素宽高、内边距、边框、外边距）

测试代码：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>测试案例</title>
 <style type="text/css">
 #d1{
   width:200px;
   height:200px;
   background-color:red;
   margin-top:50px;
   margin-left:50px;
   overflow:hidden;
 }
 #d2{
   width:50px;
   height:50px;
   background-color:blue;
   margin-top:20px;
   margin-left:20px;
 }
 #d3{
   width:200px;
   height:200px;
   border:5px solid green;
   border-radius:10px;
   margin-left:250px;
   padding:30px 0 0 30px;
 }
 </style>
 </head>
 <body>
   <div id="d1">
     <div id="d2"></div>
   </div>
   <div id="d3">该吃饭了</div>
 </body>
 </html>

CSS基础操作（五）-盒子模型（设置元素宽高、内边距、边框、外边距）

码农公寓

4.4 盒子模型

4.4.1 什么是盒子模型？

4.4.2 设置盒子模型中元素宽高

4.4.3 设置盒子模型内边距/内填充

4.4.4 设置盒子模型边框

4.4.5 设置盒子模型外边距

相关文章