第二个网页！

<!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>Document</title>
</head>
<style>
    /* .bg1{
        height: 100%;
        width: 1902px;background-color: #4d4a40;
        border-top:30px solid; 
    } */
    *{
        margin: 0;padding: 0;
    }
    body{ width: 1902px;background-color: #4d4a40;
        border-top:30px solid; 
        position: absolute;
        top: 0px;}
    .bg2{
        width: 1713px;
        background-color: white;
        /* margin-bottom: 20px; */
        position: relative;
        top: 20px;left: 50px;
    }
    .box1{
        display: inline-block;
        width: 1781px;border: 5px solid #14414e;
        background-color: #267892;
        margin: auto;
        position: relative;
        top: 30px;
        right: 34px;
        font-size: 42px;color: #fff;text-align: center;
    }
    
    .art{clear: both;
        /* position: relative;top: 30px; */
        /* border: 1px solid   black; */
        line-height: 200%;
    
    }
    h1{font-size: 32px;
    width: 1541px;
    border-top: 1px dotted gray;
    border-bottom: 1px dotted gray;
    padding-top: 5px;
    padding-bottom: 5px;
    }
    .bg3{
        position: relative;
        left: 30px;
        top: 60px;
    }


</style>
<body>
    <div class="bg1">
        <div class="bg2">
                <div class="box1">
                    CSS中不为人知的部分<br>
                    <p style="font-size: 16px;color: white;">原文地址：<a href="">http://madebymike.com.au/writing/the-invisible-part-of-CSS/</a></p>
                    </div>
            <div class="bg3">
                <div class="art">
                    如果你在日常工作中使用CSS ,你的主
                    要目标可能会重点围绕着使事情“看起来正确"。如何实现
                    这一点经常是远不如最终结果那么重要。 这意味着比起
                    正确的语法和视觉结果来说，我们更少关心CSS的工作原理。<br>
                    CSS的视觉结果通常是操作隐藏属性的间接后果,你可能还没有意识到这点
                    某些CSS属性(比如background color )与你看到的内容有直接而明显的关系
                    。同时,其它像display这样的属性对于我们很多人来说仍<br> 然是模棱两可
                    的,因为结果似乎与上下文环境有很大关系。
                </div>
                <h1>渲染过程概述</h1>
                <div class="art">
                当加载个HTML文档时,为了让该页面清染,有很多事情要发生。<br>
                第一个步骤就是解析HTML文档。浏览器从这一步创建个文档树。树状结构是表示像HTML这种具有明显层次结构信息的一种方法。树中的元素可以被描述为类似于族谱,比如祖先。父亲，孩子和兄弟姐妹,<br>
                你可能听说过术语DOM,它代表文档对模型( Document object Model),这是文档树结构的一种扩展.被用于存储和操作Web文档内容有关的信息。<br>
                随着HTML被解析,样式表和其它资源也被获取。样式声明通过一个称为层量的过程来解释和确定。
                </div>
                <h1>层叠</h1>
                <div class="art">
                层叠可能是最被误解的CSS特性之一。 它是指组合不同样式表以及解决CSS选择器之间冲突的过程。<br>
                层叠查看声明的重要性、来源特殊性以及顺序.来确定使用哪个样式规则。<br>
                大多数网站有多个样式表。通常,样式是用引用个CSS文件的个link标记,或者HTML主体部分的style标记添加的。即使最基础的页面也会有浏览器提供的默认样式。这种默认样式表有时披称为user agent样
                式表.</div>
                <h1>盒模型</h1>
                <div class="art">
                理解盒模型是布局和定位时防止挫败所必需的。盒模型是CSS中最基本的概念之-。<br>
                盒模型用于计算元素的宽度和高度。它只是计算过程中的-个步骤,确定元素的最终布局和定位并非完全依赖于它。<br>
                HTML中的每个元素都是一个矩形的盒子。 每个盒子有用元素的外边面( margin)边框( borden.内边面( pding )和内容区定义的四个区域。<br>
                默认情况下,当我们设置一个元素的宽度时.只是设置内容区的宽度，当给一个元素添加内边距 边框或者外边距时。是增加了除衣度以外的部分。实际上.这就是说衣度为50%的两个元素如果添加了内边距。外边距<br> 或者边框,就不会并排填满宽度(因为已经超过了100%宽度).<br>
                就是这样!相当简单对吧?那么为什么这经常是困感的来源呢?好吧.你可能已经遇到过些事情好像表现得有点不同的情况，.</div>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
            </div>

        </div>
    </div>
</body>
</html>
猜你喜欢
