盒模型基础练习

最新推荐文章于 2022-07-15 15:57:42 发布

V________

最新推荐文章于 2022-07-15 15:57:42 发布

阅读量200

点赞数

分类专栏： web前端文章标签： html5 css3

本文链接：https://blog.csdn.net/V________/article/details/109612475

版权

web前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web前端基础知识</title>
    <link rel="stylesheet" href="css/page2.css">
</head>
<body>
    <div>
        <h1>
            CSS盒子模型 
        </h1>
        <article>
            <header>
                <p>网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。</p>   
                    <p>这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。</p>
                   <p> CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。</p>

            </header>
            <section>
                <h2>
                    原理
                </h2>
                <p>
                    先说说我们在网页：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。 </p>
                    <p> 这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。
                    </p>
            </section>
            <section>
                <h2>
                    特点
                </h2>
                <p>
                    想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性； 
                </p>
                <p>让我们俯视这个盒子，它有上下左右四条边，所以每个属性除了内容（content），都包括四个部分：上下左右；这四部分可同时设置，也可分别设置；内边距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西，外边距就是边框外面自动留出的一段空白。
                </p>
            </section>
            <section>
                <h2>
                    结构
                </h2>
                <p>
                    内容（CONTENT）就是盒子里装的东西； 
                    </p>
                    <p> 而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；   
                   </p>
                   <p>边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。 填充只有宽度属性，每个HTML标记都可看作一个盒子； 
                </p>
            </section>
            <footer>
                <div>
                    <p>内容来源：<a href="#">CSS盒子模型-百度百科</a></p>
                <p>作者：百度百科</p>
                </div>
            </footer>
        </article>
        
    </div> 
</body>
</html>

body {
    margin: 0px;
    background-color: #d9dae0;
}
div {
    height: auto;
    /* background-color: #615e77; */
    margin: 20px 50px;   
}
h1 {
    font-size: 42px;
    color: #484759;
    line-height: 2;
    border-bottom: 1px solid grey;
    margin: 0px;
}
article>header {
    border-left:#484759 10px solid;
    position: relative;
    background-color: #d9d9d9;
    margin-left: 30px;
    margin-top: 30px;
    padding-left: 20px;
}
h2 {
    width: 120px;
    border-left:#605f77 10px solid;
    border-right:#605f77 10px solid;
    text-align: center;
    margin: 30px 0;
    font-weight: lighter;
    font-size: 32px;
}
p {
    line-height: 1.5;
}
footer {
    margin-top: 30px;
    background-color: #a6a6a6;
    border: 1px solid transparent;   
}
footer>div {
    margin: 20px;
}
a:link,a:visited {
    color: #615e77;
}
a:hover {
    color: #484759;
}

V________

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒模型基础练习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web前端基础知识</title> <link rel="stylesheet" href="css/pag
复制链接

扫一扫