CSS之盒子模型(1)

最新推荐文章于 2023-03-18 11:36:40 发布

极客研究者

最新推荐文章于 2023-03-18 11:36:40 发布

阅读量171

点赞数

分类专栏： CSS样式表文章标签： css css3

本文链接：https://blog.csdn.net/qq_34550459/article/details/105568183

版权

CSS样式表专栏收录该内容

39 篇文章 0 订阅

订阅专栏

盒子模型:
CSS将页面中的每个元素都设置为一个盒子
将元素设置为盒子后,对页面的布局就变成了把不同的盒子放到不同的位置
在这里插入图片描述
盒子的组成:
内容区(content):
内边距(padding):
边框(border):
外边距(margin):

内容区:元素中的所有子元素和文本内容都在内容区排列
内容区的大小由width和height两个属性组成
width:内容区的宽度
height:内容区的高度

border:边框
盒子的边缘，边框以内是内容区,出了边框是盒子外
需要设置三个部分：
border-width:边框宽度
border-style；边框样式
border-color:边框颜色

Demo:

<!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>
        .box{
            width:200px;
            height:200px;
            background-color: saddlebrown;
            border:2px solid red;
            /* border-color:red;
            border-style: solid;
            border-width:2px; */

        }

    </style>
</head>
<body>
    <div class="box">
        <span>好好干吧,年轻人!</span>
    </div>
</body>
</html>

极客研究者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之盒子模型(1)

盒子模型:CSS将页面中的每个元素都设置为一个盒子将元素设置为盒子后,对页面的布局就变成了把不同的盒子放到不同的位置盒子的组成:内容区(content):内边距(padding):边框(border):外边距(margin):内容区:元素中的所有子元素和文本内容都在内容区排列内容区的大小由width和height两个属性组成width:内容区的宽度height:内容区的高度...
复制链接

扫一扫

专栏目录