css之盒子模型

最新推荐文章于 2024-07-27 10:01:45 发布

小鱼的池塘

最新推荐文章于 2024-07-27 10:01:45 发布

阅读量647

点赞数

分类专栏：前端基础语言从学习文章标签： css

本文链接：https://blog.csdn.net/haha_hello/article/details/56484663

版权

前端基础语言从学习专栏收录该内容

27 篇文章 1 订阅

订阅专栏

一，盒子模型

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>50-css盒子模型.html</title>
    <style>
        /* 利用并集选择器设置标签属性 */
        span,a,strong,b{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 5px solid #000;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
<!--
    1,什么是css盒子模型
    css盒子模型只是一个形象的比喻
    结论:
    1,在html中的所有标签都可以设置
    (与手机盒子比较)
    宽度高度  == 指定可以存放内容的区域
    内边距   == 填充物
    边框     == 手机盒子自己
    外边距   == 盒子和纸盒子之间的间隙
-->
<span>我是span</span>
<a href="#">我是超链接</a>
<strong>我是强调</strong>
<b>我是加粗</b>
</body>
</html>

二，盒子模型的宽度和高度

这里写图片描述

<!--
    1,内容的宽度和高度
    就是通过标签的width/height属性设置的宽度和高度
    2,元素的宽度和高度
    宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
    高度 同理可证
    3,元素空间的宽度和高度
    宽度 = 左外边距 + 元素宽度 + 右外边距
    高度 同理可证
规律:
    1,增加了padding之后元素的宽高就会增加
    2,增加了border之后元素的宽高就会增加
-->