Python前端补充D4: 盒模型

Kuangquanshu1

已于 2023-03-11 15:10:48 修改

阅读量72

点赞数

文章标签：前端 css

于 2023-03-11 14:44:11 首次发布

本文链接：https://blog.csdn.net/Kuangquanshu1/article/details/129411284

版权

本文深入解析CSS盒模型，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)的详细用法。通过实例展示单例和多例样式的设置，并探讨了外边距合并的现象。最后，简要介绍怪异盒模型的特性。

摘要由CSDN通过智能技术生成

CSS 盒模型

盒模型: (英文名称: CSS Model), 网页由去多个矩形盒子搭建而成, 标签可以看成一个矩形盒子。

1.盒模型的构成

结构	属性名
内容区域	content	地核
内边距	padding	地幔
边框	border	地表
外边框	margin	星球与星球之间的距离

2.盒模型属性的使用

-1. 内容 content 属性:

width + height ; 盒模型大小由宽度高度来决定

宽 , 高的物单位:px
默认情况下: 盒子不设置高度, 默认的大小是由里面的文字内容撑开
块级元素: div , ul , li , p , h 等,不定义宽,就和浏览器使用一样的缩放比100%
行内元素: span , a , b , i , em , strong 等,这些行内标签暂时不能定义高度 ,高度是文本内容撑开的

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Content</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        span{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">div块级标签</div>
    <span id="txt">span行内标签</span>
</body>
</html>

运行效果

-2. 内边距 padding 属性

1) 内边距多例样式:

一个值: 上下左右: 10px -------------------------------------( padding: 10px; )
两个值: 上下:10px 左右:20px --------------------------------( padding: 10px 20px; )
三个值: 上:10px 左右:20px 下:30px ------------------------( padding: 10px 20px 30px; )
四个值: 上:10px 右:20px 下:30px 左:40px (顺时针) ----( padding: 10px 20px 30px 40px; )

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            padding: 10px 20px 30px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

盒模型

2) 内边距单例样式:

顶部内边距 ------ padding-top: 10px;
底部内边距 ------ padding-bottom: 20px;
左边内边距 ------ padding-left: 30px;
右边内边距 ------ padding-right: 40px;

-3. 边框

1) 速记

1.速记: 边框大小:10像素边框风格:实线边框颜色:红色

border: 10px solid red;

也可以将上面的代码拆开:

border-width: 10px;
border-style: solid;
border-color: read

2) 分解单边

2.分解: 实线(solid) 虚线(dashed) 点状线(dotted) 双实线(double)

       border-top: 5px solid red;
       border-bottom: 5px dashed green;
       border-left: 5px dotted red;
       border-right: 5px double green;

   /* 分解分: 例如顶部边框样式   不建议使用此方法 */
             border-top-width: 10px;
             border-top-style: solid;
             border-top-color: read;


```html
     实例:
         1) 只需要上边框样式
         border-top: 5px solid red;

         2) 只有下边框不需要样式
         border: 5px solid red;
         border-bottom: none;  取消下边框样式

取消下边框

-4. 外边距:

不会改变盒子大小, 只会移动盒子位置

1) 单例样式:

           margin-top: 50px;
           margin-bottom: 100px;
           margin-left: 150px;
           margin-right: 200px;

2) 多例样式:

一个值: 上下左右: 10px -------------------------------------( margin: 10px; )
两个值: 上下:10px 左右:20px --------------------------------( margin: 10px 20px; )
三个值: 上:10px 左右:20px 下:30px ------------------------( margin: 10px 20px 30px; )
四个值: 上:10px 右:20px 下:30px 左:40px (顺时针) ----( margin: 10px 20px 30px 40px; )

3) 外边距合并

自适应居中: 左右自适应居中, 但是上/下外边距会合并 ------ ( margin: auto; )

在这里插入图片描述

/*
外边距合并:
		1.继承级时, 上/下外边距会合并
			  解决方向: 父级添加
				   1> 使用边框 border
				          border: 1px solid red;
				   2> 使用内边距 padding
				   		  padding: 1px
		
		2.同级时, 左右外边距会合并
			  解决方向: 同级可在任意盒子添加
			  	   1> 添加行内块属性(display)
			  	   		  display: inline-block
*/

上下合并

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box_A{
            width: 500px;
            height: 500px;
            background-color: red;
            padding: 1px;
        }
        .box_a{
            width: 50%;
            height: 50%;
            background-color: green;
            margin: 125px auto;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: green;
            margin-bottom: 100px;
            display: inline-block;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 100px;
        }
    </style>
</head>
<body>

    <div class="box_A">
        <div class="box_a"></div>
    </div>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

3.怪异盒模型

1.开启怪异盒属性

box-sizing: content-box;  /* 默认为标准盒模型, 可省略 */ 
box-sizing: border-box;   /* 开启怪异盒模型          */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>怪异</title>
    <style>
        .box{
            box-sizing: border-box;  /* 开启怪异盒模型 */
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 20px;
            border: 20px solid brown;

            /*
            标准盒模型: 盒子扩大 (增加内边距 / 边框) 内容固定 
            内容区域: 200px + 内边距:20*2 + 边框:20*2 = 280px

            怪异盒模型: 盒子大小固定 缩减内容
            内容区域: 200px - padding*2 - border*2 = 120px
            */
        }
    </style>
</head>
<body>
    <div class="box">怪异盒模型</div>
</body>
</html>