就CSS盒模型的几点认知

最新推荐文章于 2022-07-13 10:05:35 发布

KuangRenF

最新推荐文章于 2022-07-13 10:05:35 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/KuangRenF/article/details/104443632

版权

盒模型

概念：网页布局的基石，从盒子的内部到盒子的外围（内容内填充盒子本身外边距）

标准的盒模型：

在这里插入图片描述

盒模型具体的css属性

1.给盒子添加填充物（padding）

padding的用法：1.padding是长在内容和盒子之间的距离
				2.padding是长在盒子里面的
				3.padding的作用主要控制子元素在盒子内部的位子关系
				4.padding是添加在父元素上面的
				5.padding可以把盒子撑大！！
				（如果想让盒子保持原有大小，需要在宽高的基础上减掉padding！！
				注：如果一个盒子没有固定大小被内容撑开，添加padding不用减 ）
				6.单一方向上设置padding的值：
					padding-left：左
					padding-right：右
					padding-top：上
					padding-bottom：下
				7.padding的设置方法：
					padding：一个值      四周都是padding
					padding;两个值       上下     左右
					padding：三个值      上  左右    下
					padding：四个值      上   右  下   左 
				8.padding不会对背景图的位置造成影响。
				9.padding不能为负值

2.让两个盒子（同级的盒子）之间，产生一定的距离。盒子的周围产生间距。（margin）

margin的用法：1.margin是长在盒子外围的。
			2.margin控制当前的元素与其他同级的元素的位置关系。
			3.margin不会改变盒子的内部的大小。
			4.给元素的单一一个方向设置margin值
				margin-left:左
				margin-right:右
				margin-top:上
				margin-bottom:下
			5.margin设置方法
				margin：一个值        四周
				margin：两个值        上下     左右
				margin：三个值         上   左右   下
				margin：四个值         上  右  下   左
			6.margin是可以设置负值的！！
			7.margin常出现的bug:
					A:同级元素上下之间的margin的margin值，不会叠加，会重合，按照最大值设置。
					B:当父元素和第一个子元素都没有浮动，给第一个子元素添加margin-top：会错误的把margin-top添加在父元素上面	。

3.边框。（border）

    a: 默认情况下边框是长在元素宽高之外。
    b: 
        border:10px solid blue;  ( 复合式写法 )

        属性拆分：
        border-width:   边框大小
        border-color:   边框颜色
        border-style:   边框类型 
                （ 
                    solid 实线 
                    dashed 虚线
                    dotted 点状线
                    double  双线
                    none 没有线条
                ）
    c:单独一个方向设置边框：
        border-left:10px solid red;
        border-right:10px solid red;
        border-bottom:10px solid red;
        border-top:10px solid red;
    d:
        border-width/color/style : 
            属性值：
                1个值： 四周都添加边框
                2个值： 上下    左右
                3个值：  上    左右    下
                4个值：  上 右 下 左
    e:
        用边框画三角形：
            transparent  透明

4.盒子大小的计算

在这里插入图片描述

我们常常要控制盒子模型的宽度width:
w3c中的盒子模型的宽:包括margin+border+padding+width;
盒子整体的宽：width:margin2+border2+padding2+width;
盒子整体的高:height:margin2+border2+padding2+height;

盒模型的应用

在这里插入图片描述

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>这是一个标题</title>
        <style>
            /*通配符*/
            *{
                margin:0;padding:0;
            }
            div{
                width:350px;
                height:200px;
                background:darkcyan;
                padding:20px 40px 30px 60px;
            }
            p{
            width:100px;
            height:60px;
            background:rgb(77, 175, 64);
            margin:80px 40px;
            padding:20px 50px;
        }
        </style>
    </head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>