css盒模型

最新推荐文章于 2024-08-09 11:41:07 发布

no_name_sky

最新推荐文章于 2024-08-09 11:41:07 发布

阅读量65

点赞数

分类专栏： css 前端 html 文章标签： css html html5

本文链接：https://blog.csdn.net/no_name_sky/article/details/117928027

版权

前端同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

盒模型介绍

盒模型有五个属性：

内边距 padding
外边距 margin
边框 border
高度 height
宽度 width
用月饼来解释一下这几个属性：

将上图降为一个二维来看，月饼袋子到黄色壳子之间的距离a是外边距(margin)
。黄色壳子e就是边框(border).黄色壳子到月饼之间的距离b就是内边距(padding)。
月饼的高度c和宽度d就是内容的高度(height)和宽度(width)也就是能吃的那一部分大小)。
结合代码来看：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.box{
            width:200px;  // 月饼能吃的部分宽度
            height:200px;  // 月饼能吃的部分的高度
            padding:20px;  // 月饼和黄色壳子之间的距离
            border:1px solid red;  // 月饼黄色壳子
            margin:10px;  // 月饼黄色壳子和包装袋之间的距离
        }
    </style>
</head>
<body>
<div class="box">
    <div>
        <p>
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </p>
    </div>
</div>

</body>
</html>

样式：
在这里插入图片描述

盒模型的真实高度和宽度

盒模型的真实高度宽度不是height和width设置的，height和width设置的仅仅是月饼的大小，而真实高度和宽度是算上包装袋的大小。
真实宽度：左外边距+左边框+左内边距+月饼宽度+右内边距+右边框+右外边距
真实高度：上外边距+上边框+上内边距+月饼高度+下内边距+下边框+下外边距

padding属性

padding的区域是有背景颜色的，与内容的颜色保持一致。也就是说background-color会这是border以内的颜色。
设置的是内边距的距离，内边距有四个方向上、右、下、左（顺时针），设置其有两个方式：
方式一：写小属性
也就是说将上右下左四个属性分别设定值

padding-top:20px;
padding-right:30px;
padding-bottom:40px;
padding-left:50px;

方式二：综合属性设置

padding: 20px 30px 40px 50px; 
		 上    左   下   右
padding: 20px 30px 40px; 
		  上   左右  下
padding: 20px 30px;
		 上下  左右
padding：20px；
		 上左下右

消除标签默认的padding

列表标签是默认携带有padding的。
使用并集选择器选中要清楚padding和margin的标签。有人已经写好了清楚默认的样式表。在搜索栏搜索reset.css找到别人写好的直接使用即可。

消除列表标签(ul)默认的padding\

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
            margin:0;
            padding:0
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
</ul>
</body>
</html>

使用border制作三角形

在这里插入图片描述
将width、height两者设置为0，就会形成三个三角形，将left和right的颜色设置为透明色，就剩下了一个箭头朝下的三角形。

margin属性

外边距，设置方式与padding类似。有小属性和综合设置两种方式。
注意的一点是margin垂直方向上有塌陷的效果(比较坑的一点)，给两个兄弟盒子上面的设置margin-bottom下面的设置margin-top,即垂直方向上设置margin，会出现塌陷问题，以大的margin为准，只会出现在标准文档流下。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .box1{
            width:200px;
            height:200px;
            background-color:red;
            margin-bottom:20px;
        }
        .box2{
            width:300px;
            height:300px;
            background-color:green;
            margin-top:50px;
        }
    </style>
</head>
<body>

<div class="father">
<!--    当给两个兄弟盒子设置垂直方向上的margin，那么以较大的为准，那么我们称这种现象就塌陷-->
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>
</html>

样式：
在这里插入图片描述
使用margin: 0 auto;水平居中盒子，必须要有width。只有标准文档流下的盒子才能使用margin:0 auto;当一个盒子浮动了，固定定位，绝对定位了，margin: 0 auto就不起作用了。

在父子盒子中，调整儿子盒子的位置，不要使用margin，而要善于使用padding。

no_name_sky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css盒模型

盒模型介绍盒模型有五个属性：内边距 padding外边距 margin边框 border高度 height宽度 width用月饼来解释一下这几个属性：将上图降为一个二维来看，月饼袋子到黄色壳子之间的距离a是外边距(margin)。黄色壳子e就是边框(border).黄色壳子到月饼之间的距离b就是内边距(padding)。月饼的高度c和宽度d就是内容的高度(height)和宽度(width)也就是能吃的那一部分大小)。结合代码来看：<!DOCTYPE html>&l
复制链接

扫一扫

专栏目录