2018-11-21

外边距的重叠

.box1{
        width: 100px;
        height: 100px;
        background-color: red;
        /*为上边的元素设置一个下外边距*/
        margin-bottom: 100px;
    }
    /*
    垂直外边距的重叠
        在网页中相邻的垂直方向的外边距会发生外边距的重叠
        所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
        如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
    */
    .box2{
        width: 100px;
        height: 100px;
        background-color: green;
        /*为下边的元素设置一个上外边距*/
        margin-top: 100px;
    }
    .box3{
        width: 200px;
        height: 100px;
        background-color: yellow;
        /*为box3设置一个上边框*/
        /*border-top: 1px red solid;*/
        /*padding-top: 1px;*/
        padding-top: 100px;
    }
    .box4{
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
        /*为子元素设置一个上外边距，使子元素的位置下移*/
        /*margin-top: 100px;*/
    }

浏览器默认样式

/*
    浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。
    所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
    */
*{
        margin: 0;
        padding: 0;
    }

内联元素的盒模型

  .s1{
        /*盒模型分成内容区、内边距 、边框 、外边距四个部分*/
        /*内联元素不能设置width和height*/
        /* width: 100px;
        height: 100px; */

        /*设置水平内边距,内联元素可以设置水平方向的内边距*/
        padding-left: 100px;
        padding-right: 100px;

        /*垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局*/
        /*padding-top: 50px;
        padding-bottom: 50px;*/

        /*为元素设置边框,内联元素可以设置边框，但是垂直的边框不会影响到页面的布局*/
        border: 1px blue solid;

        /*水平外边距，内联元素支持水平方向的外边距*/
        margin-left:100px;
        margin-right: 100px;
    }
    .s2{
        /*
        为右边的元素设置一个左外边距
        水平方向的相邻外边距不会重叠，而是求和
         */
        margin-left: 100px;

        /*内联元素不支持垂直外边距*/
        /*margin-top: 200px;
        margin-bottom: 200px;*/
    }

