css盒子模型详解(day05)

mc.byte

已于 2022-07-23 09:28:37 修改

阅读量108

点赞数

分类专栏： # 笔记 web前端文章标签： css 前端 html

于 2022-07-22 20:19:05 首次发布

本文链接：https://blog.csdn.net/m0_58044090/article/details/125935333

版权

web前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

笔记

30 篇文章 0 订阅

订阅专栏

导读： CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（ margin）构成，这就是盒子模型

1.内容：content

width和height默认设置的是内容部分的宽高

2.边框：border

单个的属性：1）边框粗细：border-width

2）边框的样式：border-style

取值：实线：solid 虚线：dashed 点线：dotted

3) 边框的颜色：border-color

连写：border: 10px solide black

3. 内外边距： padding margin

1）内边距：指的是内容到盒子边框之间距离

2）外边距：指的是两个盒子之间的距离

代码实列：

<style>
        .one{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 5px solid black;
            padding: 30px;
            margin: 30px;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            padding:30px;
            border-width: 15px;
            border-style:solider;
            border-color:red;
            
            }
</style>

<html>
 <body>
    <div class="one">
        内容区域
    </div>
    <div class="two">
        第二台电脑
    </div>
 </body>
</html>

效果图：