HTML+CSS第五天：盒子

Fffffee

已于 2022-04-19 22:09:00 修改

阅读量188

点赞数

文章标签： css

于 2022-04-17 14:21:48 首次发布

本文链接：https://blog.csdn.net/Fffffee/article/details/124218994

版权

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

3.外边距

Margin - 单边外边距属性

在CSS中，它可以指定不同的侧面不同的边距：

margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

Margin - 简写属性

margin属性可以有一到四个值。

margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
margin:25px;
- 所有的4个边距都是25px

块级盒子水平居中

1.盒子必须指定宽度

2.盒子左右的外边距都设置为auto

行内元素或者行内块元素水平居中

在父亲标签添加 text-align: center;

外边距合并

两个相邻元素都有外边距，只要有一个浮动都不会出现外边距合并

一、相邻块元素垂直外边距合并：发生在兄弟间（会取两个值中的较大者）

1.尽量只给一个盒子添加margin

二、嵌套垂直外边距的塌陷问题：发生在父子间

父元素的上外边距只有20px，子元素有40px

在这里插入图片描述

解决方法：

1.为父元素定义上边框

2.为父元素定义上内边距

3.为父元素添加overflow：hidden（不会改变盒子大小）

 <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /*  border-top: 1px solid transparent; */
            /* padding: 1px; */
            overflow: hidden;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father"><div class="son"></div></div>
    
</body>

清除内外边距

*{
    margin：0；
    padding：0；
}

Fffffee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS第五天：盒子

不同部分的说明：Margin(外边距)- 清除边框外的区域，外边距是透明的。 Border(边框)- 围绕在内边距和内容外的边框。 Padding(内边距)- 清除内容周围的区域，内边距是透明的。 Content(内容)- 盒子的内容，显示文本和图像。...
复制链接

扫一扫