盒模型问题

margin常见的bug

    margin的重叠问题
            上下排列的两个盒子之间，都设置margin，上下的margin会重叠，谁的外边距大设置谁
             解决办法：设置一个margin就行

    margin-top的传递问题
             当大盒子的第一个子元素设置margin-top的时候，margin-top会错误的传递给父元素设置
             解决方法：
                 设置父元素
                          border：
                          padding:1px
                          overflow:hidden  (设置元素超出隐藏)
                 设置子元素
                          float(不推荐专门解决专递问题)

相对定位（相对定位/绝对定位/固定定位/粘性定位）position:relative; (占位，在自己原位置上下左右移动）
       定位的元素会触发五个隐藏元素
       4个位置方向元素left、right、top、bottom
       1个层级关系 z-index，z-index值越大，层级越高，可以设置负数，但是必须是整数
              普通元素的 0    第一个 定位元素的 0.1 第二个 定位元素的 0.2

绝对定位（不占位，脱离文档流）position：absolute;
   位置移动先找最近的有定位的父元素，如果没有这一元素，再找浏览器窗口为位置移动的参照物（绝对定位的参照物也称为包含块）

固定定位  position:fixed;（不占位，脱离文档流）
                固定定位位置移动的参照物，永远是浏览器窗口的可视区
设置盒子水平垂直居中的两种方法
     1   position：fixed；
          left：50%；
          top：50%；
          margin-left:-（盒子宽度一半的px）
          margin-top:-(盒子高度的一半的px)
     2   position:fixed;
          left:0px;
          top:0px;
          right:0px;
          bottom:0px;
          margin:auto;(这种方法绝对定也适用)

粘性定位position：sticky；
类似于相对定位和绝对定位的结合体，如果滚动条没有划过内容，他就是一个占位的盒子；划过内容，类似于固定定位的效果，参照物是浏览器窗口的可视区。
     注意：1.需要设置位置方向   2.父元素不能设置overflow：hidden；

取消定位position：static；
继承  position：inherit；
                     注意：定位产生的高度塌陷只能用固定高

设置内容在浏览器窗口水平垂直居中（登录或者广告会使用）
第一种
盒子：
    position:fixed；
    left:50%;
    top:50%;
    margin-left:-（盒子宽度的一半）
    margin-top:-（盒子高度的一半）
第二种
     position:fixed；
     left:0px
     right:0px
     top:0px
     bottom:0px
     margin:auto;

元素类型分为两类

块元素  和  内联元素（内联元素包含可变元素，行内块元素）

块元素的特性
1、块元素以块状内容内容显示，可以设置宽高
2、独占一行，可以自动换行，上下排列
3、块元素可以嵌套块和内联元素（p,h1~h6,dt）
4、块元素可以设置4个方向的内外边距
5、块元素没有设置宽度，块元素的宽度是自适应（占满父元素的宽度），如果设置浮动后，块元素的宽度有内容撑开

内联元素
1、内联元素的宽高有内容撑开，不能设置宽高
2、水平显示，不会自动换行
3、内联元素只能嵌套内联元素
4、内联元素可以识别盒模型的属性，但是只支持左右的margin和padding，
5、内联元素设置浮动后，元素类型会受影响
            a、可以设置宽高
            b、可以设置4个方向的margin和padding
            c、空格的间隙也取消

行内块元素：img，input，select、textarear
1、可以设置宽高
2、水平显示，不会自动换行
3、行内块元素可以嵌套内联
4、行内块元素可以设置4个方向的内外边距
5、换行产生的一个空格间隙会取消

常见的块元素
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr-td  表格及行-单元格

常见的内联元素
a –超链接（锚点）                               
b - 粗体(不推荐) 
br - 换行                             
i - 斜体
em - 强调                             
img - 图片                         
input - 输入框               
label - 表单标签                  
span - 常用内联容器，定义文本内区块
strong - 粗体强调
sub - 下标   
sup - 上标
textarea - 多行文本输入框
u - 下划线
select - 项目选择  

常见的行内块元素
img，input，select、textarear

元素类型直接可以相互转换

转换成块元素display: block
转换成内联、行内display：inline
行内块元素 display:inline-block

设置元素隐藏
 display: none; 
 （不占位，内容完全消失）
 visibility:hidden
 (占位隐藏)
  opacity: 0;
  透明度也可以设置占位隐藏的效果

li的display的值是
  list-items

设置单行文本溢出隐藏设置省略号
1、定义范围                    width
2、强制内容不换行         white-space
                                    pre     不换行，多个空格可以识别
                                nowrap  不换行，只能识别一个空格 
3、超出的内容隐藏        overflow：hidden
4、隐藏的内容变成省略号  text-overflow：ellipsis

设置文本超出
overflow
        visible  默认值，没有效果
        hidden   超出隐藏
        scroll   不管内容是否超出，都以滚动条的形式显示
        auto     只有超出才以滚动条的形式显示
overflow-x    默认值auto
overflow-y

text-overflow： 
            ellipsis   隐藏的内容转换成省略号
            clip       隐藏的内容裁剪掉

设置内容垂直居中
1、设置内容垂直居中
vertical-align：
                top
                bottom
                middle
使用的特性：1、挑元素类型（内联元素或者行内块元素）
                      2、需要设置参照物

宽度自适应：
1、 块元素不设置宽度   (一般情况，元素正常占位，没有设置浮动)
2、块元素设置width:100%（设置浮动，元素类型受影响，元素不占位）
calc函数
可以动态计算数值
可以直接设置运算
+、-、 *、/
calc(   )
width:calc(100% * 2) ;

清除浮动
clear：
        left   清除左浮动
        right  清除有浮动
        both   清除两边浮动
副作用：margin-top的距离是从浮动盒子开始算（margin-top=间距+浮动盒子的高度）

高度自适应
父元素的高度由内容撑开
1：盒子不设置height
2：盒子的height：auto;

最小高度
 如果内容的高度小于最小高度，以最小高度为准，如果内容高大于最小高度，以内容的高度为准
min-height：600px;

IE6或者以下版本浏览器是不识别min-height，在IE6或者以下浏览器，height就是最小高度的功能

        IE6 以下版本浏览器            height 
        其他浏览器，IE6以上浏览器      min-height

过滤器：
        下划线过滤器(只在IE6或6以下浏览器识别)
        _属性：属性值

                _height:600px
                min-height:600px

关键字过滤器（提升某一句css声明的权重，比内联样式表的权重还要高，IE6,5不识别）
        属性:属性值  ！important

                min-height:600px;
                height:auto !important
                height:600px

高度塌陷
父元素的高度由内容撑开，一旦内容浮动后，内容不占位，父元素识别不了内容的高度，就会出现高度塌陷的情况

解决
        1、给塌陷的父元素设置overflow:hidden
          overflow:hidden属性可以触发BFC（独立的渲染区域，浮动元素也参与高度计算）

        2、在所有浮动元素的最下方，设置一个空盒子，给空盒子清除浮动，把父元素的高度撑开
                .clear{
                        height: 0px;
                        clear: both;
                        }
       3、万能清除法
        .clear-fix::after{
            content: "";
            display: block;
            clear: both;
        }
        
        .clear-fix {
            zoom: 1;
                IE的私有属性，解决IE7的兼容问题
        }

        4、设置固定高

子元素的高度由父元素决定
1、父元素有高度
2、子元素设置height:100%

元素的高度等于当前屏幕的高度
html,body{height:100%}
div{height:100%}

伪对象选择器
 ：：after   和：：before，必须配合content属性一起使用
 ：：first-letter  设置文本内容第一个字的样式
 ：：first-line    设置文本内容第一行的样式

多行文本溢出隐藏
  display: -webkit-box;
        /* 转换成弹性盒 */
        -webkit-box-orient: vertical;
        /* 设置排列方式，垂直排列 */
        -webkit-line-clamp:3;
        /* 设置显示的行数 */
        overflow: hidden;
        /* 超出隐藏 */
对pc端的兼容性比较差，灵活度不太好，灵活度也不太好，显示几行内容需要自己设置
https://www.html.cn/archives/5206/