【CSS3】一文搞懂盒子模型（知识点加案例）

最新推荐文章于 2024-06-19 16:48:21 发布

YinJie…

最新推荐文章于 2024-06-19 16:48:21 发布

阅读量3.2k

点赞数 6

分类专栏： css 文章标签： css3 css html5

本文链接：https://blog.csdn.net/qq_49900295/article/details/122804777

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

看透网页布局本质

行内元素比如文字类似牛奶，需要一个盒子把他们装起来，我们所学过的双标签都是一个盒子。有了盒子，我们就能任意的，自由的摆放位置了。

看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

比如我们打开小米的官网：
在这里插入图片描述
显而易见，他就是由一个个大小不一功能不同的盒子组成。

盒子模型组成

在这里插入图片描述
上面的图片说明了盒子模型(Box Model)：
Margin(外边距) - 清除边框外的区域，外边距是透明的
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

盒子边框

border: 1px solid pink;

这是边框的综合写法，表示要一个大小1像素的实线粉色边框

圆角边框

border-radius: 10px /*一个数值表示四个角都是相同的10px的弧度*/

像素值如果取宽度和高度的一半，则会变成一个圆形，可以用百分制表示

内边距（padding）

什么是内边距？
内边距就是内容和边框之间的距离

padding-left: 10px; /*左内边距*/
padding: 20px; /*padding如果只写一个值，表示上下左右都是20像素*/
padding: 10px 30px; /*上下10像素，左右30像素*/
padding: 10px 30px 50px /*上10，左右30，下50*/
padding:10px 20px 30px 40px /*顺时针表示，上右下左*/

外边距（margin）

我们可以通过margin相关操作来实现盒子在浏览器中的移动
比如我们想让盒子向下移动20像素：

margin-top: 20px;

更重要的是，我们可以通过margin实现盒子在浏览器中居中对齐

居中对齐需要满足以下两个条件：
1.必须是块级元素
2.盒子必须指定了宽度

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
           div {
               width: 500px;
               height: 200px;
               background-color: pink;
               margin: 20px auto;
           }
        </style>
    </head>
    <body>
        <div>
            居中对齐
        </div>
        
    </body>
</html>

在浏览器中实现效果为：
在这里插入图片描述
上下可以随意指定大小，但是左右一定要是auto

插入图片与背景图片在更改大小和位置时的区别

这里先插播一条知识点：
文字水平居中：

text-align: center;

背景图片更改大小时只能用background-size
背景图片更改可以在background中简写表示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
           div {
               width: 800px;
               height: 700px;
               background: #000 url(curry.jpg) 50px 200px no-repeat;/*背景图片更改位置*/
               background-size: 300px 300px;/*背景图片更改大小*/
           }
        </style>
    </head>
    <body>
        <div></div>
     </body>
</html>

插入图片更改大小及位置：

img {
        width:200px;  /*插入图片更改大小用width和height*/
        height:220px;
        margin-top:30px;  /*插入图片更改位置可以用margin和padding*/
        margin-left:50px;

行内元素上下内外边距问题

注意：行内元素是只有左右外边距的，是没有上下内边距的
我们尽量不要给行内元素指定上下内外边距

外边距合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直距离不是二者相加，而是两者之中的最大者。这种现象被称为相邻块元素垂直外边距的合并

上述问题影响不大，尽量避免就好。但是在开发过程中遇到最多问题的是嵌套块元素垂直边距的合并问题

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并

下面我们着重讲嵌套块元素垂直边距合并的解决办法：
先给一个示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .father {
                width: 300px;
                height: 300px;
                background-color: pink;

            }
            .son {
                width: 200px;
                height: 200px;
                background-color: #000;
                margin-top: 30px;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son"></div>
        </div>
     </body>
</html>

在子类中我们给子块一个 margin-top: 30px ,我们希望的是这样：
在这里插入图片描述
但发生了合并，实际上是这样：

小黑快并没有下来，那么我们如何解决呢？

解决方案：

1.可以为父元素定义1像素的上边框或上内边框
2.可以为父元素添加 overflow:hidden

行内元素与块级元素的切换

链接: link

CSS3盒模型

1.box-sizing: content-box 盒子大小为width+padding+border

2.box-sizing: border-box 盒子大小为width 就是说padding和border是包含在width里面的

盒子阴影

box-shadow: 水平距离 垂直距离 模糊程度 阴影大小 阴影颜色  内外阴影;

前两个是必写的，后四个是可选的。

综合案例

接下来，通过我们学习的盒子模型的知识，做一下新浪网的一个侧边栏
在这里插入图片描述
我们就完成这个综合趣图这部分就好：

代码示例如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
           * {
               padding: 0;
               margin:0;
           }
           ul {
               list-style: none;/*取消列表自带的小点*/
           }
           .searchpic {
               width: 363px;
               height: 450px;
               border:1px solid #d9e0ee;
               border-top: 3px solid #ff8400;
               margin: 100px;
           }
           .searchpic h3 {
               height: 54px;
               line-height: 54px;/*让文字垂直居中*/
               border-bottom: 1px solid #d9e0ee;
               font-size: 22px;
               font-weight: normal;/*粗体不变粗*/
               padding-left: 18px;
           }
           .searchpic img {
               display: block;
               margin: 7px auto;
           }
           .searchpic ul li a {
               font-size: 18px;
               color: #666;
               text-decoration: none;
           }
           .searchpic ul {
               margin-left: 8px;
            }
           .searchpic ul li {
               padding-left: 10px;
               height: 36px;
               line-height: 36px;
               background: url(小点.png) no-repeat left center;/*背景靠左垂直居中*/
           }
           .searchpic ul li a:hover {
               text-decoration: underline;
               color: #ff8400;
           }
        </style>

    </head>
    <body>
       <div class="searchpic">
           <h3>搜索趣图</h3>
           <img src="捕获.PNG" height="240" width="326" alt="">
           <ul>
               <li><a href="#">GIF: 猜不到结局的神仙画作</a></li>
               <li><a href="#">《2021中国的航天》包皮书发布</a></li>
               <li><a href="#">spaceX火箭残骸今年3月将撞上月球</a></li>
           </ul>

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

最后就是这样的一个效果：
在这里插入图片描述

YinJie…

关注

6
点赞
踩
61

收藏

觉得还不错? 一键收藏
打赏
1
评论
【CSS3】一文搞懂盒子模型（知识点加案例）

看透网页布局本质行内元素比如文字类似牛奶，需要一个盒子把他们装起来，我们所学过的双标签都是一个盒子。有了盒子，我们就能任意的，自由的摆放位置了。看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。比如我们打开小米的官网：显而易见，他就是由一个个大小不一功能不同的盒子组成。盒子模型组成上面的图片说明了盒子模型(Box Model)：Margin(外边距) - 清除边框外的区域，外边距是透明的Border(边框) - 围绕在内边距和内容外
复制链接

扫一扫