css中关于盒子的一些重要知识

最新推荐文章于 2023-07-26 10:34:49 发布

Faith_gyz

最新推荐文章于 2023-07-26 10:34:49 发布

阅读量524

点赞数 2

分类专栏： Css 文章标签： css

本文链接：https://blog.csdn.net/qq_43667537/article/details/109279335

版权

Css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、内边距padding不会撑开盒子的情况

在这里插入图片描述

情况一

下面这种情况，只指定了height，加上内边距padding后，只会将height撑开60px，不会撑开width
在这里插入图片描述
前面的做的那个新浪导航栏项目，没有设定width，但是可以被撑开，是因为a标签被转换成了行内块元素，而行内块元素本身有自己默认内容的宽度，所以可以左右可以被撑开。
如下是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav{
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }
        .nav a{
            /* a属于行内元素，此时必须要转换 行内块元素 */
            display: inline-block;
            height: 41px;
            /* 上下为0，左右为20px  
            这里使用padding撑开，是因为行内块元素本身就有本身内容大小的默认宽度，所以可以撑开*/
            padding: 0 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;

        }
        .nav a:hover{
            background-color: #eee;
            color:  #ff8500;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">新浪导航栏</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">三个字</a>

    </div>
</body>
</html>

在这里插入图片描述

情况二

加了一个子元素p，虽然父亲规定了width和height，但是加上padding不会撑开盒子
在这里插入图片描述
给子元素加上width：100%后，盒子就被撑开了

二、盒子水平居中对齐（块级元素水平居中）

在这里插入图片描述

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

在这里插入图片描述

四、盒子外边距合并问题

浮动的盒子不会有外边距合并的问题

1、相邻元素垂直外边距的合并

在这里插入图片描述
给两个盒子分别加上外边距，结果两个盒子之间的距离不是外边距之和，而是较大的外边距。

在这里插入图片描述
如何解决呢？

2、嵌套块元素塌陷

在这里插入图片描述
**注意：**加上了float的子元素，不会造成塌陷

在这里插入图片描述
给子元素添加的外边距大于父类的外边距，父元素会被带着增大外边距。

解决方案

1、给父元素添加边框
在这里插入图片描述

添加红色边框不太好，改成了透明边框，如下

2、给父亲添加内边距padding

3、给父元素添加overflow：hidden，这种方法不会额外增加父元素的大小，比较好。

五、清除内外边距

这是不清除
在这里插入图片描述
结果元素不能顶着，总有一段距离

清除后，

在这里插入图片描述

行内元素就算设置了上下外边距，也不会显示

css3盒子

在这里插入图片描述

<!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>CSS3盒子模型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            box-sizing: content-box;
        }
        p {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            /* css3 盒子模型  盒子最终的大小就是 width  200 的大小 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>
        小猪乔治
    </div>
    <p>
        小猪佩奇
    </p>
</body>
</html>

Faith_gyz

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
css中关于盒子的一些重要知识

内边距padding不会撑开盒子的情况情况一下面这种情况，只指定了height，加上内边距padding后，只会将height撑开60px，不会撑开width情况二加了一个子元素p，虽然父亲规定了width和height，但是加上padding不会撑开盒子给子元素加上width：100%后，盒子就被撑开了...
复制链接

扫一扫

专栏目录