前端基础

1、网页布局的过程
    先准备好相关的网页元素，网页元素基本都是盒子box
    利用css设置好样式，摆放到合适的位置上去
    往盒子里面装内容
    
    本质就是利用css摆放盒子
2、盒子模型的组成（Box Model）
border 边框
content 内容
padding 内边距
margin 外边距

3、边框border
边框有三部分组成：宽度、样式、颜色
border-width:单位一般是px
border-style：solid、dotted、dashed、double
border-color：颜色

边框的复合写法
border：1px solid red ;没有顺序

边框分开写法：
border-top:1px solid red;//只设定上边框，其余的同理
border-bottom:10px dashed purple
边框会影响实际盒子的大小

padding 内边距
边框和内容区之间的距离
padding-left
padding-right
padding-top
padding-bottom

padding简写：
1、一个值：上下左右
2、两个值：上下、左右
3、三个值：上，左右，下
4、四个值：上、右、下、左

padding也会影响盒子的实际大小

margin 外边距，控制黑子和盒子之间的距离
margin-left
margin-right
margin-top
margin-bottom
margin的简写意义和padding完全一样

块级元素水平居中
margin:0 auto

行内元素和行内块元素的水平居中：给父元素添加text-align:center

相邻块元素垂直外边距合并：
当上下相邻的两个块元素（兄弟关系）相遇时，如果过上面的元素的有margin-bottom,下面的元素有上外边距margin-top,
则他们之间的垂直距离不是两者之和，而是取较大的那个值，这就是相邻块元素垂直外边距的合并

嵌套块元素垂直外边距的塌陷
对于两个嵌套关系的块元素，父元素有上外边距的同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案：
1、为父元素设置上外边框
2、为父元素设置上内边距
3、为父元素设置overflow:hidden

清除内外边距：
*{
    margin:0;
    padding:0;
}

网页布局的三大方式

        1、标准流

        页面元素按照块元素、行内元素的特性，从上到下或从左到右依次排列

        2、浮动

        是页面元素脱离标准流，所有元素获得行内块特性

        3、定位

        在盒子模型的基础上，根据定位调整页面元素位置

        盒子模型：外边距、边框、内边距和内容区

        定位的知识：

        一共有四种定位：

        相对定位、绝对定位、固定定位和粘滞定位

        语法：

        选择器{
            position:定位的方式值

        }

        1、相对定位：

        position：relative

        如果只是开启定位，不做偏移量的设置，元素位置不会发生任何变化

        如何设置偏移量：

        x轴和y轴

        x轴：left:100px

        y轴：top:100px

        相对定位本身是相对于什么进行定位？

        相对于元素原本在标准流中的位置进行定位(相对于自身的初始位置进行定位，初始位置的左上角就是原点)

        相对定位不会使元素脱离文档流

        2、绝对定位：

        position:absolute

        如果只是开启定位，不做偏移量的设置，元素位置不会发生任何变化

        偏移设置：x轴和y轴

        x:left:100px

        y:top:100px

        绝对定位是相对于什么进行定位？

        相对于包含块进行定位,包含块的左上角就是原点

        包含块：

        1、如果定位元素的祖先元素中，没有开启了定位的，那么包含块就是body,body的左上角就是原点

        2、如定位元素的祖先元素中，有开启了定位的，那么包含块就是距离定位元素最近的开启了定位的祖先元素

        最近的开启了定位的祖先元素的左上角就是坐标原点

        开启绝对定位后，元素会脱离标准流，元素变为了行内块元素

        3、固定定位

        positon:fixed

        如果只是开启了定位，不做偏移的设置，元素会消失

        偏移：x轴和y轴

        x:left:100px

        y:top:100px

        坐标原点：视口的左上角

        视口：浏览器展示给用户的窗口部分

        固定定位开启之后也会使元素脱离文档流

        4、粘滞定位

        介于相对定位和固定定位之间的一种定位

 

        5、static(默认定位值)

 

<div id="box1"></div>
        <div id="box2"></div>
        <div id="father1">
            <div id="father2">
                <div id="box3"></div>
                <div id="box4"></div>
            </div>
        </div>
        <div id="box5"></div>
        <div id="box6"></div>
</body>
<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        height: 1500px;
    }
    #box6{
        width: 100px;
        height: 100px;
        background-color: darksalmon;
    }
    #box5{
        width: 130px;
        height: 130px;
        background-color: darkorange;
        position: fixed;
        left: 100px;
        top:100px;
    }
    #box4{
        width: 120px;
        height: 120px;
        background-color: aqua;
    }
    #father1{
        width: 400px;
        height: 400px;
        background-color: black;
        position: relative;
        overflow: hidden;
    }
    #father2{
        width: 200px;
        height: 200px;
        background-color: purple;
        margin-left: 50px;
        margin-top: 50px;
        /* position: relative;
        left: 50px;
        top: 50px; */
    }
    #box3{
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
        /* left: 100px; */
        /* top: 100px; */
    }
    #box1{
        width: 100px;
        height: 100px;
        background-color: red;
        /* 开启了元素的相对定位 */
        position: relative;
        /* 向x轴正方向偏移100px */
        /* left: 100px; */
 
        /* 向y轴正方向偏移100px */
        /* top:100px; */
 
    }
    #box2{
        width: 150px;
        height: 150px;
        background-color: green;
        position: relative;
        left: 100px;
        /* top: 100px; */
    }
</style>
</html>