css盒子模型

最新推荐文章于 2024-07-17 10:09:06 发布

Peng~

最新推荐文章于 2024-07-17 10:09:06 发布

阅读量179

点赞数

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

本文链接：https://blog.csdn.net/qq_43522419/article/details/122251895

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

盒子模型

1.border

表格中合并相邻的边框 border-collapse:collapse;

2.padding

值的个数	表达意思
padding:5px;	1个值，代表上下左右都有5像素的内边距
padding:5px 10px ;	2个值，代表上下内边距是5像素，左右内边距是10像素
padding:5px 10px 20px;	3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding:5px 10px 20px 30px;	4个值，依次上、右、下、左，顺时针

3.margin
外边距可以让块级盒子水平居中，但是必须满足两个条件：

盒子必须指定宽度width
盒子左右外边距都设置为auto

三种写法：

margin-left:auto;margin-right:auto;
margin:auto;
margin:0 auto;

嵌套块元素垂直外边距的塌陷问题
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

<style>
    body {
        margin: 0;
        padding: 0;
    }

    #father {
        height: 200px;
        width: 200px;
        background-color: pink;
        margin: 50px;
    }

    #son {
        height: 100px;
        width: 100px;
        background-color: purple;
        margin: 50px;

    }
</style>

<body>
    <div id="father">
        <div id="son"></div>
    </div>
</body>

理想的样式是：
请添加图片描述
实际的样式（形成塌陷）：

解决方案有三种：

为父元素定义上边框
为父元素定义上内边距
为父元素添加overflow:hidden

注：浮动的盒子不会有外边距塌陷问题

4.margin和padding默认都会影响盒子实际的大小，撑大盒子

注意： border、padding、margin 都会影响盒子的实际大小

特殊情况：当没有给元素指定宽度时（继承父元素的宽度），padding不会撑大盒子。width:100%也会撑大

Peng~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css盒子模型

盒子模型1.margin和padding默认都会影响盒子实际的大小，撑大盒子2.padding值的个数表达意思padding:5px;1个值，代表上下左右都有5像素的内边距padding:5px 10px ;2个值，代表上下内边距是5像素，左右内边距是10像素padding:5px 10px 20px;3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素padding:5px 10px 20px 30px;4个值，依次上、右、下、左，顺时针
复制链接

扫一扫