盒子模型【1】生活案例入手

妖狐艹你老母 2023-10-03 22:55 1阅读 0赞

【1】生活案例入手：

![cf4e7b4a503624d2f3870eebcdaa2259.png][]

【2】盒子模型：  
页面上也有很多元素，元素之间的布局/设计 依靠 盒子模型：  
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。  
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。  
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。  
下面的图片说明了盒子模型(Box Model)：

![2f3a782c483af782c64fbc2175b3904f.png][]

![80017f110d60a53b70afcc8f322c4878.png][]

![8396864496e58625a505c3b88339f3c5.png][]

【3】在浏览器端验证一下盒子模型：

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <style type="text/css">
                            div{
                                    width: 100px;
                                    height: 100px;
                                    background-color: yellowgreen;
                                    margin-left: 100px;
                                    border: 4px red solid;
                            }
                    </style>
            </head>
            <body>
                    <div>我是div</div>
            </body>
    </html>

![8d073ac4fbacc92f5aa28a792f1b688f.png][]

![a958e5ee19fa9d9c9dcc25463ffd0461.png][]

【4】写代码感受盒子模型：

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <style type="text/css">
                    /*将所有元素的样式：外边距，边框，内边距全部设置为0*/
                            *{
                                    margin: 0px;
                                    border: 0px;
                                    padding: 0px;
                            }
                            #outer{
                                    width: 440px;
                                    height: 450px;
                                    background-color: lightskyblue;
                                    margin-left: 100px;
                                    margin-top: 100px;
                                    padding-top: 50px;
                                    padding-left: 60px;
                            }
                            #mydiv{
                                    width: 170px;
                                    height: 150px;
                                    background-color: pink;
                                    padding-top: 50px;
                                    padding-left: 30px;
                            }
                    </style>
            </head>
            <body>
                    <div id="outer">
                            <div id="mydiv">我是div</div>
                    </div>
            </body>
    </html>

![f4b72bda6463cab56e6f9b0398b613f0.png][]

[cf4e7b4a503624d2f3870eebcdaa2259.png]: https://img-blog.csdnimg.cn/img_convert/cf4e7b4a503624d2f3870eebcdaa2259.png
[2f3a782c483af782c64fbc2175b3904f.png]: https://img-blog.csdnimg.cn/img_convert/2f3a782c483af782c64fbc2175b3904f.png
[80017f110d60a53b70afcc8f322c4878.png]: https://img-blog.csdnimg.cn/img_convert/80017f110d60a53b70afcc8f322c4878.png
[8396864496e58625a505c3b88339f3c5.png]: https://img-blog.csdnimg.cn/img_convert/8396864496e58625a505c3b88339f3c5.png
[8d073ac4fbacc92f5aa28a792f1b688f.png]: https://img-blog.csdnimg.cn/img_convert/8d073ac4fbacc92f5aa28a792f1b688f.png
[a958e5ee19fa9d9c9dcc25463ffd0461.png]: https://img-blog.csdnimg.cn/img_convert/a958e5ee19fa9d9c9dcc25463ffd0461.png
[f4b72bda6463cab56e6f9b0398b613f0.png]: https://img-blog.csdnimg.cn/img_convert/f4b72bda6463cab56e6f9b0398b613f0.png