display和visibility

  a{
        background-color: #bfa;
        /*
        将一个内联元素变成块元素
        通过display样式可以修改元素的类型
        可选值：
            inline：可以将一个元素作为内联元素显示
            block: 可以将一个元素设置块元素显示
            inline-block：将一个元素转换为行内块元素
                - 可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行
            none: 不显示元素，并且元素不会在页面中继续占有位置
        */
        display: none;
        /*为其设置一个宽和高*/
        width: 500px;
        height: 500px;
    }
    .box{
        width: 100px;
        height: 100px;
        background-color: orange;
        /*
        display: none;
            使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置
        */
        /*display: none;*/

        /*
         * visibility
         *  - 可以用来设置元素的隐藏和显示的状态
         *  - 可选值：
         *      visible 默认值，元素默认会在页面显示
         *      hidden 元素会隐藏不显示 
         * 
         * 使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，
         *      但是它的位置会依然保持
         */
        visibility: hidden;

overflow

.box1{
        width: 200px;
        height: 200px;
        background-color: #bfa;
        /*
        子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小
        如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示
        超出父元素的内容，我们称为溢出的内容
        父元素默认是将溢出内容，在父元素外边显示
        通过overflow可以设置父元素如何处理溢出内容：
        可选值：
            - visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
            - hidden, 溢出的内容，会被修剪，不会显示
            - scroll, 会为父元素添加滚动条，通过拖动滚动条来查看完整内容
                - 该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
            - auto，会根据需求自动添加滚动条，需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加
        */
        overflow: auto;

文档流

  <!-- 
文档流
    文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中
     
元素在文档流中的特点
    块元素
        1.块元素在文档流中会独占一行，块元素会自上向下排列
        2.块元素在文档流中默认宽度是父元素的100%
        3.块元素在文档流中的高度默认被内容撑开
    内联元素
        1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
        2.在文档流中，内联元素的宽度和高度默认都被内容撑开
-->

<!-- 
当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距
-->

浮动

/*
        块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开
        如果希望块元素在页面中水平排列，可以使块元素脱离文档流
        使用float来使元素浮动，从而脱离文档流
        可选值：
            none，默认值，元素默认在文档流中排列
            left，元素会立即脱离文档流，向页面的左侧浮动
            right，元素会立即脱离文档流，向页面的右侧浮动
        当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
        元素浮动以后，会尽量向页面的左上或这是右上漂浮，直到遇到父元素的边框或者其他的浮动元素
        如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
        */



  .box1{
        width: 100px;
        height: 100px;
        background-color: #bfa;
        /*
        浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果
        */
        float: left;
    }
    


    .box1{
        /*在文档流中，子元素的宽度默认占父元素的全部*/
        /*height: 100px;*/
        background-color: #bfa;
        /*
        当元素设置浮动以后，会完全脱离文档流.
        块元素脱离文档流以后，高度和宽度都被内容撑开
        */
        /*float: left;*/
    }
    .s1{
        /*
        开启span的浮动
        内联元素脱离文档流以后会变成块元素
         */
        float: left;
        width: 100px;
        height: 100px;
        background-color: yellow;
    }

简单布局

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>简单布局</title>
<style type="text/css">
    /*清除默认样式*/
    *{
        margin: 0;
        padding: 0;
    }
    /*设置头部*/
    .header{
        /*设置宽度*/
        width: 1000px;
        /*设置高度*/
        height: 150px;
        /*设置背景颜色*/
        background-color: yellowgreen;
        /*设置居中*/
        margin: 0 auto;
    }

    /*设置主体内部*/
    .content{
        /*设置宽度*/
        width: 1000px;
        /*设置高度*/
        height: 400px;
        /*设置背景颜色*/
        background-color: orange;
        /*设置居中*/
        margin: 10px auto;
    }

    /*设置content中小div的样式*/
    .left{
        width: 200px;
        height: 100%;
        background-color: skyblue;
        /*向左浮动*/
        float: left;
    }
    .center{
        width: 580px;
        height: 100%;
        background-color: yellow;
        /*向左浮动*/
        float: left;
        /*设置水平外边距0*/
        margin: 0 10px;
    }
    .right{
        width: 200px;
        height: 100%;
        background-color: pink;
        /*向左浮动*/
        float: left;
    }

    /*设置页脚*/
    .footer{
        /*设置宽度*/
        width: 1000px;
        /*设置高度*/
        height: 150px;
        /*设置背景颜色*/
        background-color: silver;
        /*设置居中*/
        margin: 0 auto;
    }
</style>
</head>
<body>
<!-- 头部div -->
<div class="header"></div>

<!-- 主体内容div -->
<div class="content">
    <!-- 左侧div -->
    <div class="left"></div>
    <!-- 中间div -->
    <div class="center"></div>
    <!-- 右侧div -->
    <div class="right"></div>
</div>

<!-- 底部信息div -->
<div class="footer"></div>
</body>
</html>

高度塌陷

  .box1{
        /*为box1设置一个边框*/
        border: 10px red solid;
        height: 100px;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: blue;
        /*
        在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高
        但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷
        由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱
        所以在开发中一定要避免出现高度塌陷的问题,
        我们可以将父元素的高度写死，以避免塌陷的问题出现，
        但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的
        */
        /*为子元素设置向左浮动*/
        float: left;
    }
    .box3{
        height: 100px;
        background-color: yellow;
    }

解决高度塌陷
.box1{
border: 10px red solid;
/*
根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context（块的格式化环境）简称BFC，该属性可以设置打开或者关闭，默认是关闭的
当开启元素的BFC以后，元素将会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素

        如何开启元素的BFC
            1.设置元素浮动
                - 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
            2.设置元素绝对定位
            3.设置元素为inline-block
                - 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
            4.将元素的overflow设置为一个非visible的值
        推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式
        */
        overflow: hidden;

        /*
        但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6
        在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题
        开启方式很多，我们直接使用一种副作用最小的：
        直接将元素的zoom设置为1即可
        */
        /*
        zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
        zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
        zoom这个样式，只在IE中支持，其他浏览器都不支持
        */
        zoom: 1;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
    }
    .box3{
        height: 100px;
        background-color: yellow;
    }
</style>