CSS知识点03-盒子模型

三七yiii

已于 2022-03-27 10:53:11 修改

阅读量162

点赞数 3

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

于 2022-03-05 10:54:19 首次发布

本文链接：https://blog.csdn.net/m0_65208646/article/details/123289679

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、盒子模型-边框

1、border-width 边框宽度

border-width:6px;

2、border-color 边框颜色

border-color:red;

3、border-style 边框样式

值	详解
none	无边框
solid	实线
dashed	虚线
dotted	点状线
double	双实线

4、边框分类

边框可以单独给每个边设置样式

border-top 上边框
border-bottom 下边框
border-left 左边框
border-right 右边框

5、简写

border:borser-width值 border-style值 border-color值值无先后顺序

border：1px solid red
/*四周为1像素的实线红色边框*/

border-top:2px solid blue;
/*上边框为一条2像素的实线蓝色边框*/

二、盒子模型-外边距

外边距不会改变盒子大小，盒子大小只受内容，边框，内边距影响。

1、属性

margin-top 上外边距
margin-bottom 下外边距
margin-left 左外边距
margin-right 右外边距

2、简写

margin：值；上下左右外边距的距离都为该值。
margin：值1 值2；上下外边距为值1，左右外边距为值2。
margin：值1 值2 值3；上外边距为值1，左右外边距为值2，下外边距为值3。
margin：值1 值2 值3 值4；上边距为值1，右边距为值2，下边距为值3，左边距为值4。遵循顺时针顺序
margin：10px 20px 30px 40px；
/*上边距为10 右边距为20 下边距为30 左边距为40*/

两个盒子兄弟，上下排列，当第一个盒子有下边距，第二个盒子有上边距，两个盒子之间的距离取最大值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            margin-bottom: 10px;
            background-color: blue;
        }
        .box2{
            margin-top: 20px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>
</body>
</html>
<!-- 该代码盒子1和盒子2之间的外边距为20像素 -->

解决方式：给两个盒子分别加一个父元素，给父元素加上溢出处理overflow：值值除了默认都能取。子元素会撑开父元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1f{
            overflow: auto;
        }
        .box2f{
            overflow: auto;
        }

        .box1{
            overflow: auto;
            margin-bottom: 10px;
            background-color: blue;
        }
        .box2{
            
            margin-top: 20px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1f">
        <div class="box1">盒子1</div>
    </div>
    <div class="box2f">
        <div class="box2">盒子2</div>
    </div>
</body>
</html>
<!-- 该代码盒子1和盒子2之间的外边距为30像素 -->

大盒子套小盒子也会有外边距重叠传递合并问题，解决方法也是给父元素加溢出处理，这两个都是垂直方向上的问题，水平方向则不会出现这种问题。