CSS基础

复习第五天的知识
1、表格由内容区(content)、内边距(padding)、边框(border)、外边距(margin)组成
2、box-sizing的属性值有两个，分别是content-box 默认盒子模型 盒子的宽=width
                                   border-box  怪异盒子模型 盒子的宽=width+border+padding
3、设置水平居中：margin:0 auto;


今天的知识
1、设置隐藏    
                    ----visitiable:hidden;    隐藏
              :visible;   可见的(默认值)
结果：会占用HTML页面的空间
                    ----display:none;
                结果：被隐藏的元素不会占用HTML页面的任何空间
2、继承性：当样式属性具有继承性时，只为指定的祖先元素设置指定的样式属性
           影响指定的祖先元素的所有后代元素的样式 
3、块级与内联元素的转换
        display:inline;        显示为内联元素
    display:block;         显示为块级元素
    display:inline-block;  显示为行内块元素
4、内容溢出(不只是文字，还有图片和嵌套盒子)
        overflow:visible;  默认值
overflow:hidden;   将超出的部分进行隐藏
overflow:scroll;   始终显示滚动条
overflow:auto;     自动(内容超出的话才提供滚动条)

用于测试内容快捷键:lorem+tab键

5、文档流
   将窗体自上而下分成一行一行，并在每行中按从左至右的挨次排放元素，即为文档流。
   有三种状况将使得元素离开文档流而存在，分别是浮动、绝对定位和相对定位

5、浮动
   浮动会使元素脱离文档流，向左或向右移动
    float:none;   默认值，不浮动
    float:left;   左浮动
float:right;  右浮动
1)浮动的问题
    ----显示的文本内容是不会被浮动的元素所覆盖，而是环绕在浮动元素的周围
        ----如果两个div是父级与子级的关系，为子级设置浮动，子级元素永远不会超出父级元素的范围
    ----如果两个div是相邻兄弟关系的话，为第一个div设置浮动，浮动的元素永远不能超过第一个元素
6、高度塌陷
    块级元素的高度=所有子元素高度的总和+padding+border，默认宽度是父级元素宽度的100%
        当子元素设置为浮动时，div元素的宽度默认不设置--没有任何宽度
                      div元素设置宽度width时---设置的值为像素值-固定值
                        ---设置的值为百分比-相对于父级元素的宽度


        两个div元素之间是父级与子级的关系，为子级元素设置浮动，父级元素默认没有设置高度
    如果子级元素不设置浮动，父级的默认高度就是子级元素的高度总和
如果子级元素设置浮动，父级默认高度为零

7、BFC块级格式化环境


    BFC是元素的隐含属性，默认情况下是关闭的，当元素开启BFC以后
   特征:文档流中的元素不会被设置为浮动的元素所覆盖
            子元素垂直方向的外边距不会传递给父元素
            元素可以包含浮动的子元素
        
    BFC的打开方式：
            设置元素为浮动
设置元素的display为inline-block
设置元素为绝对定位
将元素的overflow设置为一个非visible的值(hidden)
在所有子元素的最后新增一个子元素，并设置clear属性值为both